Promise異步函數順序執行的四種方法

Awbeci 發布于2019-08-23 11:28 / 2195人閱讀

摘要：前幾天遇到一個編程題，要求控制順序執行，今天總結了一下這個至少有好四種方法都可以實現，包括嵌套，通過一個串起來，，實現，以下逐一介紹。

前幾天遇到一個編程題，要求控制promise順序執行，今天總結了一下這個至少有好四種方法都可以實現，包括promise嵌套，通過一個promise串起來，generator，async實現，以下逐一介紹。
原題目如下：

//實現mergePromise函數，把傳進去的數組順序先后執行，
//并且把返回的數據先后放到數組data中
const timeout = ms => new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve();
    }, ms);
});

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

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

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

function mergePromise(ajaxArray) {
    //todo 補全函數
}

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

// 分別輸出
// 1
// 2
// 3
// done
// [1, 2, 3]

一. promise嵌套

function mergePromise1(ajaxArray) {
  let arr = [];
    return ajaxArray[0]().then(data=>{
        arr.push(data);
        return ajaxArray[1]();
    }).then(data=>{
        arr.push(data);
        return ajaxArray[2]();
    }).then(data=>{
      arr.push(data);
      return arr;
    });
}

二. Promise.resolve將promise串連成一個任務隊列

function mergePromise2(ajaxArray) {
  let p = Promise.resolve();
  let arr = [];
  ajaxArray.forEach(promise => {
    p = p.then(promise).then((data) => {
        arr.push(data);
        return arr;
    });
  });
  return p;
}

此方法相對于上面的方法簡單并且書寫直觀易懂，還有一種類似的任務隊列，將數組按順序從左邊頭部取出一個執行，執行完成后觸發自定義next方法，next方法負責從數組中取出下一個任務執行。

三. generator函數 1. 原生generator函數

var mergePromise3 = function* (ajaxArray) {
  let p1 = yield ajaxArray[0]();
  let p2 = yield ajaxArray[1]();
  let p3 = yield ajaxArray[2]();
  return Promise.resolve([p1,p2,p3]);
}

//自動運行的run
function run(fn) {
  return new Promise((resolve, reject) => {
    var g = fn;
    let arr = [];
    function next(preData) {
      if(preData) { //如果有數據則push進數組
        arr.push(preData); 
      }
      let result = g.next(preData); //獲取每一步執行結果，其中value為promise對象，done表示是否執行完成
      if (result.done) { //函數執行完畢則resolve數組
        resolve(arr);
      }
      else { //函數沒有執行完畢則遞歸執行
          result.value.then(function(nowData) {
            next(nowData);
          });
      }
    }
    next();
  });
}

使用這種方法需要修改mergePromise方法為：

run(mergePromise3([ajax1, ajax2, ajax3])).then(data => {
  console.log("done");
  console.log(data); // data 為 [1, 2, 3]
});

2. 利用co模塊自動執行

const co = require("co")
  co(mergePromise3([ajax1, ajax2, ajax3])).then(data => {
  console.log("done");
  console.log(data); // data 為 [1, 2, 3]
});

此方法原理和上面一樣，只是使用已有的封裝好的co模塊來自動執行

四. async函數

function mergePromise4(ajaxArray) {
  let arr = [];
  async function run() {
      for(let p of ajaxArray) {
          let val = await p();
          arr.push(val);
      }
      return arr;
  }
  return run();
}

以上列出了四種方法，具體使用那種方法也根據喜好而定，如果有其他的好的方法歡迎留言補充。

GPU云服務器云服務器數據遷移的四種方法 activity的四種狀態對數據倉庫分析的四種方式 java中線程的四種狀態

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97010.html

JavaScript 異步編程的四種方式

摘要：異步編程是每個使用編程的人都會遇到的問題，無論是前端的請求，或是的各種異步。本文就來總結一下常見的四種處理異步編程的方法。利用一種鏈式調用的方法來組織異步代碼，可以將原來以回調函數形式調用的代碼改為鏈式調用。異步編程是每個使用 JavaScript 編程的人都會遇到的問題，無論是前端的 ajax 請求，或是 node 的各種異步 API。本文就來總結一下常見的四種處理異步編程的方法。...

microelec 2019-08-20 17:36 評論0 收藏0
Promise 的四種常用方法。

摘要：前言看到項目里不少人用了的庫類，比如等方式，使用的時候翻看長長的文檔，真心累覺不愛。用法常用三個場景。處理異步回調多個異步函數同步處理異步依賴異步回調封裝統一的入口辦法或者錯誤處理處理異步回調的基本用法，處理異步回調。前言看到項目里不少人用了Promise 的庫類，比如 bluebird、q 、jQuery.Deffered 等 polyfill promise 方式，使用的時候...

wangzy2019 2019-08-19 18:43 評論0 收藏0
promise用法解析

摘要：這時，第二個方法指定的回調函數，就會等待這個新的對象狀態發生變化。 1.概述 javascript是單線程語言（單線程/多線程、阻塞/非阻塞、同步、異步）參考此文章，所有的任務都是按順序執行的，但是對于很耗時的操作采用異步的方式（前一個任務結束的時候，不是執行下一個任務，而是執行回調函數，后一個任務則是不等前一個任務結束就執行）參考此文章，js中異步編程的四種方法：回調函數、事件監聽、...

fai1017 2019-08-26 11:33 評論0 收藏0
關于promise的小結

摘要：則是把類似的異步處理對象和處理規則進行規范化，并按照采用統一的接口來編寫，而采取規定方法之外的寫法都會出錯。這個對象有一個方法，指定回調函數，用于在異步操作執行完后執行回調函數處理。到目前為止，已經學習了創建對象和用，方法來注冊回調函數。 Promise 本文從js的異步處理出發，引入Promise的概念，并且介紹Promise對象以及其API方法。 js里的異步處理可以參考這篇文章...

Tony_Zby 2019-08-20 17:44 評論0 收藏0
前端異步解決方案-3（Promise）

摘要：又有好些天沒有動筆了，這幾天一直在斷斷續續的學習和，今天終于能夠把著兩個玩意結合起來了解決異步問題了。今天我先把相關的用法和對異步的處理分享給大家。老樣子，還是先模擬一個。又有好些天沒有動筆了，這幾天一直在斷斷續續的學習Promise和generator，今天終于能夠把著兩個玩意結合起來了解決異步問題了。今天我先把promise相關的用法和對異步的處理分享給大家。老樣子，還是先模擬一...

genedna 2019-08-23 16:57 評論0 收藏0