简单易懂:Axios 如何取消请求的两种方法

这篇具有很好参考价值的文章主要介绍了简单易懂:Axios 如何取消请求的两种方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在前端开发中,网络请求是非常常见的操作。而有时候,我们可能需要在发送请求后取消它,比如用户在请求还未完成时离开了当前页面或者执行了其他操作,本文将介绍如何在使用 Axios 发送请求时取消这些请求。

axios取消请求,javascript,前端,开发语言,学习方法

基本概念

在 Axios 中,取消请求的基本思路是创建一个用于取消的标记(cancel token),并将其与特定请求关联。当需要取消请求时,我们可以使用这个标记通知 Axios 取消发送该请求。

取消请求的写法

1. 使用 Cancel Token

Axios 提供了 CancelToken 类来创建取消标记。取消标记实际上是一个包含 cancel 方法的对象。以下是取消请求的一般步骤:

// 在首先需要引入相关库和模块
import axios from 'axios';

// 创建取消标记
const source = axios.CancelToken.source();

// 发送请求并关联取消标记
axios.get('/api/data', {
  cancelToken: source.token
}).then(response => {
  // 请求成功处理
}).catch(error => {
  if (axios.isCancel(error)) {
    console.log('请求被取消', error.message);
  } else {
    console.log('请求出错', error.message);
  }
});

// 取消请求
source.cancel('请求取消的原因');

2. 使用请求配置

除了使用 CancelToken,你也可以在请求配置中直接提供 cancelToken 属性来关联取消标记:

const source = axios.CancelToken.source();

axios.get('/api/data', {
  cancelToken: source.token
}).then(response => {
  // 请求成功处理
}).catch(error => {
  // 错误处理
});

// 在需要的时候取消请求
source.cancel('请求取消的原因');

实践案例

假设我们要在 React 中发送一个数据请求,用户在请求发出后点击了“取消”按钮。首先,我们需要创建一个可取消的 Axios 实例,并将其用于发送请求。

import React, { useState } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState('');
  const [request, setRequest] = useState(null);

  const fetchData = async () => {
    const source = axios.CancelToken.source();
    setRequest(source);

    try {
      const response = await axios.get('/api/data', {
        cancelToken: source.token
      });
      setData(response.data);
    } catch (error) {
      if (axios.isCancel(error)) {
        console.log('请求被取消', error.message);
      } else {
        console.log('请求出错', error.message);
      }
    }
  };

  const cancelRequest = () => {
    if (request) {
      request.cancel('手动取消请求');
    }
  };

  return (
    <div>
      <button onClick={fetchData}>发送请求</button>
      <button onClick={cancelRequest}>取消请求</button>
      <div>{data}</div>
    </div>
  );
}

export default App;

提示与注意事项

  • 确保在组件卸载时取消请求,以免造成内存泄漏。
  • 取消标记只能取消尚未完成的请求,无法取消已经完成的请求。
  • 取消标记只能在特定的请求上使用一次,一旦使用过,就需要重新创建。

使用 Apifox 来 Mock 数据

Apifox 是一个比 Postman 更强大的接口测试工具,Apifox = Postman + Swagger + Mock + JMeter,Apifox 支持调试 http(s)、WebSocket、Socket、gRPCDubbo 等协议的接口,并且集成了 IDEA 插件。在后端人员写完服务接口时,测试阶段可以通过 Apifox 来校验接口的正确性,图形化界面极大的方便了项目的上线效率。

更为重要的是,Apifox 能够 Mock 数据,其集成了 Mock.js 库,允许你自定义规则,并且可以编写脚本,强大的 Mock 功能可以让前端开发人员不再苦苦等待后端提供接口,自己就能提前造各种各样的数据出来,可视化操作让你点点鼠标就能生成可观的人性化数据。

axios取消请求,javascript,前端,开发语言,学习方法

总结

通过使用 Axios 提供的取消标记,我们可以在发送请求后随时取消请求,以避免不必要的网络流量和资源浪费。这为我们在前端开发中处理用户操作的中断提供了便利。

知识扩展:

  • Axios 的响应拦截器如何使用?响应拦截器的用法以及实践案例

参考链接:文章来源地址https://www.toymoban.com/news/detail-805140.html

  • Axios 官方文档:Getting Started | Axios Docs
  • React 官方文档:Using the State Hook – React

到了这里,关于简单易懂:Axios 如何取消请求的两种方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • axios如何取消请求,其原理是什么?

    原文合集地址如下,有需要的朋友可以关注 本文地址 axios 可以通过创建一个 CancelToken 来取消一个请求,基本原理是: 创建一个 CancelToken 的实例,它有一个 executor 函数,可以通过调用 executor 参数中的 cancel 函数来取消请求。 在 axios 请求配置中指定 cancelToken 属性,将 CancelToken 实例

    2024年02月12日
    浏览(36)
  • vue2使用axios封装请求数据,教会你封装,简单易懂,轻松学会axios封装请求数据 看一眼就会 手把手教会

    2、完成上面的步骤还不够,还需要再创建一个文件夹api,然后在文件夹里面创建自定义的文件名(我创建的是cartApi.js)文件名根据自己的需求命名 下面就是根据自己的请求接口以及数据参数请求,下面的请求是一些常见的post、get请求以及传参啥的(仅供参考,可以参考下面

    2024年01月24日
    浏览(57)
  • 前端vue2中axios封装请求数据,教会你封装教会你请求数据 简单易懂,轻松学会axios封装请求数据 看一眼就会 手把手教会

    2、完成上面的步骤还不够,还需要再创建一个文件夹api,然后在文件夹里面创建自定义的文件名(我创建的是cartApi.js)文件名根据自己的需求命名 下面就是根据自己的请求接口以及数据参数请求,下面的请求是一些常见的post、get请求以及传参啥的(仅供参考,可以参考下面

    2024年02月03日
    浏览(49)
  • vue项目实现回到顶部的两种超简单方法

    vue 中实现回到顶部的两种方式: (1)锚点方式 通过点击锚点回到指定位置: 样式: 实现效果: (2)scrollTop 通过点击事件将scrollTop重置为0,从而达到返回顶部的效果。 代码资源链接 代码地址

    2024年02月11日
    浏览(41)
  • axios使用axiosSource.cancel取消请求后怎么恢复请求,axios取消请求和恢复请求实现

    在前端做大文件分片上传,或者其它中断请求时,需要暂停或重新请求,比如这里大文件上传时,可能会需要暂停、继续上传,如下GIF演示: 这里不详细说文件上传的处理和切片细节,后续有时间在出一篇,大文件上传,切片上传、断点续传、秒传等😀。 不扯远了,紧接本

    2024年02月12日
    浏览(43)
  • 封装axios的两种方式

    作为前端工程师,经常需要对axios进行封装以满足复用的目的。在不同的前端项目中使用相同的axios封装有利于保持一致性,有利于数据之间的传递和处理。本文提供两种对axios进行封装的思路。 首先导入了 axios, AxiosInstance和AxiosResponse模块 ,用于创建一个http请求的实例和处理

    2024年02月08日
    浏览(43)
  • LLM微调(二)| 微调LLAMA-2和其他开源LLM的两种简单方法

    本文将介绍两种开源工具来微调LLAMA-2。         AutoTrain是一种无代码工具,用于为自然语言处理(NLP)任务、计算机视觉(CV)任务、语音任务甚至表格任务训练最先进的模型。 核心参数含义 : llm : 微调模型的类型 — project_name : 项目名称 — model : 需要微调的基础模型

    2024年02月04日
    浏览(43)
  • axios中取消请求的使用

    1.全局定义一个axios控制器变量 axiosController 2.配置axios 对象signal 3.创建setAxiosController函数 导出变量、函数 每次调用axiosController.abort()方法后就需要重新调用setAxiosController; axios官网 取消请求 mdn官网 AbortController在fetch中的使用

    2024年02月07日
    浏览(47)
  • Axios中使用CancelToken取消请求

    CancelToken 是一个用于取消请求的机制。它允许在请求还未完成时,通过取消请求来终止请求的发送。这在需要在某些情况下中止正在进行的请求时非常有用,比如文件上传时取消上传等。 以下是使用 CancelToken 的一般步骤: 首先,导入 Axios 库和相关的依赖: 创建一个 Cancel

    2024年02月10日
    浏览(48)
  • axios取消请求CancelToken的用法

    axios中取消请求情况分为1:取消该请求之后的相同请求;2:取消该请求之前的相同请求 ##取消该请求之后的相同请求: 在使用 axios 发送请求时,如果在短时间内连续发送同一个请求,可能会出现请求结果混乱或重复响应的问题。为了避免这种情况,我们可以使用 axios 的取消

    2024年02月14日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包