用promise.all解決ajax異步循環(huán)請求問題

Promise.all() 并不能解決循環(huán)的問題，一般情況下 .all() 的參數(shù)是 Promise 數(shù)組（暫時不考慮其它類似）。那么，數(shù)組中的每個 Promise 都代表著一個異步操作，Promise.all() 的作用是等待這些異步操作全部執(zhí)行完成，所以實質(zhì)上并不是 Promise.all() 是并發(fā)的，而是 Promise.all() 等待著一堆并發(fā)執(zhí)行完成。

因此，Promise.all() 并不能解決有序循環(huán)。作為特例，如果 Promise.all() 等待的全都是同步代碼，比如題主示例中雖然用了 .map()，映射結(jié)果卻并不是 Promise 對象，而是同步執(zhí)行（直接返回的 id），這種情況下，實際是依次執(zhí)行的完了再把結(jié)果放入 .all() 的，所以是同步順序循環(huán)處理的（就是 map 干的事情）。題主的第一段代碼，如果變量名不是 promises，你覺得它跟異步或者 Promise 有任何關(guān)系嗎？

然后當(dāng)然要指出 ajax 調(diào)用時候的一個失誤：{} 中的內(nèi)容應(yīng)該是 ajax 的參數(shù)，所以應(yīng)該放在括號中 ({...}) 才對。

由于 promises 變量保存的只是一個同步運(yùn)行的結(jié)果集，所以 Promise.all(promises) 其實就是對 then() 的回調(diào)直接傳遞的這個結(jié)果集，所以 val 的值實際就是 [1, 2]。因此下面這個寫法是沒有問題的

$.ajax({
    data: val
});

問題在于下面這里

Promise.all(promises)
    .then(function(val) {
        // 問題在把 ajax 放入 then 回調(diào)中之后
        $.ajax({
            data: val
        });
    })
    .catch(function(err) {
        // ....
    });

這里如果 ajax 發(fā)生錯誤，它不會拋異常，而是等待它自己的 .fail() 處理，因為沒有定義，所以就被丟棄了。它并不會傳遞到后面的 .catch() 中，要解決這個問題，可以是得用 ajax 自己的 .fail() 來處理錯誤

Promise.all(promises)
    .then(function(val) {
        // 問題在把 ajax 放入 then 回調(diào)中之后
        $.ajax({ data: val })
            .fail(function(err) {
                // 這里處理錯誤邏輯
            });
    });

也可以是，直接將 ajax 的結(jié)果（thenable）傳遞下去，由 Promise 機(jī)制的 .catch() 來處理

Promise.all(promises)
    .then(function(val) {
        // 問題在把 ajax 放入 then 回調(diào)中之后
        return $.ajax({ data: val });
    })
    .catch(function(err) {
        // 處理錯誤邏輯
    });

promiseAll是并發(fā)的，建議使用async https://segmentfault.com/n/13...

你可以看下 這里的 解釋
http://es6.ruanyifeng.com/#do...

-----補(bǔ)充

var promises = [1,2,3].map(function (id) {
  return setTimeout(()=>{console.log(id)},1000);
});

Promise.all(promises).then(function (posts) {
  console.log('all r')
}).catch(function(reason){
  
});
// 輸出 'all r', 1, 2, 3 

ajax 的循環(huán)依賴調(diào)用可以這么寫，接住異步函數(shù)

function ajax1 () {
  return new Promise(function (resolve, reject){
    console.log("執(zhí)行:ajax1,執(zhí)行2s")
    setTimeout(()=>{resolve('ajax1');},2000);
  });
}
function ajax2 () {
  return new Promise(function (resolve, reject){
    console.log("執(zhí)行:ajax2,執(zhí)行1s")
    setTimeout(()=>{resolve('ajax2');},1000);
  });
}
function ajax3 () {
  return new Promise(function (resolve, reject){
    console.log("執(zhí)行:ajax3,執(zhí)行3s")
    setTimeout(()=>{resolve('ajax3');},3000);
  });
}

function run (req) {
   var it = generator(req); ;
    function* generator(arr=[]) {
      try {
          for(let i of arr){
            yield i();
        }

      } catch (e) {
        console.log(e);
      }
    };

  function go(result) {
    if (result.done){
      console.log('結(jié)束')
      return result.value;
    }
        
    return result.value.then(function (value) {
      return go(it.next());
    }, function (error) {
      return go(it.throw(error));
    });
  }

  go(it.next());
}

run([ajax1,ajax2,ajax3]);