Promise異步函數(shù)順序執(zhí)行的四種方法

Awbeci 發(fā)布于2019-08-23 11:28 / 2257人閱讀

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

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

//實現(xiàn)mergePromise函數(shù)，把傳進去的數(shù)組順序先后執(zhí)行，
//并且把返回的數(shù)據(jù)先后放到數(shù)組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 補全函數(shù)
}

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;
}

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

三. generator函數(shù) 1. 原生generator函數(shù)

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) { //如果有數(shù)據(jù)則push進數(shù)組
        arr.push(preData); 
      }
      let result = g.next(preData); //獲取每一步執(zhí)行結(jié)果，其中value為promise對象，done表示是否執(zhí)行完成
      if (result.done) { //函數(shù)執(zhí)行完畢則resolve數(shù)組
        resolve(arr);
      }
      else { //函數(shù)沒有執(zhí)行完畢則遞歸執(zhí)行
          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模塊自動執(zhí)行

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

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

四. async函數(shù)

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

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

云服務器 GPU云服務器數(shù)據(jù)遷移的四種方法 activity的四種狀態(tài) 對數(shù)據(jù)倉庫分析的四種方式 java中線程的四種狀態(tài)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/97010.html

JavaScript 異步編程的四種方式

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

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

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

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

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

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

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

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

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

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