axios请求及响应拦截

对axios进行基础配置
在src文件中创建util文件夹
封装request.js文件

import axios from 'axios';  // 该处引入axios模块
//封装好的请求token
看下另外一篇文章
import { getToken } from '@/utils/auth'

// 构建axios实例
const instance = axios.create({
	baseURL: process.env.BASE_API,  // 该处url会根据开发环境进行变化（开发/发布）
	timeout: 10000  // 设置请求超时连接时间
})

请求拦截

instance.interceptors.request.use(
	config => {
		console.log(config);  // 该处可以将config打印出来看一下，该部分将发送给后端（server端）
		config.headers.token = '该处可设置token内容';
		return config  // 对config处理完后返回，下一步将向后端发送请求
	},
	error => {  // 当发生错误时，执行该部分代码
	    console.log(error); //调试用
	    return Promise.reject(error)
	}
)

或

instance.interceptors.request.use(
	config => {
        if (store.getters.token) {
            // let each request carry token
            // ['X-Token'] is a custom headers key
            // please modify it according to the actual situation
            config.headers['Authorization'] = "Bearer " + getToken()
        }
        return config
	},
	error => {  // 当发生错误时，执行该部分代码
	    console.log(error); //调试用
	    return Promise.reject(error)
	}
)

相应拦截

instance.interceptors.response.use(
	response => {  // 该处为后端返回整个内容
		const res = response.data;  // 该处可将后端数据取出，提前做一个处理
		if ('正常情况') {
			return response  // 该处将结果返回，下一步可用于前端页面渲染用
		} else {
			alert('该处异常');
			return Promise.reject('error')
		}
	},
	error => {
		console.log(error),
		return Promise.reject(error)
	}
)

或

instance.interceptors.response.use(
	response => {  // 该处为后端返回整个内容
		 const res = response.data

        // if the custom code is not 20000, it is judged as an error.
        if (res.status === 10004 || res.status === 10003) {
            // to re-login
            MessageBox.confirm('您已经登出，您可以取消停留在此页面或再次登录', '确认登出', {
                confirmButtonText: '重新登录',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                store.dispatch('user/resetToken').then(() => {
                    location.reload()
                })
            })
        } else if (res.status === 403) {
            Message({
                message: res.msg || '操作失败',
                type: 'error',
                duration: 3 * 1000
            })
            return Promise.reject(new Error(res.msg || '操作失败'))
        } else if (res.status !== 200) {
            Message({
                message: res.msg || '操作失败',
                type: 'error',
                duration: 3 * 1000
            })

            // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;

            return Promise.reject(new Error(res.msg || '操作失败'))
        } else {
            return res
        }
	},
	error => {
		  console.log('err' + error) // for debug
        let { message } = error;
        if (message == "Network Error") {
            message = "后端接口连接异常";
        } else if (message.includes("timeout")) {
            message = "系统接口请求超时";
        } else if (message.includes("Request failed with status code")) {
            message = "系统接口" + message.substr(message.length - 3) + "异常";
        }
        Message({
            message: message,
            type: 'error',
            duration: 3 * 1000
        })
        return Promise.reject(error)
	}
)

最后导出

export default service