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.1timeout: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')// 获取存取的tokenif(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(newError("Error Message"))}},err=>{ElMessage({message: err.data.message,type:'error',duration:5*1000})})

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