前端知识点

配色方案

本页目录

Axios 问题 ​

拦截器 ​

axios 拦截器有两个：

1. 请求拦截器 ​

axios.interceptors.request

JS
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

2. 返回拦截器 ​

axios.interceptors.response

JS
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
}, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
});
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
}, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
});

问题 ​

1. 说说你是怎么封装 axios 的 ​

2. 说说 axios 的拦截器 ​

axios 有两个拦截器，一个是请求拦截器 axios.interceptors.request，一个是返回拦截器 axios.interceptors.response；
请求拦截器一般做一些接口请求前的校验与统一操作，比如系统是 jwt 的权限模式，我们需要在请求头中统一加上 token ，如果前端保存了 token 的失效日期，我们可以在此做时间校验。
返回拦截器是对返回的 http 状态做统一处理，如果与后端约定了一些统一的业务状态码，也可以在此做统一处理。

3. 说说 axios 如何取消请求以及使用场景（说说模糊搜索时用户不断触发请求，怎么保证获取的是最后一次请求数据）？ ​

使用场景：模糊搜索，用户不断输入触发接口请求（也可以加上防抖一起说说），可能后一个请求返回时间更快，造成返回结果与搜索关键字不匹配，此时我们需要在接口在此请求前，将上一个请求取消掉。取消请求是浏览器行为，后端依旧会接收到接口请求并处理。

新版 axios 的取消请求支持 fetch API 方式，代码如下：

JS
const controller = new AbortController();

axios.get('/foo/bar', {
   signal: controller.signal
}).then(function(response) {
   //...
});
// 取消请求
controller.abort()
const controller = new AbortController();

axios.get('/foo/bar', {
   signal: controller.signal
}).then(function(response) {
   //...
});
// 取消请求
controller.abort()