谈谈Axios如何取消请求

原创 守候你的季节 随笔 JavaScript 565阅读 2017-12-08 13:50:30 举报

Axios: 目前使用较多,支持全局配置,请求,响应的拦截器,取消请求等操作.

场景: 当我们在网站上使用上传功能上传一个图片或者视频时,突然遇到网路不好或者服务器挂了,那么此时用于展示上传的 loading 就会卡死在这,毕竟服务器挂了以后,是得不到响应的.

解决方法1: 使用axios全局配置一个超时时间,具体见官方文档.
解决方法2: 添加一个取消当前请求的按钮或者一个关闭图标

具体如下(基于vue)
Parent组件中使用两个组件,一个是Loading组件,一个是Child组件
Child组件: 发送请求获取数据(上传文件同样),将发送请求的动作的令牌,通知父组件 Parent, 父组件Parent将令牌传递给Loading组件.这就保证了Child组件与Loading组件使用的是同一个令牌,也就是所操作的是同一个请求.
令牌包含一个代表当前请求的token属性,还有一个用来取消当前请求的cancel方法.

代码实现如下:
js文件主入口需要配置axios,如IE中不支持Promise,请使用babel-polyfill,可自行百度
javascript 代码

Parent组件
javascript 代码

Child组件
javascript 代码

Loading组件
javascript 代码

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复