axios请求拦截器和响应拦截器(二种封装方法)

axsio中文文档

第一种封装方法

import axios from 'axios'
import { Base64 } from 'js-base64';
import {ElMessageBox} from 'element-plus'

// 创建通用axios配置
let instance = axios.create({
	responseType:"json",
	headers:{'Content-Type':'application/json'}
})

// 对token加密
function baseFun(){
	const token = localStorage.getItem('token')//从本地缓存里取出token
	const base64 = Base64.encode(token + ':')//对token加密
	return 'Basic ' + base64
}

// http拦截：是在axios请求发出之前给每一个接口携带token去后端校验身份
instance.interceptors.request.use(
	config =>{
		let token = localStorage.getItem('token')
		if(token){
			config.headers.Authorization = baseFun()
		}
		return config
	},
	err =>{
		return Promise.reject(err)
	}
)

//  http拦截：是在axios请求发出之后
instance.interceptors.response.use(
	response =>{
		return response
	},
	error =>{
		if(error.response){
			let ERRS =  error.response.status
			let MSG =  error.response.data.msg.msg
			let errdata = ERRS == 401 ? MSG : '服务器发生错误'
			switch (ERRS){
				case 401:
				// 没有访问权限，token过期，没有携带token请求，token错误
				ElMessageBox.alert(errdata, '提示',{
					confirmButtonText: '好的',
					type:"error"
				})
				.then(res=>{
					// 跳转到登录界面
					window.location.href = '/'
				})
				.catch(err=>{
					// 跳转到登录界面
					window.location.href = '/'
				})
				break;
			}
		}
		return Promise.reject(error.response.data)//返回接口的错误信息
	}
)

export default instance

第二种封装方法

import axios from 'axios'

import qs from 'qs'

import iview from 'iview'

/**

* 配置全局的默认值/defaults

*/

axios.defaults.baseURL = 'http://api.myvue.com'

//在超时前，所有请求都会等待 5 秒

axios.defaults.timeout = 5000

//设置请求头类型

axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded;charset=UTF-8"

/**

* 添加拦截器

* 在请求或响应被 then 或 catch 处理前拦截它们。

*/

//添加请求拦截器

axios.interceptors.request.use(config => {

    //在发送请求之前做些什么

    console.log(config)

    if(config.method == 'post'){

        if(!config.data){ //如果数据不存在

            config.data = {}

        }

        config.data = qs.stringify(config.data)

    }elseif(config.method == 'get'){

        //

    }

    return config;

},error => {

    //对请求错误做些什么

    return Promise.reject(error)

})

//添加响应拦截器

axios.interceptors.response.use(res => {

    if(typeof res.data == 'string'){ //数据格式错误，就把它弹出来，这个是自己设置的

        alert(res.data);

        return false;

    }

    switch(res.data.ret){

        case 200:

            return res.data.data;

        case 300:

            break;

        default:

            iview.Message.error(res.data.msg);

            return false;

    }

},error => {

    return Promise.reject(error)

})

export default axios;