亚洲精品亚洲人成在线观看麻豆,在线欧美视频一区,亚洲国产精品一区二区动图,色综合久久丁香婷婷

              當(dāng)前位置:首頁 > IT技術(shù) > Web編程 > 正文

              js 手動實現(xiàn) promise.all的功能
              2021-10-12 14:20:40

              在中高級面試中,實現(xiàn)一個promise.all是一個頻率較高的面試題
              首先分析下 promise.all(),(參考MDN)
              1. 接收一個promise的iterable類型(注:Array,Map,Set都屬于ES6的iterable類型)的參數(shù)
              2. 返回一個promsie實例
              3. 參數(shù)里所有的promise都成功回調(diào)后 resolve返回一個數(shù)組結(jié)果,數(shù)組順序和參數(shù)順序一致
              4. 參數(shù)里有一個失敗的就會reject,并且reject第一個失敗的信息
              // 下面實現(xiàn)一下
                Promise.prototype.all = function (iterators) {
                  const promises = Array.from(iterators); // 強制轉(zhuǎn)換成數(shù)組
                  const len = promises.length; // 記錄數(shù)組的長度
                  let count = 0; // 標(biāo)記成功的個數(shù)
                  let resultList = [];// 要返回的 數(shù)組結(jié)果
                  return new Promise((resolve, reject) => {  // 返回一個promise 
                    for (let index in promises) { // for 循環(huán)配合 let 確保 數(shù)組結(jié)果和參數(shù)順序一致
                      Promise.resolve(promises[index])         // Promise.resolve,如果是參數(shù)是promise 直接返回,如果不是則直接執(zhí)行Promise.resolve方法 到 then 接受 
                        .then((result) => {
                          count++;          // 記錄個數(shù),等于len時 resolve
                          resultList[index] = result; // 對應(yīng)賦值結(jié)果
                          if (count === len) {
                            resolve(resultList);
                          }
                        })
                        .catch(e => { 
                          reject(e); // 當(dāng)收到錯誤時,直接reject,返回錯誤信息
                        })
                    }
                  })
                }
              
              
               let p1 = new Promise((resolve, reject) => {
                  setTimeout(() => {
                    resolve('1')
                  }, 5000);
                })
                let p2 = new Promise((resolve, reject) => {
                  setTimeout(() => {
                    resolve('2')
                  }, 2000);
                })
                let p3 = new Promise((resolve, reject) => {
                  setTimeout(() => {
                    resolve('3')
                  }, 3000);
                })
                let p4 = new Promise((resolve, reject) => {
                  setTimeout(() => {
                    resolve('4')
                  }, 4000);
                })
                Promise.all([p1, p2, p3, p4]).then(res => {
                  console.log(res,'res') 
                }).catch(err => {
                  console.log(err)
                })
              // ?['1', '2', '3', '4'] 'res' 
              
              理解其中的邏輯,其實并不復(fù)雜

              本文摘自 :https://www.cnblogs.com/

              開通會員,享受整站包年服務(wù)立即開通 >