JavaScriptにおける非同期処理。Promise&async/await
非同期処理とは・・・実行完了を待たない。並行して次の処理を行う。
Promiseで実行完了を待つ
Promiseの状態には以下の3つがあります。
- pendeing:初期状態
- fulfilled:処理が成功して完了した状態
- rejected:処理が失敗して完了した状態
以下の場合、resolveかrejectが返ってくるまでPromiseFuncは次に進まなくなります。
const PromiseFunc = () => { return new Promise((resolve, reject) => { someAsynchronousunc(() => { //何かしらの非同期処理 }).then(() => { //非同期処理が成功した場合 return resolve("成功") }).catch(() => { //非同期処理が失敗した場合 return reject("失敗") }) }) }
async/awaitで実行完了を待つ
promiseよりシンプル
- 非同期処理に伴う関数定義にasyncを付ける
- 非同期処理を伴う関数実行時にawaitを付ける
- awaitはasync付き関数内でしか使えない
以下の場合、someAsynchronousFuncがreturnされるまでasyncAwaitFuncは次に進まなくなります。
const asyncAwaitFunc = async () => { const hoge = await someAsynchronousFunc(() => { //何かしらの非同期処理 }).then(() => { //非同期処理が成功した場合 return "成功" }).catch(() => { //非同期処理が失敗した場合 return "失敗" }) }