Javascript中異步等待的深入理解

更新時間：2021年05月23日 12:23:25 作者：Brook_

Async / Await是人們期待已久的JavaScript功能，它使使用異步功能更加有趣和易于理解。這篇文章主要給大家介紹了關(guān)于Javascript中異步等待的相關(guān)資料,需要的朋友可以參考下

在本文中，我們將探討async/await對于每個Javascript開發(fā)人員來說，異步編程的首選工具。如果您不熟悉javascript，請不要擔(dān)心，本文將幫助您async/await從頭開始理解。

介紹

async/await 是javascript中的一種模式，可使您的代碼以同步方式執(zhí)行，但又不影響javascript的異步行為。

定義異步功能

要定義一個異步函數(shù)，您所要做的只是在函數(shù)定義之前添加一個async關(guān)鍵字。

// async function always returns a promise
async function greet() {
  return "hello";
}

輕松自在！😎。在函數(shù)名稱前使用async關(guān)鍵字

使該函數(shù)返回一個承諾。

函數(shù)返回時解析。

拋出錯誤時最終拒絕。

這意味著您每次要創(chuàng)建一個Promise時都不需要聲明返回Promise.new（）。

為了證明異步函數(shù)返回了一個Promise，我們可以快速附加一個then塊以打印其值。

async function greet() {
  return "Hello from an async function"
}
greet().then(message => console.log(message));
//Hello from an async function

使用等待和執(zhí)行異步功能

不冷靜，我們可以做的then()，并catch()在一個async功能？但這不是異步async函數(shù)的真正功能，函數(shù)的真正潛力在于await語句。

await 使函數(shù)以同步方式執(zhí)行，同時將控件保持在該行中，直到等待方法完成其執(zhí)行。

async function greet() {
  return "Hello from an async function"
}

async function execute() {
  const message = await greet();
  console.log(message)
}

這是我們需要記住的一些經(jīng)驗法則。

👉等待只能在異步函數(shù)內(nèi)使用

async如果我們在函數(shù)內(nèi)部使用await，則必須聲明一個函數(shù)，反之則不然。

讓我這樣說。如果await在方法內(nèi)部使用語句，則該方法必須是async方法，否則編譯器會大吼大叫。

async function greet() {
  return "Hello from an async function";
}

function execute() {//this function must be async
  const message = await greet();
  console.log(message)
}
/* 
SyntaxError: await is only valid in async function
*/

但是聲明一個函數(shù)async并不一定意味著我們將始終await在其內(nèi)部使用它。這greet()是一個async方法，但是await里面沒有任何語句。

wait當(dāng)調(diào)用函數(shù)，返回promise或為異步函數(shù)時，await才有意義

//not an async function
function greet() {
 return "Hello from an async function";
}

async function execute() {
  const message = await greet();
  console.log(message); //Hello from an async function
}

盡管代碼的工作原理與上一代碼完全相同，但是await對synchronous函數(shù)進(jìn)行操作沒有任何意義。我想知道您對此有何想法？

使用await的一個重要方面是它阻塞了下一行代碼的執(zhí)行，直到執(zhí)行await塊為止。

const asyncGreet = () => new Promise(resolve => setTimeout(resolve, 2000));

(async function execute() {
  console.log("before executing");
  await asyncGreet(); //blocks execution here
  // 👇 executed once await is finished
  console.log("I will be executed after 2000ms");
})();

現(xiàn)在您必須懷疑是否正在等待使代碼同步，為什么我們要使用它呢？NodeJ或瀏覽器Javascript是單線程環(huán)境，一次執(zhí)行一項任務(wù)，由于它們的異步行為而被廣泛使用，而我們正在失去這些行為。那有什么意義呢？

是的，您是對的，但是如果您在大多數(shù)情況下都觀察到，我們需要執(zhí)行與他人有關(guān)的任務(wù)。

async function subscribeToNewsLetter() {
  const user  = await findUser(id);
  //👇methods need user email to execute
  await subscribe(user.email)
  await sendNotification(user.email)
}

沒錯但是互不相關(guān)的代碼呢？好吧，還有一個替代方法，即（Promise.all）。

const asyncGreet = (name) =>  new Promise((resolve) => setTimeout(resolve(`Hello ${name}`), 2000));

const names = ['john', 'jane', 'david'];

(async function() {
  const greetingPromises = names.map(name => asyncGreet(name));
  console.log(await Promise.all(greetingPromises));
})();

我知道上面的代碼是一個人為的示例，在這里重要的是我們正在利用的力量Promise.all來執(zhí)行所有的諾言

處理錯誤Async/Await。

使用async / await處理錯誤非常容易，我們可以使用我們的老朋友try / catch塊來實現(xiàn)這一點。

async function subscribeToNewsLetter() {
  try {
    const user  = await findUser(id);
    await subscribe(user.email)
    await sendNotification(user.email)
  } catch(err) {
    //handle error
  }
}

還有另一個版本，我們可以將catch處理程序直接附加到await塊。我個人不使用它，但是如果您愿意，可以嘗試一下。

  await asyncGreet().catch(err => console.log(err);

2倍的可讀性，易于調(diào)試

以下代碼使用Promise通過id查找用戶，分配配置文件信息，然后查找用戶的訂閱。

function getUser(id, profile) {
  return new Promise((resolve, reject) => {
    User
      .find(id)
      .then((user) => {
        if(_.isEmpty(user)) return {};
        user.profile = profile;
        return user;
      })
      .then((user) => Subscription.find(user.id))
      .then(subscription => {
        if(_.isEmpty(subscription)) {
          user.subscription = null;
        } else {
          user.subscription = subscription;
        }
        return resolve(user)
      })
      .catch(err => reject(err))
  })
}

上面的代碼工作完全正常，但我們肯定可以使其更具可讀性，簡潔，易于調(diào)試與async/ await。讓我們?nèi)グ伞?/p>

async function getUser(id, profile) {
  try {
    const user = await User.find(id);
    if(_.isEmpty(user)) return {};
    user.profile = profile;
    const subscription = await Subscription.find(user.id);
    user.subscription = subscription
    return user;
  } catch(err) {
    console.log(err);
  }
}

回調(diào)和Async/Await是敵人

正如我們在前面的示例中已經(jīng)看到的那樣，promise與async/一起使用非常好await。任何返回promise的函數(shù)都可以與await語句一起使用。

但是當(dāng)涉及到回調(diào)時，情況恰恰相反，回調(diào)不能直接與async/一起使用await，必須將它們轉(zhuǎn)換為Promise。

讓我們考慮以下函數(shù)，該函數(shù)異步測試值是否為偶數(shù)（引發(fā)錯誤）。

function asyncEven(id, cb){
  setTimeout(() => {
    const even = id%2 === 0;
    if (even) return cb(null, "even");
    else return cb("not even");
  }, 2000);
}

我們知道在回調(diào)中不允許使用await，但是仍然嘗試一下。

(async function() {
  //🐶👹 Wrong way
  const even = await asyncEven(2);
  console.log("isEven ", even); //undefined
})();

您一定在想，我們沒有附加一個回調(diào)，這就是它打印的原因undefined。

讓我們附加一個回調(diào)，這是很奇怪的，但是讓我們有耐心。

(async function() {
  //this is also wrong 🐶👹
  const even = await asyncEven(2, (err, data) => { console.log("inside await on callback", err, data)});
  console.log("isEven ", even);
})();
/*
output:
even  undefined
inside await on callback even null
*/

似乎調(diào)用了回調(diào)，并且我們還從asyncEven函數(shù)中獲取了值。沒錯，但這仍然是錯誤的方法。

await對回調(diào)沒有影響。這類似于在同步功能上進(jìn)行等待。

那為什么它返回undefined呢？這是個好問題。這是異步編程的默認(rèn)性質(zhì)。該setTimeout的功能是一個回調(diào)返回通過回調(diào)值2000毫秒之后，同時，控制開始執(zhí)行的下一行代碼，并且它達(dá)到的功能，這就是為什么我們得到的最終未定義。

那么解決方案是什么？很簡單將asyncEven功能變?yōu)槌兄Z并await像冠軍一樣使用。

function asyncEven(id,) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const even = id%2 === 0;
      if (even) return resolve("even");
      else return reject("not even");
    }, 2000);
  })
}

(async function() {
  // waits for the execution
  const even = await asyncEven(2);
  console.log("iseven ", even);
})();

ForEach不適合與 Async/Await

如果我們將ForEach循環(huán)與一起使用，則可能會有副作用async/await?？紤]以下示例，console.log此處的語句不等待await

greet(name)。
async function greet(name) {
 return Promise.resolve(`Hello ${name}, how are you ?`);
}

(function() {
  console.log("before printing names");
  const names = ['john', 'jane', 'joe'];
  names.forEach(async (name) => {
   //does not wait here
    console.log(await greet(name));
  });
  console.log("after printing names");
})();
/*
before printing names
after printing names
Hello john, how are you ?
Hello jane, how are you ?
Hello joe, how are you ?
*/

不僅僅是語法糖

到目前為止，我們只知道這async/await使我們的代碼更具可讀性，調(diào)試友好性，并且有人說這是javascript promise的語法糖。實際上，它不只是語法糖。

// promise
async1()
.then(x => asyncTwo(x))
.then(y => asyncThree(y))
//other statement
console.log("hello")


//async await
x = await async1();
y = await asyncTwo(x);
await asyncThree(y);

await暫停當(dāng)前函數(shù)的執(zhí)行，而promise繼續(xù)執(zhí)行當(dāng)前函數(shù)，將值添加到中then()。這兩種執(zhí)行程序的方式之間存在顯著差異。

讓我解釋一下，考慮諾言版本，如果asyncTwo（）或asyncThree（）在執(zhí)行任務(wù)時拋出異步錯誤，它將包含async1()在堆棧跟蹤中嗎？

這里的promise不會暫停當(dāng)前函數(shù)的執(zhí)行，當(dāng)asyncTwo解析或拒絕時，上下文不在promise語句之內(nèi)。因此，理想情況下，它不能包含asyncOne在堆棧跟蹤中。但是由于使用了V8引擎，它在這里做了一些神奇的工作，通過asyncOne()提前引用以便包含asyncOne()在上下文中。但這不是免費的。捕獲堆棧跟蹤需要花費時間（即降低性能）。存儲這些堆棧跟蹤需要內(nèi)存。

async/await在性能方面，這是拍子承諾的地方，因為當(dāng)前功能的執(zhí)行將暫停，直到等待功能完成為止，因此我們已經(jīng)對該功能有了參考。