axios如何取消请求、配置

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

取消请求

  1. 使用 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 :请求的方法,如 getpostputdelete 等,默认为 get
  • baseURL :请求的基础 URL,会与 url 拼接成完整的请求地址。
  • headers:请求头信息,是一个对象。
  • params:URL 参数,会被拼接在 URL 后面。
  • data :请求体数据,用于 postput 等方法。
  • timeout:请求超时时间,单位为毫秒。
  • responseType :响应数据的类型,如 jsontextblob 等,默认为 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);
  });
相关推荐
世伟爱吗喽几秒前
threejs入门学习日记
前端·javascript·three.js
朝阳58114 分钟前
用 Rust + Actix-Web 打造“Hello, WebSocket!”——从握手到回声,只需 50 行代码
前端·websocket·rust
F2E_Zhangmo14 分钟前
基于cornerstone3D的dicom影像浏览器 第五章 在Displayer四个角落显示信息
开发语言·前端·javascript
slim~33 分钟前
javaweb基础第一天总结(HTML-CSS)
前端·css·html
一支鱼38 分钟前
leetcode常用解题方案总结
前端·算法·leetcode
惜.己1 小时前
针对nvm不能导致npm和node生效的解决办法
前端·npm·node.js
F2E_Zhangmo1 小时前
基于cornerstone3D的dicom影像浏览器 第二章 加载本地文件夹中的dicom文件并归档
前端·javascript·css
用户21411832636022 小时前
Nano Banana免费方案来了!Docker 一键部署 + 魔搭即开即用,小白也能玩转 AI 图像编辑
前端
Zacks_xdc2 小时前
【前端】使用Vercel部署前端项目,api转发到后端服务器
运维·服务器·前端·安全·react.js
给月亮点灯|2 小时前
Vue基础知识-脚手架开发-使用Axios发送异步请求+代理服务器解决前后端分离项目的跨域问题
前端·javascript·vue.js