后台接口无法更改的情况下，怎么在for循环中调用ajax，且保证顺序

用最简单直白的方式告诉你偷懒, 每天分享一个用得着的小技巧

我们的接口存在依赖调用的情况下,A接口的返回值，是B接口的入参，而A接口返回值又是一个数组，B接口入参只能是一个字符串的情况下，怎么办？

• 让后台改接口，B接口的入参改为接受一个数组，在后台查询到数据以后，一次性返回，这个没有什么问题，正常的调用，这个就没啥可讲的
• 前端for循环调用B接口，虽然不是很好，如果后台接口没人更改的情况下，只能这么干

接下来直接上代码

function getUser() {
    $.ajax({
        type: 'post',
        url: 'http://localhost/a',
        success: function(res) {
            // A接口的返回值是B接口的入参
            // list 是一个数组 [{id: 1},{id: 2}]
            var list = res.data.list
            
            getAllData(list)
        }
    })
}

// 调用B接口
function getAllData(list) {
    var resList = [] 
    // 如果使用 let 就不需要使用闭包    
    for(var i=0; i<list.length; i++) {
        // 闭包
        (function(i){
            $.ajax({
                type: 'post',
                url: 'http://localhost/b',
                data: {
                    id: list[i].id
                }
                // 这里同步调用接口
                async: false,
                success: function(res) {
                    // 将b接口返回的数据push到外面容器中
                    resList.push(res.data)
                }
            })
        ))(i)
    }
    
    // 上面是同步代码，js非要等所有的逻辑处理完成，才会处理这后面的逻辑
    console.log(1)
    // 在这里对 resList数据做处理
}

以上就是解决循环调用ajax会遇到的问题， js是单线程，如果使用同步去调用接口，而这个接口会非常慢的情况下，页面会出现假死的现象， 其实就是因为接口没返回，后面的代码根本不会执行，要一直等接口返回内容会处理后续的逻辑

上面只是用 jquery调用接口，使用 axios或者写原生js调用，都是没什么差异的，都是要同步调用

js所有的同步任务，都会从上到下，推送到 “执行栈” 中，等所有的同步代码执行完，才会去执行 “任务队列” 中的内容

这就是 事件循环

!!! 极力不推荐同步调用接口 ☺☺☺