Javascript中異步等待的深入理解

Posted on by

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

介紹

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

定義異步功能

要定義一個異步函數，您所要做的隻是在函數定義之前添加一個async關鍵字。

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

輕松自在！😎。在函數名稱前使用async關鍵字

使該函數返回一個承諾。

函數返回時解析。

拋出錯誤時最終拒絕。

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

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

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

使用等待和執行異步功能

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

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

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

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

這是我們需要記住的一些經驗法則。

👉等待隻能在異步函數內使用

async如果我們在函數內部使用await，則必須聲明一個函數，反之則不然。

讓我這樣說。如果await在方法內部使用語句，則該方法必須是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
*/

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

wait當調用函數，返回promise或為異步函數時，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函數進行操作沒有任何意義。我想知道您對此有何想法？

使用await的一個重要方面是它阻塞瞭下一行代碼的執行，直到執行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");
})();

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

是的，您是對的，但是如果您在大多數情況下都觀察到，我們需要執行與他人有關的任務。

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

沒錯 但是互不相關的代碼呢？好吧，還有一個替代方法，即（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來執行所有的諾言

處理錯誤Async/Await。

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

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倍的可讀性，易於調試

以下代碼使用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))
  })
}

上面的代碼工作完全正常，但我們肯定可以使其更具可讀性，簡潔，易於調試與async/ await。讓我們去吧。

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);
  }
}

回調和Async/Await是敵人

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

但是當涉及到回調時，情況恰恰相反，回調不能直接與async/一起使用await，必須將它們轉換為Promise。

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

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

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

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

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

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

(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
*/

似乎調用瞭回調，並且我們還從asyncEven函數中獲取瞭值。沒錯，但這仍然是錯誤的方法。

await對回調沒有影響。這類似於在同步功能上進行等待。

那為什麼它返回undefined呢？這是個好問題。這是異步編程的默認性質。該setTimeout的功能是一個回調返回通過回調值2000毫秒之後，同時，控制開始執行的下一行代碼，並且它達到的功能，這就是為什麼我們得到的最終未定義。

那麼解決方案是什麼？很簡單 將asyncEven功能變為承諾並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循環與一起使用，則可能會有副作用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使我們的代碼更具可讀性，調試友好性，並且有人說這是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暫停當前​​函數的執行，而promise繼續執行當前函數，將值添加到中then()。這兩種執行程序的方式之間存在顯著差異。

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

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

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

總結

到此這篇關於Javascript中異步等待的文章就介紹到這瞭,更多相關Javascript異步等待內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：