🦅
非同期処理 (4): Javascript async/awaitについて
概要
前回の記事で扱ったPromiseを、より簡潔に非同期処理が書ける非同期関数がありますがそれがasyncとawaitです。
asyncとawaitは非同期処理の中では一番最近の文法になります。簡単にその特徴をまとめてみました。
async/awaitの特徴
使い方はfunctionの前にasyncをつけて、非同期で処理されるところにawaitをつけます。
awaitは必ずasyncをつけった関数の中で使います。
awaitはPromiseの結果(fulfilled や rejected)を待ってくれます。
// asyncをつける
async function displayUser() {
// getUser()は非同期処理。awaitをつける
let result = await getUser();
console.log(result);
}
functionの前にasyncをつけると常にPromiseを返します。
エラーを発生させる
Promiseは前回の記事にもありますが、rejectを利用します。
function promiseFunc(){
return new Promise((resolve, reject) => {
reject("promise ERROR");
})
}
const result = promiseFunc()
console.log(result);
//結果: Promise {<rejected>: 'promise ERROR'}
async/awaitの場合はthrowを利用します。
async function asnycFunc(){
throw 'async ERROR!';
}
const result = asnycFunc();
console.log(result);
//結果: Promise {<rejected>: 'async ERROR!'}
async/awaitのエラー処理
こちらはtry-catchを利用するパターンです。
async function asnycFunc() {
try {
let response = await fetch('http://no-such-url');
} catch(err) {
console.log(err);
}
}
// 結果：TypeError: Failed to fetch
catchを利用するパターンも可能です。
async function asnycFunc() {
let response = await fetch('http://no-such-url').catch((err) => {
console.log(err);
});
}
// 結果：TypeError: Failed to fetch
参考
Discussion