關於ES6中Promise的應用-順序合並Promise,並將返回結果以數組的形式輸出


1.Promise 基礎知識梳理

  創建一個Promise實例

const promise = new Promise(function(resolve, reject) {
    if (success){
    resolve(value);
  } else {
    reject(error);
  }
});

Promise構造函數接受一個函數作為參數,該函數的兩個參數分別是resolve和reject。它們是兩個函數,JavaScript 引擎提供,不用自己部署。

Promise實例生成以后,可以使用then方法分別制定resolved狀態和rejected狀態的回調函數。

promise.then(value => {}, error => {})

then方法返回的是一個新的Promise實例(注意,不是原來那個Promise實例)。因此可以采用鏈式寫法,即then方法后面再調用另一個then方法。

fetch("/posts.json").then(file=> {file.json()}).then(data => {});

上面的代碼使用then方法,依次指定了兩個回調函數。第一個回調函數完成以后,會將返回結果作為參數,傳入第二個回調函數。

Promise.all方法用於將多個Promise實例包裝成一個新的實例。

const p = Promise.all([p1, p2, p3]);

上面代碼中,Promise.all方法接受一個數組作為參數,p1,p2,p3都是 Promise 實例,如果不是,就會先調用下面講到的Promise.resolve方法,將參數轉為Promise實例,再進一步處理。

p的狀態由p1,p2,p3決定,分成兩種情況。

(1)只有p1,p2,p3的狀態都變成fulfilled,p的狀態才會變成fulfilled,此時p1,p2,p3的返回值組成一個數組,傳遞給p的回調函數。

(2)只要p1,p2,p3之中有一個被rejected,p的狀態就變成rejected,此時第一個被rejected的實例的返回值,會傳遞給p的回調函數。

Promise.race方法也是用於將多個Promise實例包裝成一個新的實例。

const p = Promise.race([p1, p2, p3]);

上面代碼中,只要p1,p2,p3之中有一個實例率先改變狀態,p的狀態就跟着改變。那個率先改變的 Promise 實例的返回值,就傳遞給p的回調函數。

Promise.resolve()將現有對象轉為 Promise 對象。

2. 一道關於Promise的應用示例

const timeout = ms => new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, ms)
  });

  const ajax1 = () => timeout(1000).then(() => {
    console.log('1')
    return 1;
  });

  const ajax2 = () => timeout(1000).then(() => {
    console.log('2')
    return 2
  });

  const ajax3 = () => timeout(1000).then(() => {
    console.log('3')
    return 3
  });

  const mergePromise = ajaxArray => {
    let result = []
    let promise = Promise.resolve()
    ajaxArray.forEach(function (item) {
      promise = promise.then(item)
      result.push(promise)
    })
    return Promise.all(result)
  };

  mergePromise([ajax1, ajax2, ajax3]).then(data => {
    console.log('done')
    console.log(data) //[1,2,3]
  });

按順序合並Promise,並將返回結果以數組的形式輸出。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM