Axios.Interceptors(拦截器)

Axios拦截器(Interceptors)

• 作用：将 axios 中共有的参数，响应公共处理交给拦截器处理，减少axios发送请求时的代码冗余。
• 主要分为两种：
  • 请求拦截器：请求拦截器作用是在发出请求时，拦截下用户的请求，执行完一系列处理再发送出去（一般用与添加cookie、token，请求头等）。
  • 响应拦截器：当服务器产生响应时，对响应数据进行拦截，并对拦截的数据进行处理，处理完数据再返回。列如对于成功的返回，我们只需要返回数据，或者把不需要的数据去除再返回。如果出错的话，就返回错误信息，并用message显示错误。

简单来说就是 在请求或响应被 then 或 catch 处理前拦截它们。

一、配置请求拦截器

1.创建一个axios实例对象

// 创建 axios 实例
const service = axios.create({
  baseURL: 'http://127.0.0.1:8080', // 基准路径（请求路径公共部分）。将自动加载到URL前面，除非URL是一个绝对的URL。
  timeout: 6000 // 请求超时时间（单位毫秒）。如果未加载成功，终止请求并返回请求超时。
})

2.配置请求拦截器(interceptor.request)

service.interceptors.request.use(
	config=>{...}, // 在发送请求之前做一些事情，config是请求参数
	error=>{...}, // 出现请求错误时进行的处理
}

 如果你后面需要移除拦截器可以

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
service.interceptors.request.eject(myInterceptor);  // eject: 开除，弹出； clear()移除全部拦截器。

3.案例

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

二、配置响应拦截器

1.配置响应拦截器(interceptor.response)

service.interceptors.response.use(
    response => {...}, // 对响应进行处理，response是返回数据
    error => {...}  // 出现请求错误时进行的处理
)

2.案例

列如当响应数据不对时：

{

    "status":404,

    "error":"Not Found",

    "path":"/xxx",

}

 可以这样写，具体要依据响应数据是怎样返回的。

service.interceptors.response.use(
    response => {  // 状态代码为【2xx】时将会触发此函数
        return response.data
    }, 
    error => {  // 状态代码超出【2xx】范围时将会触发此函数，列如：4xx、5xx、...
        if (error.response) {
            let data = error.response.data
            switch (error.response.status) {
                case 403:
                  console.log("拒绝访问");  // 建议使用弹窗提示
                  break
                case 404:
                  console.log("很抱歉，资源未找到!");
                  break
                // ......
                default:
                  console.log(data.message);
                  break 
              }
        }
    }
)