Axios如何取消請求，其原理是什么？

作者：cqhly 2024-08-12 12:32:53

Axios 取消請求的原理是基于底層網絡請求庫（如 XMLHttpRequest 或 Fetch）提供的中止機制。當調用取消令牌的 cancel 方法時，Axios 會觸發中止底層的網絡請求，從而終止正在進行的請求過程。

axios 可以通過創建一個 CancelToken 來取消一個請求,基本原理是:

創建一個 CancelToken 的實例,它有一個 executor 函數,可以通過調用 executor 參數中的 cancel 函數來取消請求。
在 axios 請求配置中指定 cancelToken 屬性,將 CancelToken 實例傳遞進去。
當我們需要取消請求時,調用 CancelToken 實例的 cancel() 方法即可取消對應的請求。
axios 檢測到配置的 cancelToken 被取消,就會取消掉這個請求,并在錯誤回調中返回一個 Cancel 錯誤。axios 內部會監聽 cancelToken 實例的 cancel 信號,一旦觸發就會跳出隊列,取消對應請求的執行。示例代碼:

js
const CancelToken = axios.CancelToken;
const source = CancelToken.source();


axios.get('/user', {
  cancelToken: source.token
}).catch(function(thrown) {
  if(axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 處理錯誤
  }
});


// 取消請求
source.cancel('Operation canceled by the user.');

vue、React項目中如何取消

在基于 React 或 Vue 的應用中，可以通過封裝 Axios 并結合組件的狀態管理來實現取消請求的功能。下面分別介紹在 React 和 Vue 中如何實現這一點。

在 React 中的實現：

創建一個封裝的 Axios 實例，以便于應用中的多個組件共享相同的配置和取消令牌。

// axiosInstance.js
import axios from 'axios';


const instance = axios.create();


export default instance;

在組件中使用這個封裝的 Axios 實例，并結合組件的狀態管理來處理取消請求的邏輯。

// YourComponent.js
import React, { useState } from 'react';
import axiosInstance from './axiosInstance';


function YourComponent() {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState(null);


  const source = axiosInstance.CancelToken.source();


  const fetchData = async () => {
    try {
      setLoading(true);
      const response = await axiosInstance.get('/api/some-endpoint', {
        cancelToken: source.token
      });
      setData(response.data);
      setLoading(false);
    } catch (error) {
      if (axiosInstance.isCancel(error)) {
        console.log('請求被取消：', error.message);
      } else {
        // 處理其他錯誤
      }
      setLoading(false);
    }
  };


  const cancelRequest = () => {
    source.cancel('請求被用戶取消');
  };


  return (
    <div>
      {loading ? <p>Loading...</p> : <p>{data}</p>}
      <button onClick={fetchData}>Fetch Data</button>
      <button onClick={cancelRequest}>取消請求</button>
    </div>
  );
}


export default YourComponent;

在 Vue 中的實現：

創建一個封裝的 Axios 實例，同樣可以讓多個組件共享相同的配置和取消令牌。

// axiosInstance.js
import axios from 'axios';


const instance = axios.create();


export default instance;

在組件中使用這個封裝的 Axios 實例，并結合組件的狀態管理來處理取消請求的邏輯。

<template>
  <div>
    <p v-if="loading">Loading...</p>
    <p v-else>{{ data }}</p>
    <button @click="fetchData">Fetch Data</button>
    <button @click="cancelRequest">取消請求</button>
  </div>
</template>


<script>
import axiosInstance from './axiosInstance';


export default {
  data() {
    return {
      loading: false,
      data: null,
      source: axiosInstance.CancelToken.source()
    };
  },
  methods: {
    async fetchData() {
      try {
        this.loading = true;
        const response = await axiosInstance.get('/api/some-endpoint', {
          cancelToken: this.source.token
        });
        this.data = response.data;
        this.loading = false;
      } catch (error) {
        if (axiosInstance.isCancel(error)) {
          console.log('請求被取消：', error.message);
        } else {
          // 處理其他錯誤
        }
        this.loading = false;
      }
    },
    cancelRequest() {
      this.source.cancel('請求被用戶取消');
    }
  }
};
</script>

原理

具體來說，以下是 Axios 取消請求的原理：

創建 CancelToken 對象：在發起請求之前，可以通過 axios.CancelToken.source() 方法創建一個 CancelToken 對象，并獲取其中的 token。這個 token 是一個用于標識該請求的令牌。
關聯 CancelToken：將創建的 CancelToken 對象中的 token 關聯到請求的配置中，通過 cancelToken 參數。這告訴 Axios 在取消令牌觸發時要取消這個請求。
取消請求：當想要取消請求時，調用 CancelToken 對象中的 cancel 方法，并提供一個取消的原因。這會觸發 Axios 內部的邏輯，導致底層的網絡請求被中止。
捕獲取消錯誤：如果請求在取消前已經發出，Axios 會拋出一個名為 Cancel 的錯誤。可以使用 axios.isCancel(error) 來檢查是否是取消錯誤。在 .catch 部分處理這個取消錯誤。

底層 XMLHttpRequest 和 Fetch API 都提供了終止請求的機制。當取消請求時，Axios 會調用底層網絡請求的相應中止方法，例如 xhr.abort() 或 fetch.abort()，從而使網絡請求停止并拋出取消錯誤。這個機制允許有效地取消正在進行的請求，避免不必要的數據傳輸和處理。

責任編輯：武曉燕來源：海燕技術棧

Axios 機制網絡