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

資訊專欄INFORMATION COLUMN

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

monw3c / 1262人閱讀

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

火于異步

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

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

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

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

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

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

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

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

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

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

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

allTasks();

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

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

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

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

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

});
/**
 * 3秒后
 * 1 我是第一個(gè)任務(wù)，必須第一個(gè)執(zhí)行
 * 1秒后
 * 2 第二個(gè)任務(wù)
 * 1秒后
 * 3 第三個(gè)任務(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

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

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

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

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

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

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

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

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

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

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

參考

《JavaScript編程全解》

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

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

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

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

相關(guān)文章

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

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

    曹金海 評(píng)論0 收藏0

  • Javascript中的異步編程

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

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

  • JavaScript 異步

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

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

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

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

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

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

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

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

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

0條評(píng)論

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