# await

* [JS](https://lochiwei.gitbook.io/web/js) ⟩ [async](https://lochiwei.gitbook.io/web/js/async) ⟩ await
* [JS](https://lochiwei.gitbook.io/web/js) ⟩ [statement](https://lochiwei.gitbook.io/web/js/grammar/statement) ⟩ [expression](https://lochiwei.gitbook.io/web/js/grammar/statement/expr) ⟩ [operator](https://lochiwei.gitbook.io/web/js/grammar/op) ⟩ [unary](https://lochiwei.gitbook.io/web/js/grammar/op/unary) ⟩ await

{% hint style="success" %}
([es2017](https://lochiwei.gitbook.io/web/js/feature/es2017 "mention")) ([primary](https://lochiwei.gitbook.io/web/js/grammar/statement/expr/primary "mention")) ([unary](https://lochiwei.gitbook.io/web/js/grammar/op/unary "mention"))\
turns a [promise](https://lochiwei.gitbook.io/web/js/async/promise "mention") <mark style="color:yellow;">**/**</mark> [**thenable**](https://lochiwei.gitbook.io/web/js/async/await/thenable) into a <mark style="color:green;">**return value**</mark> <mark style="color:yellow;">**/**</mark> <mark style="color:red;">**thrown exception**</mark>.

* if <mark style="color:green;">**resolves normally**</mark>, <mark style="color:purple;">**await**</mark> <mark style="color:yellow;">**returns the result**</mark>.&#x20;
* if <mark style="color:red;">**rejected**</mark>, <mark style="color:purple;">**it**</mark> <mark style="color:red;">**throws error**</mark> (as if there were a <mark style="color:red;">`throw`</mark> statement at that line).

```javascript
// works only inside async functions❗️ 
let value = await promise;
```

{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="success" %}

* <mark style="color:purple;">**await**</mark> can <mark style="color:yellow;">**only be used**</mark> <mark style="color:red;">**inside**</mark> an [async function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function):exclamation:
* modern browsers <mark style="color:green;">**allow**</mark> <mark style="color:yellow;">**top-leve**</mark>l <mark style="color:purple;">**await**</mark> in [modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules).

```javascript
// when top-level await not supported, use async IIFE instead.
(async () => {
  let value = await promise;
  // ...
})();
```

{% endhint %}
{% endtab %}

{% tab title="🔴 主題" %}

* [promises](https://lochiwei.gitbook.io/web/js/async/await/promises "mention") (in [parallel](https://lochiwei.gitbook.io/web/js/async/promise/in-parallel) or in [series](https://lochiwei.gitbook.io/web/js/async/promise/chaining))
  * [parallel](https://lochiwei.gitbook.io/web/js/async/await/promises/parallel "mention")
  * [sequential](https://lochiwei.gitbook.io/web/js/async/await/promises/sequential "mention")
* [thenable](https://lochiwei.gitbook.io/web/js/async/await/thenable "mention") - objects that <mark style="color:purple;">**await**</mark> supports.
* [error-handling](https://lochiwei.gitbook.io/web/js/async/await/error-handling "mention") for <mark style="color:purple;">**await**</mark>.
  {% endtab %}

{% tab title="📗 參考" %}

* [ ] JS.info ⟩ [async/await](https://javascript.info/async-await)
* [ ] &#x20;[javascript-the-definitive-guide](https://lochiwei.gitbook.io/web/master/ref/javascript-the-definitive-guide "mention") ⟩ Ch. 13
  {% endtab %}

{% tab title="📘 手冊" %}

* [await](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await)
  {% endtab %}
  {% endtabs %}