国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JavaScript 中優(yōu)雅的實現(xiàn)順序執(zhí)行異步函數(shù)

monw3c / 1258人閱讀

摘要：順序執(zhí)行異步函數(shù)異步為帶來非阻塞等優(yōu)勢的同時，同時也在一些場景下帶了不便，如順序執(zhí)行異步函數(shù)，下面總結(jié)了一些常用的方法。

火于異步

1995年，當(dāng)時最流行的瀏覽器——網(wǎng)景中開始運行 JavaScript （最初稱為 LiveScript）。 1996年，微軟發(fā)布了 JScript 兼容 JavaScript。隨著網(wǎng)景、微軟競爭而不斷的技術(shù)更新，在 2000年前后，JavaScript 相關(guān)的技術(shù)基礎(chǔ)準(zhǔn)備就緒。 隨后到 2005 年前后，以 Google 為首開始重視使用 AJAX（即 Asynchronous JavaScript and XML)，使得復(fù)雜的網(wǎng)頁交互體驗接近桌面應(yīng)用。

然后，隨著 Web 應(yīng)用變得越來越復(fù)雜 ，JavaScript 的生態(tài)和重要性也日益提升，YUI、prototype.js、jQuery 等各種庫相應(yīng)登場，隨之而來就到了 JavaScript 的繁榮期。

2008年，Google 發(fā)布了 JavaScript 引擎 V8 大大改善了 JavaScript 的執(zhí)行速度，進(jìn)一步推動了 JavaScript 的繁榮，也為 JavaScript 進(jìn)軍服務(wù)器端打下了基礎(chǔ)（如：Node.js）。

順序執(zhí)行異步函數(shù)

異步為 JavaScript 帶來非阻塞等優(yōu)勢的同時，同時也在一些場景下帶了不便，如：順序執(zhí)行異步函數(shù)，下面總結(jié)了一些常用的方法。

1. "回調(diào)地獄"

隨著應(yīng)用復(fù)雜度幾何式增加，我們可能遇到下面“回調(diào)地獄”式的代碼。

// 第一個任務(wù)
function task1 (callback) {
  setTimeout(() => {
    console.log("1", "我是第一個任務(wù)，必須第一個執(zhí)行");
    callback && callback(1);
  }, 3000);
}

// 第二個任務(wù)
function task2 (callback) {
  setTimeout(() => {
    console.log("2", "我是第二個任務(wù)");
    callback && callback(2);
  }, 1000);
}

// 第三個任務(wù)
function task3 (callback) {
  setTimeout(() => {
    console.log("3", "我是第三個任務(wù)");
    callback && callback(3);
  }, 1000);
}

// 所有任務(wù)
function allTasks () {
  task1((cb1) => {
    if (cb1) {
      task2((cb2) => {
        if (cb2) {
          task3((cb3) => {
            if (cb3) {
              // 順序完成所有任務(wù)
            }
          })
        }   
      });
    }
  });
}

allTasks();

/**
 * 3秒后
 * 1 我是第一個任務(wù)，必須第一個執(zhí)行
 * 1秒后
 * 2 第二個任務(wù)
 * 1秒后
 * 3 第三個任務(wù)
 */
2. Promise

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise

為了避免“回調(diào)地獄”帶來的復(fù)雜性和不易閱讀，ES6 推出了 Promise。這次實現(xiàn)起來簡單多了，但還存在 Promise 中嵌套多層 Promise 的問題，似乎又回到了類似“回調(diào)地獄”的問題上。

new Promise(resolve => {
  setTimeout(() => {
    console.log("1", "我是第一個任務(wù)，必須第一個執(zhí)行");
    resolve(1);
  }, 3000);
}).then((val) => {

  new Promise(resolve => {
    setTimeout(() => {
      console.log("2", "我是第二個任務(wù)");
      resolve(2);
    }, 1000);
  }).then(val => {
    setTimeout(() => {
      console.log("3", "我是第三個任務(wù)");
    }, 1000); 
  });

});
/**
 * 3秒后
 * 1 我是第一個任務(wù)，必須第一個執(zhí)行
 * 1秒后
 * 2 第二個任務(wù)
 * 1秒后
 * 3 第三個任務(wù)
 */
3. Await、Async 
確保支持，詳細(xì)見：https://caniuse.com/#search=async

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/await

為了更易書寫和閱讀來實現(xiàn)順序執(zhí)行異步函數(shù)，ES2017 新增了 await 和 async。這次書寫體驗非常的棒，就像寫同步代碼一樣完成了順序執(zhí)行異步的需求。

/**
 * 第一個任務(wù)
 */
function task1 () {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log("1", "我是第一個任務(wù)，必須第一個執(zhí)行");
      resolve("done");
    }, 3000);
  });
}

/**
 * 第二個任務(wù)
 */
function task2 () {

  return new Promise(resolve => {
    setTimeout(() => {
      console.log("2", "第二個任務(wù)");
      resolve("done");
    }, 1000)
  });
}

/**
 * 第三個任務(wù)
 */
function task3 () {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("3", "第三個任務(wù)");
      reject("error");
    }, 1000);
  });
}

/**
 * 第四個任務(wù)
 */
function task4 () {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log("4", "第四個任務(wù)");
      resolve("done");
    }, 2000);
  })
}

/**
 * 所有任務(wù)
 */
async function allTasks () {
  await task1();
  await task2();
  await task3();
  await task4();
}

// 執(zhí)行任務(wù)
allTasks();

/**
 * 3秒后
 * 1 我是第一個任務(wù)，必須第一個執(zhí)行
 * 1秒后
 * 2 第二個任務(wù)
 * 1秒后
 * 3 第三個任務(wù)
 * Uncaught (in promise) error
 */
完整案例
基于  Node.js，通過 Await 、Async、Promise 實現(xiàn)的順序執(zhí)行異步，爬取豆瓣電影截圖并按順序一張張下載圖片。

https://github.com/givebest/node-sync-download

參考

《JavaScript編程全解》

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/

轉(zhuǎn)載請注明出處： http://blog.givebest.cn/javascript/2018/04/05/javascript-sync.html

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/93978.html

相關(guān)文章

  • 談一談幾種處理JavaScript異步操作的辦法

    摘要：問題是處理完了，卻也引發(fā)了自己的一些思考處理的異步操作，都有一些什么方法呢一回調(diào)函數(shù)傳說中的就是來自回調(diào)函數(shù)。而回調(diào)函數(shù)也是最基礎(chǔ)最常用的處理異步操作的辦法。 引言 js的異步操作，已經(jīng)是一個老生常談的話題，關(guān)于這個話題的文章隨便google一下都可以看到一大堆。那么為什么我還要寫這篇東西呢？在最近的工作中，為了編寫一套相對比較復(fù)雜的插件，需要處理各種各樣的異步操作。但是為了體積和兼容...

    曹金海 評論0 收藏0

  • Javascript中的異步編程

    摘要：接下來，我們一起來看看中的異步編程，具體有哪幾種。實現(xiàn)異步編程的方法一回調(diào)函數(shù)上面不止一次提到了回調(diào)函數(shù)。它是異步編程中，最基本的方法。四對象接下來，我們聊聊與相關(guān)的異步編程方法，對象。 showImg(https://segmentfault.com/img/bVbneWy?w=1600&h=1200); 前言 最近，小伙伴S 問了我一段代碼： const funB = (value...

    wemall 評論0 收藏0

  • JavaScript 異步

    摘要：從最開始的到封裝后的都在試圖解決異步編程過程中的問題。為了讓編程更美好，我們就需要引入來降低異步編程的復(fù)雜性。寫一個符合規(guī)范并可配合使用的寫一個符合規(guī)范并可配合使用的理解的工作原理采用回調(diào)函數(shù)來處理異步編程。 JavaScript怎么使用循環(huán)代替(異步)遞歸 問題描述 在開發(fā)過程中，遇到一個需求：在系統(tǒng)初始化時通過http獲取一個第三方服務(wù)器端的列表，第三方服務(wù)器提供了一個接口，可通過...

    tuniutech 評論0 收藏0

  • 50道JavaScript基礎(chǔ)面試題（附答案）

    摘要：事件中屬性等于。響應(yīng)的狀態(tài)為或者。同步在上會產(chǎn)生頁面假死的問題。表示聲明的變量未初始化，轉(zhuǎn)換為數(shù)值時為。但并非所有瀏覽器都支持事件捕獲。它由兩部分構(gòu)成函數(shù)，以及創(chuàng)建該函數(shù)的環(huán)境。 1 介紹JavaScript的基本數(shù)據(jù)類型Number、String 、Boolean 、Null、Undefined Object 是 JavaScript 中所有對象的父對象數(shù)據(jù)封裝類對象：Object、...

    huaixiaoz 評論0 收藏0

  • JavaScript：體驗異步的優(yōu)雅解決方案

    摘要：但是的的出現(xiàn)碉堡的新朋友，我們可以輕松寫出同步風(fēng)格的代碼同時又擁有異步機制，可以說是目前最簡單，最優(yōu)雅，最佳的解決方案了。不敢說這一定是終極的解決方案，但確實是目前最優(yōu)雅的解決方案 一、異步解決方案的進(jìn)化史 JavaScript的異步操作一直是個麻煩事，所以不斷有人提出它的各種解決方案。可以追溯到最早的回調(diào)函數(shù)(ajax老朋友)，到Promise(不算新的朋友)，再到ES6的Gener...

    happyfish 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<