1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > axios请求失败重新发起请求_axios请求失败自动重发

axios请求失败重新发起请求_axios请求失败自动重发

时间:2022-09-24 02:21:02

相关推荐

axios请求失败重新发起请求_axios请求失败自动重发

在做Vue、React项目的时候常会用axios请求库来与后端进行数据交互。我们通常采用一个用户凭证token来验证用户身份,服务器根据token进行判断当前用户是否有权限调用接口。

经常遇到的一个问题是,调用接口时token可能已经过期,此时调用接口会失败,需要重新登录后再调用接口。通常我们可能处理为,用户走完登录流程后再重新手动触发一次请求。这样的实现本身没什么问题,但是给用户的操作体验上有被中断的感觉,今天尝试解决了一下这个问题。

一、业务痛点

我的业务场景是,当一个接口(比如”用户发表评论“)返回token过期或者未验证的状态码时,调出登录弹窗,登录成功后再次发送评论请求。当然我们可以在评论接口处对状态码进行判断,token失效则重新发送请求;如果有其它接口也类似处理。这个方法最大的问题在于对于每个接口都要单独处理,然而程序员最大的优点就是——懒。这个方法虽然可行,对于一个懒人来说并不怎么好用,那更好的办法的是什么呢?

二、业务实现——以登录过期,重新发送请求为例(Vue实现)

axios请求拦截器本身可以获取请求的地址、参数、超时时间等配置,请求的重发变得很简单;同时axios库的请求返回为一个promise对象,得益于Promise强大的嵌套异步处理,可以使得请求接口调用对请求重发“无感”——即调用接口的时候你可以默认它一定成功,因为失败的情况在拦截器已经重发了。

1. 使用拦截器进行请求重发

function getToken () {

return localStorage.getItem( oken)

}

function clearToken () {

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。