关于循环里面的 ajax 请求异步问题

解决循环中ajax异步请求的问题

最新推荐文章于 2023-04-15 19:27:14 发布

原创最新推荐文章于 2023-04-15 19:27:14 发布 · 361 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#异步 #javascript #前端 #循环

前端开发专栏收录该内容

1 篇文章

订阅专栏

这篇博客探讨了在前端开发中遇到的循环内异步ajax请求导致的界面渲染问题。作者通过分析问题，提供了两种解决方案：1) 使用async/await，虽然在低版本浏览器的兼容性不佳；2) 采用递归方法，虽然代码可能较为复杂。文章旨在分享解决此类问题的思路和实践经验。

大晚上在工作中遇到过一次界面渲染不上的问题，排查了下是循环的时候请求接口异步，大晚上的没什么灵感，一时之间有点懵，第二天仔细想了想，贴一些解决的方法和相关思路出来。

问题

代码

//init
	function init() {
        for (let i in list) {
          console.log(`------------${i}------------`);
          $.ajax({
            url: url + list[i].id,
            method: "get",
            dataType: "jsonp",
            success: function(res) {
              console.log(res);
            },
            error: function(err) {
              console.log(err);
            }
          });
        }
      }

代码的结果
在这里插入图片描述
我想要的结果

方法

1.async/await

 	async function init() {
        for (let i in list) {
          console.log(`------------${i}------------`);
          await $.ajax({
            url: url + list[i].id,
            method: "get",
            dataType: "jsonp",
            success: function(res) {
              console.log(res);
            },
            error: function(err) {
              console.log(err);
            }
          });
        }
      }

简洁直观，明了易懂，就是async在低版本浏览器的兼容性不太友好

2.递归

	let i = 0;
      function init() {
        let recursion = i => {
          console.log(`------------${i}------------`);
          $.ajax({
            url: url + list[i].id,
            method: "get",
            dataType: "jsonp",
            success: function(res) {
              console.log(res);
              if (i < list.length-1) {
                recursion(++i);
              }
            },
            error: function(err) {
              console.log(err);
            }
          });
        };
        i < list.length && recursion(i);
      }