首页 > 网络编程 > JavaScript > javascript技巧 > axios取消请求、配置

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

2025-02-12 09:32:17 作者：捂風鋔笶_小欣同學

Axios 是一个基于 Promise 的 HTTP 客户端,用于浏览器和 Node.js,在实际开发中,有时候需要取消已经发起的请求,同时也需要对请求进行各种配置,以下分别介绍 Axios 取消请求和配置请求的方法,感兴趣的朋友一起看看吧

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。在实际开发中，有时候需要取消已经发起的请求，同时也需要对请求进行各种配置。以下分别介绍 Axios 取消请求和配置请求的方法。

取消请求

使用 CancelToken（旧方法）

在 Axios 旧版本中，使用 CancelToken 来取消请求。CancelToken 是 Axios 提供的一个用于取消请求的工具。

// 创建一个 CancelToken 源
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
// 发起请求，并传入 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 来取消请求，这是一种更现代的方法，与浏览器的 fetch API 取消请求的方式一致。

// 创建一个 AbortController 实例
const controller = new AbortController();
const signal = controller.signal;
// 发起请求，并传入 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. 全局配置

可以在创建 Axios 实例时进行全局配置，这样所有通过该实例发起的请求都会使用这些配置。

import axios from 'axios';
// 创建一个 Axios 实例，并进行全局配置
const instance = axios.create({
    baseURL: 'https://api.example.com', // 请求的基础 URL
    timeout: 5000, // 请求超时时间，单位为毫秒
    headers: {
        'Content-Type': 'application/json'
    }
});
// 使用实例发起请求
instance.get('/data')
.then(response => {
    console.log(response.data);
})
.catch(error => {
    console.log('请求出错:', error.message);
});

2. 单个请求配置

在发起单个请求时，也可以传入特定的配置，这些配置会覆盖全局配置。

import axios from 'axios';
// 发起单个请求，并传入特定配置
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 参数，会被拼接在 URL 后面。
data：请求体数据，用于 post、put 等方法。
timeout：请求超时时间，单位为毫秒。
responseType：响应数据的类型，如 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取消请求、配置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！