JavaScript的async 的學習

Leo_chen 發布于2019-08-21 17:03 / 1123人閱讀

摘要：函數內部語句返回的值，會成為方法回調函數的參數。也就是說，只有函數內部的異步操作執行完，才會執行方法指定的回調函數。命令后面的對象如果變為狀態，則的參數會被方法的回調函數接收到。

async 函數

ES2017 標準引入了 async 函數，使得異步操作變得更加方便，就是 Generator 函數的語法糖。
對比一下：

const fs = require("fs");

const readFile = function (fileName) {
  return new Promise(function (resolve, reject) {
    fs.readFile(fileName, function(error, data) {
      if (error) return reject(error);
      resolve(data);
    });
  });
};

const gen = function* () {
  const f1 = yield readFile("/etc/fstab");
  const f2 = yield readFile("/etc/shells");
  console.log(f1.toString());
  console.log(f2.toString());
};

async的書寫

const asyncReadFile = async function () {
  const f1 = await readFile("/etc/fstab");
  const f2 = await readFile("/etc/shells");
  console.log(f1.toString());
  console.log(f2.toString());
};

async函數就是將 Generator 函數的星號（*）替換成async，將yield替換成await，僅此而已。

async的優點

async的書寫方式，比之前的promise、genenator方式都好，以下四點優勢：

內置執行器。
async函數的執行，與普通函數一模一樣，只要一行。function()，這樣就可以執行，不像 Generator 函數，需要調用next方法，或者用co模塊，才能真正執行，得到最后結果。

更好的語義
async和await，比起星號和yield，語義更清楚了。async表示函數里有異步操作，await表示緊跟在后面的表達式需要等待結果。

更廣的適用性
yield命令后面只能是 Thunk 函數或 Promise 對象，而async函數的await命令后面，可以是Promise 對象和原始類型的值（數值、字符串和布爾值，但這時等同于同步操作）。

返回值是 Promise
async函數的返回值是 Promise 對象，這比 Generator 函數的返回值是 Iterator 對象方便多了。你可以用then方法指定下一步的操作。

進一步說，async函數完全可以看作多個異步操作，包裝成的一個 Promise 對象，而await命令就是內部then命令的語法糖。

返回值

async函數返回一個 Promise 對象。async函數內部return語句返回的值，會成為then方法回調函數的參數。

async function f() {
  return "hello world";
}

f().then(v => console.log(v))
// "hello world"

上面代碼中，函數f內部return命令返回的值，會被then方法回調函數接收到。async函數內部拋出錯誤，會導致返回的 Promise 對象變為reject狀態。拋出的錯誤對象會被catch方法回調函數接收到。

async函數返回的 Promise 對象，必須等到內部所有await命令后面的 Promise 對象執行完，才會發生狀態改變，除非遇到return語句或者拋出錯誤。也就是說，只有async函數內部的異步操作執行完，才會執行then方法指定的回調函數。

await

正常情況下，await命令后面是一個 Promise 對象。如果不是，會被轉成一個立即resolve的 Promise 對象。上面代碼中，await命令的參數是數值123，它被轉成 Promise 對象，并立即resolve。

await命令后面的 Promise 對象如果變為reject狀態，則reject的參數會被catch方法的回調函數接收到。

async function f() {
  await Promise.reject("出錯了");
}

f()
.then(v => console.log(v))
.catch(e => console.log(e))
// 出錯了

只要一個await語句后面的 Promise 變為reject，那么整個async函數都會中斷執行。

以上都是學習過程的筆記。

云服務器 GPU云服務器 javascript的學習學習javascript的 javascript的 javascript的集合

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

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

JavaScript基礎——深入學習async/await

摘要：等待的基本語法該關鍵字的的意思就是讓編譯器等待并返回結果。這里并不會占用資源，因為引擎可以同時執行其他任務其他腳本或處理事件。接下來，我們寫一個火箭發射場景的小例子不是真的發射火箭本文由云+社區發表本篇文章，小編將和大家一起學習異步編程的未來——async/await，它會打破你對上篇文章Promise的認知，竟然異步代碼還能這么寫! 但是別太得意，你需要深入理解Promise后，...

張金寶 2019-08-16 14:03 評論0 收藏0
ES6-7

摘要：的翻譯文檔由的維護很多人說，阮老師已經有一本關于的書了入門，覺得看看這本書就足夠了。前端的異步解決方案之和異步編程模式在前端開發過程中，顯得越來越重要。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。 JavaScript Promise 迷你書（中文版）超詳細介紹promise的gitbook，看完再不會promise...... 本書的目的是以目前還在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 評論0 收藏0
學習JavaScript循環下的async/await

摘要：原因是的循環方法等是并行迭代，可以理解為的效果是無效的解決方案使用最原始的循環將上述的模擬異步任務修改為或參考連接用來處理異步在不起作用解決異步循環的使用方法問題描述在進行業務開發的過程中，使用了數組的高級函數map，同時使用了ES6語法async/await，發現在map循環下任務是異步執行的，并不符合預期例子說明 /** * 異步打印數據 */ const echo =...

Ilikewhite 2019-08-23 15:14 評論0 收藏0
重學前端學習筆記（十七）--Promise里的代碼為什么比setTimeout先執行？

摘要：版本以及之前，本身還沒有異步執行代碼的能力，宿主環境傳遞給引擎，然后按順序執行，由宿主發起任務。采納引擎術語，把宿主發起的任務稱為宏觀任務，把引擎發起的任務稱為微觀任務。基本用法示例的回調是一個異步的執行過程。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的...

pinecone 2019-08-02 16:18 評論0 收藏0
重學前端學習筆記（十七）--Promise里的代碼為什么比setTimeout先執行？

摘要：版本以及之前，本身還沒有異步執行代碼的能力，宿主環境傳遞給引擎，然后按順序執行，由宿主發起任務。采納引擎術語，把宿主發起的任務稱為宏觀任務，把引擎發起的任務稱為微觀任務。基本用法示例的回調是一個異步的執行過程。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的...

zorpan 2019-08-26 13:47 評論0 收藏0