項目地址：https://github.com/Ewall1106/mall

有什么用？

• 當(dāng)用戶頻繁點擊在短時間內(nèi)發(fā)送多個 ajax 請求，但是由于網(wǎng)絡(luò)原因服務(wù)器數(shù)據(jù)無法及時響應(yīng)返回，這時候，就會有可能造成前端頁面數(shù)據(jù)不匹配的情況。

• 具體場景來說，在用戶網(wǎng)速不好的情況下的比如搜索框 onchange 事件的模糊搜索、觸底刷新請求列表數(shù)據(jù)、tab 欄的高頻切換等等。

• 再者，這樣也浪費服務(wù)器資源，也是性能優(yōu)化的一種必要手段。

基本使用

• 官網(wǎng)地址：Axios-CancelToken

• 官網(wǎng)的基本示例如下。

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // An executor function receives a cancel function as a parameter
    cancel = c;
  }),
});

// cancel the request
cancel();

具體使用

• 利用 axios 的攔截器，在請求攔截的時候?qū)?dāng)前 request url 和 取消函數(shù)c 以 key-value 的形式保存下來。

• 在響應(yīng)攔截器時將這個 key 刪除，如果重復(fù)請求了就會調(diào)用取消請求函數(shù)。

// https://github.com/Ewall1106/mall/blob/master/src/utils/request.js
import axios from 'axios';

const CancelToken = axios.CancelToken;
const pendingReq = {};

// 請求攔截器
service.interceptors.request.use(
  (config) => {
    if (store.getters.token) {
      // 取消請求
      const key = config.url + '&' + config.method;
      pendingReq[key] && pendingReq[key]('操作太頻繁了~');
      config.cancelToken = new CancelToken((c) => {
        pendingReq[key] = c;
      });
      // ...
    }
    return config;
  },
  (error) => {
    console.log(error);
    return Promise.reject(error);
  }
);

// 響應(yīng)攔截器
service.interceptors.response.use(
  (response) => {
    // 取消請求
    const key = response.config.url + '&' + response.config.method;
    pendingReq[key] && delete pendingReq[key];

    // ...
  },
  (error) => {
    console.log('err' + error);
    Toast.fail(error.message);
    return Promise.reject(error);
  }
);

export default service;