async/awaitを使用して書き直す
Promiseチェーンの章から、このサンプルコードを.then/catch
ではなくasync/await
を使用して書き直してください。
function loadJson(url) {
return fetch(url)
.then(response => {
if (response.status == 200) {
return response.json();
} else {
throw new Error(response.status);
}
});
}
loadJson('https://javascriptinfo.dokyumento.jp/no-such-user.json')
.catch(alert); // Error: 404
備考はコードの下に記載されています。
async function loadJson(url) { // (1)
let response = await fetch(url); // (2)
if (response.status == 200) {
let json = await response.json(); // (3)
return json;
}
throw new Error(response.status);
}
loadJson('https://javascriptinfo.dokyumento.jp/no-such-user.json')
.catch(alert); // Error: 404 (4)
備考
-
loadJson
関数はasync
になります。 -
内部のすべての
.then
はawait
に置き換えられます。 -
次のように待機する代わりに、
return response.json()
を使用できます。if (response.status == 200) { return response.json(); // (3) }
そうすると、外部コードはそのPromiseが解決されるまで
await
する必要があります。このケースでは問題ありません。 -
loadJson
からスローされるエラーは.catch
によって処理されます。async
関数内にいないため、そこでawait loadJson(…)
を使用することはできません。