後臺接口沒法更改的狀況下，怎麼在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全部的同步任務，都會從上到下，推送到 「執行棧」 中，等全部的同步代碼執行完，纔會去執行 「任務隊列」 中的內容

這就是 事件循環

!!! 極力不推薦同步調用接口 ☺☺☺