Vue取消Axios发出的请求

目录
  • 一、前言
  • 二、AbortController
  • 三、CancelToken

一、前言

有的时候我们需要取消axios发出的请求，例如在退出页面时，取消掉仍然在进行的请求。

二、AbortController

mdn中AbortController的介绍。

从 v0.22.0 开始，Axios 支持以 fetch API 方式—— AbortController 取消请求：

const controller = new AbortController();
axios.get('/foo/bar', {
   signal: controller.signal
}).then(function(response) {
   //...
});
// 取消请求
controller.abort()

注意这里在发送请求时，额外携带了一个signal参数：

signal: controller.signal

这是AbortController实例（controller.abort()）去取消请求的标记。

三、CancelToken

您还可以使用 cancel token 取消一个请求。

  • Axios 的 cancel token API 是基于被撤销 cancelable promises proposal。
  • 此 API 从 v0.22.0 开始已被弃用，不应在新项目中使用。

可以使用 CancelToken.source 工厂方法创建一个 cancel token ，如下所示：

const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});
axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})
// 取消请求（message 参数是可选的）
source.cancel('Operation canceled by the user.');

到此这篇关于Vue取消Axios发出的请求的文章就介绍到这了,更多相关Vue Axios内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue3如何使用axios发起网络请求

    Vue3如何使用axios发起网络请求

    目录 Vue3使用axios发起网络请求 1.何为Axios? 2.如何安装Axios 3.如何封装网络请求和全局实例化axios 4. api.js是什么? 5.http.js是什么? 6.request.js是什么? 7.如何在Vue文件中请求封装好的API呢? Vue3.0请求接口的例子 Vue3使用axios发起网络请求 即使是小型项目也会涉及到请求后端API,除非你的网站展示的是一些不需要维护的静态数据,第三篇文章我们来给Vue项目搞上axios. 1.何为Axios? 请看官方对Ax

  • Vue使用axios发送请求并实现简单封装的示例详解

    目录 一.安装axios 二.简单使用 1.配置 2.发送请求 三.封装使用 1.创建js封装类 2.配置 3.发送请求 一.安装axios npm install axios --save 二.简单使用 1.配置 main.js中加入如下内容 // 引入axios --------------------------------------------------- import axios from 'axios' Vue.prototype.$axios = axios Vue.proto

  • vue axios中的get请求方式

    vue axios中的get请求方式

    目录 vue axios中的get请求 一.安装 二.使用 常见错误 vue axios post请求参数错误400 vue axios中的get请求 一.安装 使用 npm:npm install axios 二.使用 步骤:1.引入 2.发送请求 <template>   <div>     <!-- 2.点击发送请求 -->     <button @click="getdata">get请求-无参数</button    

  • vue结合axios实现restful风格的四种请求方式

    目录 1.npm下载axios到vue项目中 2.main.js里引入 3.定义全局变量路径(不是必须的,但是推荐) (1).方法一 (2).方法二 4.在具体需求的地方使用 (1).get (2).post (3).put (4).delete Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中,基本请求有5种: get:多用来获取数据 post:多用来新增数据 put:多用来修改数据(需要传递所有字段,相当于全部更新) patch:多用来修改数据,

  • vue中数据请求axios的封装和使用

    目录 一.什么是axios 二.下载方式 三.拦截器 四.请求的封装 五.使用 一.什么是axios 简单的来说,​Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中,我们在项目中会经常用axios请求接口来获取数据. 二.下载方式 直接在当前使用的项目中打开终端: npm install axios --save 或者yarn  add  axios 三.拦截器 拦截器就是在数据请求的过程中,拦截请求或者拦截响应的技术 请求拦截器:就是在发送请求的时

  • vue项目及axios请求获取数据方式

    目录 一.首先导入用到的组件和axios 二.在data中将要用到的数据给一个初始值,为空 三.在methods中写方法,发送axios获取数据 四.传递数据 五.封装 axios axios拦截器 一般vue项目中 一个页面是由多个组件组成的,各个组建的数据都是统一在主界面的组件中发送axios请求获取,这样极大地提高了性能. 一.首先导入用到的组件和axios import HomeHeader from './components/Header' import HomeSwiper fro

  • Vue axios库发送请求的示例介绍

    Vue axios库发送请求的示例介绍

    目录 1.什么是axios 2.axios请求图例 3.使用 async 和 await 配合 axios 发起请求 4.使用解构赋值 5.使用 axios.get() axios.post() 来简化请求过程 1.什么是axios Axios,是一个基于 promise 的网络请求库,作用于node.js和浏览器中,它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中). 使用方式如下: <script> //调用axios方法得到的返回值是 promise 对象

  • Vue使用axios添加请求头方式

    目录 使用axios添加请求头 axios添加自定义头部出现的问题 使用axios添加请求头 import axios from 'axios' const service = axios.create({ baseURL: process.env.VUE_APP_API, // 请求的接口 timeout: 100000 // 请求超时时间 }) // 使用拦截器,定义全局请求头 service.interceptors.request.use(config => { // 在请求头中添加to

  • Vue取消Axios发出的请求

    Vue取消Axios发出的请求

    目录 一.前言 二.AbortController 三.CancelToken 一.前言 有的时候我们需要取消axios发出的请求,例如在退出页面时,取消掉仍然在进行的请求. 二.AbortController mdn中AbortController的介绍. 从 v0.22.0 开始,Axios 支持以 fetch API 方式—— AbortController 取消请求: const controller = new AbortController(); axios.get('/foo/ba

  • Vue如何处理Axios多次请求数据显示问题

    目录 Vue处理Axios多次请求数据显示 服务端代码 客户端代码 vue axios多次请求一个接口取消前面请求 方法一 方法二 总结 Vue处理Axios多次请求数据显示 场景: 一个搜索框,要求用户输入内容改变之后立即进行搜索 遇到的问题: 用户频繁的进行搜索词修改,会触发很多次搜索请求,如果请求有延时,就会出现显示不正确的现象 比如下面这个例子: 请求1发出后,存在延时大,响应1后返回: 请求2发出后,延时小,响应2先返回: 最后显示的内容是响应1: 而我期待的显示内容,是最后一次的请求

  • vue使用Axios做ajax请求详解

    vue2.0之后,就不再对vue-resource更新,而是推荐使用axios 1. 安装 axios $ npm install axios 或 $ bower install axios 2. 在要使用的文件中引入axios import axios from 'axios' 3. 使用axios做请求 可以通过向 axios 传递相关配置来创建请求, 只有 url 是必需的.如果没有指定 method,请求将默认使用 get 方法. { // `url` 是用于请求的服务器 URL url

  • vue使用axios跨域请求数据问题详解

    axios默认是没有jsonp 跨域请求的方法的.一般来说流行的做法是将跨域放在后台来解决,也就是后台开发人员添加跨域头信息. 例如java中的 header,response.setHeader("Access-Control-Allow-Origin", www.allow-domain.com) 但是很多时候,后台出于一些原因不想修改或者已经写好jsonp的接口需要适应不同平台,此时,前端就可以单独引入依赖解决该问题了. 引入依赖 cnpm install jsonp 导入到vu

  • Vue使用axios出现options请求方法

    Vue使用axios出现options请求方法

    以下代码如果需要在你本地跑起来: Ⅰ.需要apache服务,并把php代码丢进去指定位置 Ⅱ.将下面http://www.test.com/day05/jiekou.php地址,改成自己指定位置的域名或ip 1.从一段简易代码说起 前端代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpor

  • 详解Vue用axios发送post请求自动set cookie

    详解Vue用axios发送post请求自动set cookie

    vue-resource不再维护之后,我也用起了axios,但是死活无法设置服务器发送过来的cookie 后来查询文档发现,这个是要单独配置的. // `withCredentials` indicates whether or not cross-site Access-Control requests // should be made using credentials withCredentials: false, // default 当我们把此配置项设置成默认配置项并且设置成true

  • Vue 2.5.2下axios + express 本地请求404的解决方法

    最近在学习Vue,今天尝试了使用axios模拟本地网络请求.使用的过程中发现接口请求一直404,后来发现在当期的Vue-cli构建的最新的项目中,接口请求应该这样写. 1.引入相关依赖 var axios = require('axios') const express = require('express'); var app = express(); var apiRoutes = express.Router(); app.use('/api', apiRoutes); 2.处理网络请求

  • 完美解决axios跨域请求出错的问题

    完美解决axios跨域请求出错的问题

    错误信息: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access. The response had HTTP status code 403

  • axios发送post请求springMVC接收不到参数的解决方法

    axios发送post请求时,出现了参数后台接收不到的情况,分析了下请求,发现是请求头content-type不对,是application/json,正常应该是application/x-www-form-urlencoded. 解决方法有以下三种: 1.设置axios的默认请求头 //设置全局的 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; var instance = a

  • vue中axios解决跨域问题和拦截器的使用方法

    vue中axios不支持vue.use()方式声明使用. 所以有两种方法可以解决这点: 第一种: 在main.js中引入axios,然后将其设置为vue原型链上的属性,这样在组件中就可以直接 this.axios使用了 import axios from 'axios'; Vue.prototype.axios=axios; components: this.axios({ url:"a.xxx", method:'post', data:{ id:3, name:'jack' } }

随机推荐