js之ajax重连机制

462 阅读1分钟

ajax 访问失败重连机制

需求:能实现ajax请求,自动在失败的时候重新连接,有重试次数,次数到达彻底失败,为了防止接口过频访问,添加延迟时间

1、模拟ajax请求(Math.random()>0.5请求成功,否则请求失败)

  function request() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
               let res =Math.random();
               if(res>0.5){
                  resolve(res)
               } else{
                  reject(res)
               }
            },1000);
        })
    }

2、封装重连机制方法

    function retry(func,times=0,delay=0) {
        return new Promise((resolve, reject) => {
            //func是一件事,将它封装起来,才能后续 times--时调用
            let inner = async function inner(){
                try {
                    const result = await func()
                    resolve(result);
                } catch (error) {
                    if(times--<=0){
                        reject(error)//访问次数为0彻底失败
                    }else{
                        console.log("重试,剩余",times)
                        //延迟执行
                        setTimeout(() => {
                            inner();//再次尝试
                        }, delay);
                    }

                }

            }
            inner()//第一次访问先执行方法
        })
    }

3.调用运行函数,重试次数3次,延时2000


    retry(request,3,2000)
    .then(res=>{
        console.log('成功',res)
    })
    .catch(e=>{
        console.log('失败',e)
    })