promise.all()怎么使用

這篇文章主要介紹“promise.all()怎么使用”，在日常操作中，相信很多人在promise.all()怎么使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”promise.all()怎么使用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

關于promise.all()的使用

Promise.all可以將多個Promise實例包裝成一個新的Promise實例。

同時，成功和失敗的返回值是不同的，成功的時候返回的是一個結果數組，而失敗的時候則返回最先被reject失敗狀態的值。

關鍵代碼：將所有異步操作存儲到數組pros中，Promise.all(pros)執行所有異步操作

let pros = []
data.forEach(element => {
    pros.push( this.getJsonFile(element.json,element.fileName) )
});
Promise.all(pros).then(val => {
    this.fontsList = [...val]
})

示例：

// 獲取字體所有json文件展示
getIconFonts(isFresh) {
    req.post(window.context.uc+`/system/file/v1/queryIconFiles`).then(rep => {
        if(rep && rep.data) {
            // 將所有異步操作存儲到數組pros中
            let pros = []
            data.forEach(element => {
                pros.push( this.getJsonFile(element.json,element.fileName) )
            });
            // 執行所有異步操作后處理數據
            Promise.all(pros).then(val => {
                this.fontsList = [...val]
                this.uploadFonts = [...this.fontsList]
            })
        }
    });
},
// 通過id獲取json文件
getJsonFile(fileId, fileName) {
    return new Promise((resolve, reject) => {
        req.get(window.context.uc +'/system/file/v1/preview?fileId=' + fileId).then(rep => {
            if(rep && rep.data) {
                let data = {
                    fileName,
                    ...rep.data
                }
                // 返回處理后的數據
                resolve(data)
            }
        })
    })
}

Promise.all實現限制并發請求函數

Promise.all 的簡單解釋

// 當以下數組中promise1, promise2, promise3都resolve之后，觸發promise.all的then函數。
Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});

需求解釋

所謂并發請求，即有待請求接口100個，限制每次只能發出10個。即同一時刻最多有10個正在發送的請求。

每當10個之中有一個請求完成，則從待請求的接口中再取出一個發出。保證當前并發度仍舊為10。

直至最終請求完成。

設計思路

簡單思路如下：（假設并發請求函數名字為limitedRequest）

• 設定一個數組（命名為：pool），用于后續Promise.all的使用

• 當limitedRequest被調用的時候，首先一次性發出10個請求，并放入到pool中

• 每一個請求完成后的回調函數中繼續觸發下一個請求，而下一個請求返回Promise，他的回調函數繼續綁定同樣的回調函數，即循環調用。（看不懂就直接看代碼更易懂）

• 直到全部請求完成，停止。

代碼實現

具體代碼如下

// 模仿一個fetch的異步函數，返回promise
function mockFetch(param) {
  return new Promise((resovle) => {
    setTimeout(() => {
      resovle(param);
    }, 2000);
  });
}

function limitedRequest(urls, maxNum) {
  const pool = [];
  // 處理maxNum比urls.length 還要大的情況。
  const initSize = Math.min(urls.length, maxNum);
  for (let i = 0; i < initSize; i++) {
      // 一次性放入初始的個數
    pool.push(run(urls.splice(0, 1)));
  }
  // r 代表promise完成的resolve回調函數
  // r 函數無論什么樣的結果都返回promise，來確保最終promise.all可以正確執行
  function r() {
    console.log('當前并發度：', pool.length);
    if (urls.length === 0) {
      console.log('并發請求已經全部發起');
      return Promise.resolve();
    }
    return run(urls.splice(0, 1));
  }
  // 調用一次請求
  function run(url) {
    return mockFetch(url).then(r);
  }
  // 全部請求完成的回調
  Promise.all(pool).then(() => {
    console.log('請求已經全部結束');
  });
}
// 函數調用
limitedRequest([1, 2, 3, 4, 5, 6, 7, 8], 3);

# 最終返回結果
$ node .\src\views\doc\detail\index.js
當前并發度： 3
當前并發度： 3
當前并發度： 3
當前并發度： 3
當前并發度： 3
當前并發度： 3
并發請求已經全部發起
當前并發度： 3
并發請求已經全部發起
當前并發度： 3
并發請求已經全部發起
請求已經全部結束

到此，關于“promise.all()怎么使用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！