vue 封装axios

方法一

utils/request.js

import axios from 'axios' // 引入axios

const instance = axios.create({
  baseURL: 'http://www.baidu.com',
  timeout: 60000
})

// 请求拦截器
instance.interceptors.request.use((config) => {
  console.log('发请求之前', config)
  return config
}, (error) => {
  return Promise.reject(error)
})

// 响应拦截器
instance.interceptors.response.use((response) => {
  console.log('得到的响应数据', response)
  return response
}, (error) => {
  console.log('响应错误', error)
  return Promise.reject(error)
})

// get请求
export function get (url, data = {}) {
  return new Promise((resolve, reject) => {
    instance
.get(url, {
        params: data
      })
.then((response) => {
        resolve(response)
      })
.catch((err) => {
        reject(err)
      })
  })
}

// post请求
export function post (url, data = {}) {
  return new Promise((resolve, reject) => {
    instance.post(url, data).then(
      (response) => {
        resolve(response.data)
      },
      (err) => {
        reject(err)
      }
    )
  })
}
 

api/index.js

import { get, post } from "./axios";

// 登录
const login = (params) => post('/tv/login', params);

export {
    login,
};
 

vue.config.js

module.exports = {
    lintOnSave: false,
	// publicPath: './',
    // outputDir: 'dist', // 输出文件目录
    // transpileDependencies: true,
    devServer: {
        open: true,
		host: 'localhost',
        port: '8080',
        proxy: { //解决跨域
            '^/': {
                target: 'http://192.168.3.222:8081',
                changeOrigin: true,
 // 是否开启跨域
                ws: true,
 // 如果要代理websockets, 配置这个参数
				secure: false, // 如果是https接口,需要配置这个参数
                pathRewrite: {
                    '^/': ''
                }
            }
        }
    }
}

方法二

utils/request.js

import axios from 'axios'
import router from '@/router'

// get请求
export const get = (url, params = {}) => {
	let token = localStorage.getItem('token') || ''
	return new Promise((resolve, reject) => {
		axios.get(url, {params, headers: {'token': token}}).then(res => {
			if(res.data.msg == 'token无效' || res.data.msg == '无效签名' || res.data.msg == 'token过期' || res.data.msg == '算法不一致') {
				router.push('/login')
			} else {
				resolve(res)
			}
		}).catch(err => {
			console.log(err)
		})
	});
}

 // post请求
export const post = (url, params, isFile = false) => {
	let token = localStorage.getItem('token')
    let data = null;
    //TODO 如果是文件，转 FromData；不是就 qs.stringify()
    if (isFile) {
        data = new FormData();
        for (let key in params) {
            if (Array.isArray(params[key])) {
                params[key].forEach(item => {
                    data.append(key + "[]", item);
                })
            } else {
                data.append(key, params[key]);
            }
            console.log(key, params[key])

        }
        console.log(data)
    } else {
        data = params
    }
    // 返回
    return new Promise((resolve, reject) => {
        axios.post(url, data, {headers: {'content-Type': 'application/json', 'token': token}}).then(res => {
            if(res.data.msg == 'token无效' || res.data.msg == '无效签名' || res.data.msg == 'token过期' || res.data.msg == '算法不一致') {
            	router.push('/login')
            } else {
            	resolve(res)
            }
        }).catch(err => {
			console.log(err)
		})
    })
}
 

api/index.js

import {get, post } from "@/utils/request";

// 登录
export const login = (params) => get("/szhyq/screen/login", params);

vue.config.js

module.exports = {
    lintOnSave: false,
    publicPath: './', //process.env.NODE_ENV
    outputDir: 'dist', // 输出文件目录
    devServer: {
        open: true,
        host: 'localhost',
        disableHostCheck: true,
        port: 8080,
        https: false,
        hotOnly: false,
        proxy: { //解决跨域
            '^/szhyq': {
                target: 'https://test-zhzl.spacecig.com:18443',
				// target: 'http://192.168.1.17:8088',
                changeOrigin: true,
                ws: true,
                secure: true,
                pathRewrite: {
                    '^/szhyq': '/szhyq'
                }
            }
        }
    },

}