成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

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

Awbeci / 2205人閱讀

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

前幾天遇到一個(gè)編程題，要求控制promise順序執(zhí)行，今天總結(jié)了一下這個(gè)至少有好四種方法都可以實(shí)現(xiàn)，包括promise嵌套，通過(guò)一個(gè)promise串起來(lái)，generator，async實(shí)現(xiàn)，以下逐一介紹。
原題目如下：
//實(shí)現(xiàn)mergePromise函數(shù)，把傳進(jìn)去的數(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 補(bǔ)全函數(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串連成一個(gè)任務(wù)隊(duì)列 
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;
}

此方法相對(duì)于上面的方法簡(jiǎn)單并且書(shū)寫(xiě)直觀易懂，還有一種類(lèi)似的任務(wù)隊(duì)列，將數(shù)組按順序從左邊頭部取出一個(gè)執(zhí)行，執(zhí)行完成后觸發(fā)自定義next方法，next方法負(fù)責(zé)從數(shù)組中取出下一個(gè)任務(wù)執(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]);
}

//自動(dòng)運(yùn)行的run
function run(fn) {
  return new Promise((resolve, reject) => {
    var g = fn;
    let arr = [];
    function next(preData) {
      if(preData) { //如果有數(shù)據(jù)則push進(jìn)數(shù)組
        arr.push(preData); 
      }
      let result = g.next(preData); //獲取每一步執(zhí)行結(jié)果，其中value為promise對(duì)象，done表示是否執(zhí)行完成
      if (result.done) { //函數(shù)執(zhí)行完畢則resolve數(shù)組
        resolve(arr);
      }
      else { //函數(shù)沒(méi)有執(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模塊自動(dòng)執(zhí)行 
const co = require("co")
  co(mergePromise3([ajax1, ajax2, ajax3])).then(data => {
  console.log("done");
  console.log(data); // data 為 [1, 2, 3]
});

此方法原理和上面一樣，只是使用已有的封裝好的co模塊來(lái)自動(dòng)執(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ù)喜好而定，如果有其他的好的方法歡迎留言補(bǔ)充。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/97010.html

相關(guān)文章

  • JavaScript 異步編程的四種方式

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

    microelec 評(píng)論0 收藏0

  • Promise 的四種常用方法。

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

    wangzy2019 評(píng)論0 收藏0

  • promise用法解析

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

    fai1017 評(píng)論0 收藏0

  • 關(guān)于promise的小結(jié)

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

    Tony_Zby 評(píng)論0 收藏0

  • 前端異步解決方案-3（Promise）

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

    genedna 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<