axios取消請求、配置的操作方法

更新時間：2025年02月12日 09:32:16 作者：捂風鋔笶_小欣同學

Axios 是一個基于 Promise 的 HTTP 客戶端,用于瀏覽器和 Node.js,在實際開發(fā)中,有時候需要取消已經(jīng)發(fā)起的請求,同時也需要對請求進行各種配置,以下分別介紹 Axios 取消請求和配置請求的方法,感興趣的朋友一起看看吧

取消請求

使用 CancelToken（舊方法）

在 Axios 舊版本中，使用 CancelToken 來取消請求。CancelToken 是 Axios 提供的一個用于取消請求的工具。

// 創(chuàng)建一個 CancelToken 源
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
// 發(fā)起請求，并傳入 CancelToken
axios.get('https://api.example.com/data', {
    cancelToken: source.token
})
.then(response => {
    console.log(response.data);
})
.catch(error => {
    if (axios.isCancel(error)) {
        console.log('請求已取消:', error.message);
    } else {
        console.log('請求出錯:', error.message);
    }
});
// 取消請求
source.cancel('用戶取消了請求');

2. 使用 AbortController（新方法）

從 Axios v0.22.0 開始，支持使用 AbortController 來取消請求，這是一種更現(xiàn)代的方法，與瀏覽器的 fetch API 取消請求的方式一致。

// 創(chuàng)建一個 AbortController 實例
const controller = new AbortController();
const signal = controller.signal;
// 發(fā)起請求，并傳入 signal
axios.get('https://api.example.com/data', {
    signal: signal
})
.then(response => {
    console.log(response.data);
})
.catch(error => {
    if (error.name === 'AbortError') {
        console.log('請求已取消');
    } else {
        console.log('請求出錯:', error.message);
    }
});
// 取消請求
controller.abort();

請求配置

1. 全局配置

可以在創(chuàng)建 Axios 實例時進行全局配置，這樣所有通過該實例發(fā)起的請求都會使用這些配置。

import axios from 'axios';
// 創(chuàng)建一個 Axios 實例，并進行全局配置
const instance = axios.create({
    baseURL: 'https://api.example.com', // 請求的基礎 URL
    timeout: 5000, // 請求超時時間，單位為毫秒
    headers: {
        'Content-Type': 'application/json'
    }
});
// 使用實例發(fā)起請求
instance.get('/data')
.then(response => {
    console.log(response.data);
})
.catch(error => {
    console.log('請求出錯:', error.message);
});

2. 單個請求配置

在發(fā)起單個請求時，也可以傳入特定的配置，這些配置會覆蓋全局配置。

import axios from 'axios';
// 發(fā)起單個請求，并傳入特定配置
axios.get('https://api.example.com/data', {
    timeout: 3000, // 該請求的超時時間為 3 秒
    headers: {
        'Authorization': 'Bearer your_token'
    }
})
.then(response => {
    console.log(response.data);
})
.catch(error => {
    console.log('請求出錯:', error.message);
});

3. 常用配置選項

url：請求的 URL 地址。
method：請求的方法，如 get、post、put、delete 等，默認為 get。
baseURL：請求的基礎 URL，會與 url 拼接成完整的請求地址。
headers：請求頭信息，是一個對象。
params：URL 參數(shù)，會被拼接在 URL 后面。
data：請求體數(shù)據(jù)，用于 post、put 等方法。
timeout：請求超時時間，單位為毫秒。
responseType：響應數(shù)據(jù)的類型，如 json、text、blob 等，默認為 json。

axios({
    url: '/user',
    method: 'post',
    baseURL: 'https://api.example.com',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    params: {
        id: 123
    },
    data: {
        name: 'John Doe',
        age: 30
    },
    timeout: 5000,
    responseType: 'json'
})
.then(response => {
    console.log(response.data);
})
.catch(error => {
    console.log('請求出錯:', error.message);
});

到此這篇關于axios取消請求、配置的操作方法的文章就介紹到這了,更多相關axios取消請求、配置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: