Axios中斷請求的方法和實現方式

Axios是一款非常流行的基於Promise的HTTP客戶端，它可以用於瀏覽器和Node.js平台。在實際開發中，我們可能會遇到一些場景需要中斷正在進行的請求，比如用戶取消了操作或者當前頁面已經被關閉。本文將詳細介紹Axios中中斷請求的方法和實現方式。

一、使用CancelToken中斷請求

Axios中提供了CancelToken類，可以用來取消請求。CancelToken是用來取消請求的一個信號，在請求還沒有完成的時候發出該信號就可以中斷請求。要使用CancelToken中斷請求，我們需要做以下幾個步驟：

1. 首先創建一個CancelToken對象，可以通過下面的代碼創建：

const { CancelToken } = axios;
const source = CancelToken.source();

2. 在發送請求的時候，將前面創建的CancelToken對象傳遞給axios實例的config參數中，例如：

axios.get('/api/user', {
  cancelToken: source.token
})

3. 當需要中斷請求時，可以調用source.cancel()方法發出取消的信號即可，例如：

source.cancel('請求被取消了！');

這裡需要注意的是，在取消請求之後，當前的請求會被取消並且會拋出一個Cancel對象，錯誤信息中包含了被取消請求的原因。

二、使用AxiosInterceptorManager中斷請求

另外一種中斷請求的方式是使用AxiosInterceptorManager中的eject方法來中斷請求。AxiosInterceptorManager是一個攔截器管理器，在Axios中，攔截器被分為兩種，一種是請求攔截器，另一種是響應攔截器。請求攔截器在請求被發送之前執行，響應攔截器在響應被處理之前執行。我們可以通過AxiosInterceptorManager中的eject方法來中斷請求。具體實現步驟如下：

1. 在發送請求的時候，將前面創建的config參數對象保存起來，例如：

axios.interceptors.request.use(config => {
  config.source = axios.CancelToken.source();
  return config;
}, error => {
  return Promise.reject(error);
});

這裡使用了axios.interceptors.request.use()方法向請求攔截器隊列中添加了一個攔截器，這個攔截器會在請求被發送前執行。在這個攔截器中，我們對config參數對象進行了修改，添加了一個source屬性，用於保存CancelToken對象。

2. 當需要中斷請求時，可以調用axios.interceptors.request.eject()方法來中斷請求，例如：

axios.interceptors.request.eject(config.interceptorId);

這裡需要注意的是，通過eject方法中斷請求只能在請求攔截器中使用，如果需要在響應攔截器中中斷請求，則需要使用第一種方法。

三、結合Promise.race()函數中斷請求

除了上面兩種方式，還可以通過Promise.race()函數來中斷請求。這種方式可以同時處理多個請求，只有當其中一個請求被中斷時，其餘的請求也都會被中斷。

具體實現步驟如下：

1. 首先創建一個包含多個請求的Promise數組，例如：

const request1 = axios.get('/api/user?name=John');
const request2 = axios.get('/api/profile?id=123');
const request3 = axios.get('/api/post?title=JavaScript');
const request4 = axios.get('/api/comment?postId=123456');
const requests = [request1, request2, request3, request4];

2. 使用Promise.race()函數將多個請求進行封裝，例如：

Promise.race(requests).then(response => {
  console.log(response);
}).catch(error => {
  console.log(error);
});

3. 當需要中斷請求時，調用Promise.race()函數返回的Promise對象的then方法，並將一個Canceled對象作為參數傳遞給它即可，例如：

requests.forEach(request => {
  request.then(response => {
    console.log(response);
  }).catch(error => {
    if (axios.isCancel(error)) {
      console.log(error.message);
    } else {
      console.log(error);
    }
  });
});

setTimeout(() => {
  const cancelToken = axios.CancelToken;
  requests.forEach(request => {
    request.cancelToken = new cancelToken(c => {
      request.cancel = c;
    });
  });
  requests[0].cancel('請求被取消了！');
}, 2000);

在上面的代碼中，我們首先使用forEach方法遍歷requests數組，為每個請求添加一個cancelToken，然後將cancel方法保存起來。之後，通過調用setTimeout函數來模擬中斷請求的情景，在2秒鐘後調用request[0].cancel()方法來中斷第一個請求。

四、總結

以上三種方式都可以用來中斷Axios中正在進行的請求，根據實際場景的不同，我們可以選擇合適的方法來解決問題。通過本文的學習，相信大家都已經掌握了中斷請求的方法和實現方式。