ajax请求失败后重连和promiseIfy

最新推荐文章于 2023-07-31 15:49:37 发布

一枚前端猿

最新推荐文章于 2023-07-31 15:49:37 发布

阅读量586

点赞数 2

本文链接：https://blog.csdn.net/qq_42535651/article/details/108916204

版权

这篇博客探讨了在前端开发中，如何处理Ajax请求失败的情况，通过设置重试机制确保请求能够成功。示例代码展示了一个使用jQuery实现的Ajax函数，当请求失败时，会在一定间隔后重新尝试，最多重试5次。同时，文章还介绍了如何使用Promise将传统的Ajax回调函数转换为更现代的Promise写法，使得错误处理更加优雅。

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

记得在找实习时，被问到一个问题。前端发送请求失败后如何重新发送请求。

以 ajax 为例：

	let num = 0;
    function ajaxReconnection() {
      $.ajax({
        url: "http://localhost:3000",
        method: "GET",
        success: (result) => {
          console.log("这里输出result：", result);
        },
        error: (error) => {
          console.error("这里请求失败了：", error);
          if (num < 5) {
            setTimeout(() => {
              console.log("失败后尝试重连:", num++);
              test();
            }, 1000);
          } else {
            console.log("重连次数超过5次，停止重连");
          }
        },
      });
    }

这里顺带一个 promiseIfy 把类似 ajax 中带 success 和 error 函数的写法改变为 promise 写法。

function promiseIfy (fn){
	return function (obj){
		return new Promise((resolve,reject)=>{
			obj.success = function (value){
				resolve(value)
			};
			obj.error = function (error){
				reject(error)
			}
			fn(obj)
		})
	}
}
promisedAjax = promiseIfy($.ajax)
promisedAjax(obj).then((value)=>{
	console.log(value)
},(error)=>{
	console.error(error)
})