axios在VUE中的运用

最新推荐文章于 2024-06-29 00:40:34 发布

欲行昭昭天命

最新推荐文章于 2024-06-29 00:40:34 发布

阅读量280

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/lalunr/article/details/126921334

版权

本文介绍了如何在Vue项目中使用axios防止重复请求并实现请求失败后的自动重试。通过设置请求拦截器和响应拦截器，结合自定义函数`judge_repetition`和`anewRequest`来判断并取消重复请求。同时，文章讲解了如何在请求拦截器中处理错误状态码，以在一定间隔和次数内自动重试失败的请求。

摘要由CSDN通过智能技术生成

阻止axios重复请求与axios请求失败后重新发起请求

axios是vue框架中主流的后台交互技术

阻止axios重复请求

axios的制作者为开发者们提供了请求拦截器与响应拦截器，我们可以在此进行操作

在操作拦截器先我们先封装一个用以判断数据请求的函数

judge_repetition 判断当前请求在短时间内是否重复，如若重复则利用cancel取消之

//用来存放短时间内请求过的接口地址
let urlList = [];

//判断当前请求接口在短时间内是否请求过
 function judge_repetition(urlList , url, cancel, error) {
  let errorMsg = error || "";
  for (let i = 0; i < urlList .length; i++) {
    if (urlList [i] === url) {
      cancel(errorMsg);
      return;
    }
  }
  urlList .push(url);
};

然后再封装一个判断当前请求是否可以继续的函数

anewRequest 通过在遍历urlList判断当前请求是否可以继续

function anewRequest (urlList, url) {
  for (let i = 0; i < urlList.length; i++) {
    if (urlList[i] === url) {
      urlList.splice(i, 1);
      break;
    }
  }
};

在请求拦截器中对请求进行处理