async/await is built on top of promises. `async`關鍵字放在`function`關鍵字前定義了一個異步處理函數，該函數默認返回的是一個Promise對象。 `await`關鍵字，只能在`async`定義的函數內出現，表示開始一個異步過程并等待該過程的結果。 [TOC] ## async/await [[MDN-async/await](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await)] We've included the `async` keyword before the function keyword. This is necessary — you have to create an async function to define a block of code in which you'll run your async code; `await` only works inside of async functions. example: ~~~js async function fetchAndDecode(url, type) { let response = await fetch(url); let content; if(type === 'blob') { content = await response.blob(); } else if(type === 'text') { content = await response.text(); } return content; } async function displayContent() { let coffee = fetchAndDecode('coffee.jpg', 'blob'); let tea = fetchAndDecode('tea.jpg', 'blob'); let description = fetchAndDecode('description.txt', 'text'); let values = await Promise.all([coffee, tea, description]); let objectURL1 = URL.createObjectURL(values[0]); let objectURL2 = URL.createObjectURL(values[1]); let descText = values[2]; let image1 = document.createElement('img'); let image2 = document.createElement('img'); image1.src = objectURL1; image2.src = objectURL2; document.body.appendChild(image1); document.body.appendChild(image2); let para = document.createElement('p'); para.textContent = descText; document.body.appendChild(para); } displayContent() .catch((e) => console.log(e) ); ~~~ By using `await` here we are able to get all the results of the three promises returned into the `values` array, when they are all available, in a way that looks very much like sync code. We've had to wrap all the code in a new async function, `displayContent()`, and we've not reduced the code by a lot of lines, but being able to move the bulk of the code out of the `.then()` block provides a nice, useful simplification. For error handling, we've included a `.catch()` block on our `displayContent()` call; this will handle errors ocurring in both functions. >[warning] wrap your awaited promises inside an async function. The `await` keyword blocks execution of all the code after it until the promise fulfills, exactly as it would with a synchronous operation. This is means that your code could be slowed down by a significant number of awaited promises happening straight after one another. Each await will wait for the previous one to finish, whereas actually what you want is for the promises to begin processing simultaneously, like they would do if we weren't using async/await. There is a pattern that can mitigate this problem — setting off all the promise processes by storing the `Promise` objects in variables, and then awaiting them all afterwards. Example: **timeoutPromise()**: a custom promise function that fakes an async process with a [`setTimeout()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) call: ~~~js function timeoutPromise(interval) { return new Promise((resolve, reject) => { setTimeout(function(){ resolve("done"); }, interval); }); }; ~~~ **slow-async-await.html**, `timeTest()` ~~~js // async function timeTest() { await timeoutPromise(3000); await timeoutPromise(3000); await timeoutPromise(3000); } ~~~ Each subsequent one is forced to wait until the last one finished — if you run the first example, you'll see the alert box reporting a total run time of around 9 seconds. **fast-async-await.html**, `timeTest()` ~~~js async function timeTest() { const timeoutPromise1 = timeoutPromise(3000); const timeoutPromise2 = timeoutPromise(3000); const timeoutPromise3 = timeoutPromise(3000); await timeoutPromise1; await timeoutPromise2; await timeoutPromise3; } ~~~ Here we store the three `Promise` objects in variables, which has the effect of setting off their associated processes all running simultaneously. Next, we await their results — because the promises all started processing at the same time, the promises will all fulfill at the same time; when you run the second example, you'll see the alert box reporting a total run time of just over 3 seconds! ### Async/await class methods you can even add `async` in front of class/object methods to make them return promises, and `await` promises inside them. ~~~js class Person { constructor(first, last, age, gender, interests) { this.name = { first, last }; this.age = age; this.gender = gender; this.interests = interests; } async greeting() { return await Promise.resolve(`Hi! I'm ${this.name.first}`); }; farewell() { console.log(`${this.name.first} has left the building. Bye for now!`); }; } let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']); ~~~ The first class method could now be used something like this: ~~~js han.greeting().then(console.log); ~~~