Axios拦截器(Interceptors)

Axios拦截器(Interceptors)

axios拦截器主要分为两种：请求拦截器和响应拦截器。

请求拦截器

请求拦截器作用是在发出请求时，拦截下用户的请求，执行完一系列处理再发送出去（像添加cookie、token，请求头等）

配置请求拦截器

• 首先创建一个axios实例对象

import axios from 'axios'
import { ELMessage } from 'element-plus'
const myRequest = axios.create({
	baseURL: process.env.BASE_API, // 这里可以写自己访问的地址,例如127.0.0.1
	timeout: 3000, // 请求超时时间
	headers: {
		"Content-Type": "application/json;charset=utf-8"
	}
})

这样一个axios实例就创建好了，我们就可以用这个实例来访问我们需要访问的地址

• 接下来就是配置请求拦截器(interceptor.request)

myRequest.interceptors.request.use(
	req=>{...}, // 对发起的请求进行处理，方法写在{}中，req是请求参数
	err=>{...}, // 出现请求错误时进行的处理
}

下面写一个设置token的实例：

myRequest.interceptors.request.use(
    config => {
        const token = localStorage.getItem('token') // 获取存取的token
        if(token){ // 不为空的话就设置进headers
            config.headers['token'] = token
        }
        return config
    },
    err => {
        return Promise.reject(error)
    }
)

配置响应拦截器

当服务器产生响应时，对响应数据进行拦截，并对拦截的数据进行处理，处理完数据再返回，比如对于成功的返回，我们只需要返回数据，那么我们可以直接处理数据，把不需要的数据去除再返回。如果出错的话，就返回错误信息，并用message显示错误。

• 接下来就是配置响应拦截器(interceptor.response)

myRequest.interceptors.response.use(
	res=>{...}, // 对响应进行处理，方法写在{}中，res是返回数据
	err=>{...}, // 出现请求错误时进行的处理
)

假设服务器给我们的响应为：

{
	"errCode" : 0,
	"errDesc" : "Success",
	"data": "xxxxxx"
}

这时候我们可以这样写响应拦截器：

myRequest.interceptors.response.use(
    res => {
        if(res.errCode ==  0){
        	return Promise.resolve(res.data)
       	}
        else {
        	ElMessage({
	            message: "Error",
	            type: 'error',
	            duration: 5 * 1000
	        })
        	return Promise.reject(new Error("Error Message"))
		}
    },
    err => {
        ElMessage({
            message: err.data.message,
            type: 'error',
            duration: 5 * 1000
        })
    }
)

通过上面的处理之后，我们axios.xxx().then((res)=>{…})的res就为响应数据的data，其中errCode和errDesc就被处理掉了。