54382


**(何れも期待した結果を取得できたのですが、)下記コードは何が違うのですか？**  
・それぞれ長所短所があれば知りたいです

* * *

fetch

[code]

    var response = fetch('/test').then(function(response) {
      return response.json();
    }).then(function(responseJson) {
    });
    
[/code]

* * *

await fetch

[code]

    (async () => {
      const response = await fetch('/test');
      await response.json();
    })();
    
[/code]

* * *

・fetch自体は非同期ではない？  
・XMLHttpRequesの代わりということであれば、非同期？  
・それとも非同期で使用するPromiseを同期的に取得しているだけ？？


CC BY-SA 4.0
2019-04-22T00:40:11.677
54376
2019-04-22T09:23:14.720
7886
question
javascript promise
「fetch」と「await fetch」について


async/await
はPromiseの糖衣構文なので、より簡単な書き方という理解で良いと思います。JavaScriptのCallback地獄からPromiseが生まれ、そこからまたPromise地獄が生まれたので`async/await`が生まれた、という経緯です。

<https://developer.mozilla.org/en-
US/docs/Learn/JavaScript/Asynchronous/Async_await>


CC BY-SA 4.0
2019-04-22T05:58:22.423
54382
2019-04-22T05:58:22.423
19313
54376
answer


「それぞれ長所短所があれば知りたいです」についてです。

## Generators

`Async/Await`は`Generators`と`Promises`を組み合わせたような「文」です。このような表現ができます。

[code]

    for await (variable of iterable) {
    }
    
[/code]

## 手続き的な表現

`Async/Await`は文なので関数内で処理を遅らせるような表現ができます。

[code]

    (async () => {
      const response = await fetch('/test');
      const json = await response.json();
      console.log(json)
    })();
    
[/code]

## エラー処理

Promiseは`catch`メソッドを用いてエラーを処理できます。

[code]

    fetch('/test').then(function(response) {
      return response.json();
    }).then(function(responseJson) {
    }).catch(err => {
      console.error(err)
    })
    
[/code]

Async/Awaitは`try-catch`文を用いてエラーを処理します。

[code]

    (async () => {
      try {
        const response = await fetch('/test');
        await response.json();
      } catch (e) {
        console.error(e)
      }
    })();
    
[/code]


CC BY-SA 4.0
2019-04-22T09:23:14.720
54392
2019-04-22T09:23:14.720
26586
54376
answer