快捷導(dǎo)航

axios取消請(qǐng)求、配置的操作方法

更新時(shí)間：2025年02月12日 09:32:16 作者：捂風(fēng)鋔笶_小欣同學(xué)

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

Axios 是一個(gè)基于 Promise 的 HTTP 客戶(hù)端，用于瀏覽器和 Node.js。在實(shí)際開(kāi)發(fā)中，有時(shí)候需要取消已經(jīng)發(fā)起的請(qǐng)求，同時(shí)也需要對(duì)請(qǐng)求進(jìn)行各種配置。以下分別介紹 Axios 取消請(qǐng)求和配置請(qǐng)求的方法。

取消請(qǐng)求

使用 CancelToken（舊方法）

在 Axios 舊版本中，使用 CancelToken 來(lái)取消請(qǐng)求。CancelToken 是 Axios 提供的一個(gè)用于取消請(qǐng)求的工具。

// 創(chuàng)建一個(gè) CancelToken 源
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
// 發(fā)起請(qǐng)求，并傳入 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('請(qǐng)求已取消:', error.message);
    } else {
        console.log('請(qǐng)求出錯(cuò):', error.message);
    }
});
// 取消請(qǐng)求
source.cancel('用戶(hù)取消了請(qǐng)求');

2. 使用 AbortController（新方法）

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

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

請(qǐng)求配置

1. 全局配置

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

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

2. 單個(gè)請(qǐng)求配置

在發(fā)起單個(gè)請(qǐng)求時(shí)，也可以傳入特定的配置，這些配置會(huì)覆蓋全局配置。

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

3. 常用配置選項(xiàng)

url：請(qǐng)求的 URL 地址。
method：請(qǐng)求的方法，如 get、post、put、delete 等，默認(rèn)為 get。
baseURL：請(qǐng)求的基礎(chǔ) URL，會(huì)與 url 拼接成完整的請(qǐng)求地址。
headers：請(qǐng)求頭信息，是一個(gè)對(duì)象。
params：URL 參數(shù)，會(huì)被拼接在 URL 后面。
data：請(qǐng)求體數(shù)據(jù)，用于 post、put 等方法。
timeout：請(qǐng)求超時(shí)時(shí)間，單位為毫秒。
responseType：響應(yīng)數(shù)據(jù)的類(lèi)型，如 json、text、blob 等，默認(rèn)為 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('請(qǐng)求出錯(cuò):', error.message);
});

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

您可能感興趣的文章: