Javascript中非同步等待的深入理解
在本文中，我們將探討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
consolhttp://www.cppcns.come.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));
}www.cppcns.com)();
我知道上面的程式碼是一個人為的示例，在這裡重要的是我們正在利用的力量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) {
www.cppcns.com //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','joe'];
names.forEach(async (name) => {
//does not wait here
console.log(await greet(name));
}http://www.cppcns.com);
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暫停當前函式的執行，而prom程式設計客棧ise繼續執行當前函式，將值新增到中then()。這兩種執行程式的方式之間存在顯著差異。
讓我解釋一下，考慮諾言版本，如果asyncTwo（）或asyncThree（）在執行任務時丟擲非同步錯誤，它將包含async1()在堆疊跟蹤中嗎？
這裡的promise不會暫停當前函式的執行，當asyncTwo解析或拒絕時，上下文不在promise語句之內。因此，理想情況下，它不能包含asyncOne在堆疊跟蹤中。但是由於使用了V8引擎，它在這裡做了一些神奇的工作，通過asyncOne()提前引用以便包含asyncOne()在上下文中。但這不是免費的。捕獲堆疊跟蹤需要花費時間（即降低效能）。儲存這些堆疊跟蹤需要記憶體。
async/await在效能方面，這是拍子承諾的地方，因為當前功能的執行將暫停，直到等待功能完成為止，因此我們已經對該功能有了參考。
總結
到此這篇關於Javascript中非同步等待的文章就介紹到這了,更多相關Javascript非同步等待內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！