how can i abort / cancel Axios request before complete when i change route use vue-router.

当用户打开页面时,自动发送AXIOS请求获取一些数据, 但是用户没有等待得到响应,那么他正在通过VUE路由改变路由 会有很多Axios的请求

那么我的问题有什么解决办法吗?

推荐答案

基本上,您必须生成一个全局取消令牌

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

并通过在config参数中传递来在所有请求中使用它

GET请求:

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }
});

POST request:

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

然后,在VUE路由beforeEach导航警卫中,您可以使用以下命令取消所有请求:

source.cancel('Operation canceled by the user.');

这是官方的AXIOS取消指南:https://github.com/axios/axios#cancellation

Laravel相关问答推荐

Livewire 3分页在点击后不更新页面

使用Laravel判断其他数据库中是否存在记录

Laravel:通过数据透视表数据限制多对多Eager 加载

工厂多对多数据透视表属性

Laravel | 使用select查询

Laravel 附加额外字段

Lumen和 MongoDB?

从 sqlite DB 登录 Laravel,得到PDOException 找不到驱动程序

将 Laravel Socialite 与 API 一起使用?

在 Laravel Eloquent 中,limit 与 take 有什么区别?

如何在 php Laravel 中对关联数组进行排序

如何将对象(模型类型对象)插入到 Laravel 中特定索引号的集合对象中?

扩展 Eloquent 的类的构造函数

调整行数以形成:: Textarea Laravel 5

Laravel / Eloquent内存泄漏重复检索相同的记录

Laravel 迁移 - 删除列

在 Laravel 中按用户名查找用户

Laravel 5 事件处理程序未触发

向 Laravel 重定向添加一个锚点

如何在laravel中 for each 用户生成唯一的随机值并将其添加到数据库中