用Promise实现ajax的自动重试

有时候遇到网络错误,希望可以多试几次,可以利用Promise递归调用实现

以若依系统的登出举例

javascript 复制代码
export function logout() {
  return request({
    url: '/logout',
    method: 'post'
  })
}

修改下原本的登出逻辑,遇到ERR_NETWORK错误,也就是网络问题,每隔1秒重试一次

javascript 复制代码
    LogOut({ commit, state }) {
      const MAX_RETRIES = 3;
      let retries = 0;
    
      const attemptLogout = () => {
        return new Promise((resolve, reject) => {
          logout().then(() => {
            commit('SET_TOKEN', '');
            commit('SET_ROLES', []);
            commit('SET_PERMISSIONS', []);
            removeToken();
            resolve();
          }).catch(error => {
            if (error.code === 'ERR_NETWORK' && retries < MAX_RETRIES) {
              retries++;
              console.error(`网络错误,正在重试(第 ${retries}/${MAX_RETRIES} 次尝试)...`, error);
              setTimeout(() => {
                attemptLogout().then(resolve).catch(reject);
              }, 1000); // 等待 1 秒后重试
            } else {
              console.error('退出登录时发生错误:', error);
              reject(error);
            }
          });
        });
      };
相关推荐
坐望云起1 分钟前
ASP.NET Web API + VUE3 整合阿里云OSS,后端API生成预签名上传Url,前端VUE进行上传
前端·vue.js·阿里云·oss·签名错误
HappyAcmen38 分钟前
关于ES6/7的前端面试题及其解析
前端·ecmascript·es6
编程乐趣43 分钟前
一个纯.Net开发的JavaScript执行引擎
开发语言·javascript·.net
哀木44 分钟前
出来看!让前端大幅提效的 Recorder 🐶
前端
三天不学习1 小时前
Vue-Office:优雅实现Office文件预览的Vue组件
前端·javascript·vue.js·vue-office
木木黄木木1 小时前
html5炫酷3D数字时钟项目开发实践
前端·3d·html5
Apifox1 小时前
一分钟,让你的 API 文档支持 MCP 使用,Apifox 新功能上线!!!
前端·后端·mcp
私人珍藏库1 小时前
[Windows] Edge浏览器_134.0.3124.83绿色便携增强版-集成官方Deepseek侧边栏
前端·edge
IT19951 小时前
uniapp笔记-swiper组件实现轮播图
前端·javascript·笔记·uni-app
weixin_443566981 小时前
async/defer/preload性能优化
前端·css·html