※本サイトで紹介している商品・サービス等の外部リンクには、アフィリエイト広告が含まれる場合があります。
同期処理とは
処理１→処理２→処理３、、、と順番に処理されていくこと
非同期処理とは
処理が順番じゃないこと
setTimeoutファンクションにより、一定時間経ったあとに結果が表示される
→ 3000ミリ秒（３秒）後にconsole.log(3)が出力された
処理３の実行結果を待たず、処理４も実行し始めている
処理に時間を要する場合、次の処理を実行できない
→それだと困ることが多いので、JavaScriptには非同期処理というものが用意されている
Ajaxと非同期処理
サーバー側からresponseが返ってくるのに時間を要することがある
コードを上から順番に実行していくと、サーバー側からのresponseが返ってくるまで次の処理が実行されない
- コメント一覧の取得中、「いいね」を押してもハートの表示が切り替わらない
- コメント一覧の取得中、「コメントを追加」を押してもコメント投稿フォームを開くことができない
ひとつの処理が終わらないと次の処理が実行されないのは、JavaScriptやAjaxにおいて非常に困ること
サーバー側からレスポンスが返ってこない、などのことがあっても、他の処理が実行できるようになっている（＝非同期処理）
まず非同期処理が開始される
// 例）
axios.get(`/articles/${articleId}/comments`)
.then((response) => {
const comments = response.data
comments.forEach((comment) => {
appendNewComment(comment)
})
})いつ終わるかわからないけど、終わったら（成功したら）、then以降の処理が実行される
非同期処理を定義してみる
自分で定義することはまずないけど、仕組みを知る
Promise 非同期処理を定義するために重要なコード
jsconsoleを起動して、処理を書いてみる
第１引数は(resolve, reject)と書くのが慣例になっている
成功したらresolveを実行する、失敗したらrejectを実行する
const promise = new Promise((resolve, reject) => {
if (true) {
resolve('成功')
} else {
reject('失敗')
}
})
promise.then((msg) => {
console.log('then ', msg)
}).catch((msg) => {
console.log('catch ', msg)
})(msg)には、「成功」または「失敗」が渡されてくる
成功するので、↓の実行結果が表示される
同期処理なら、「１」「then 成功」「２」の順番で結果が表示されたはず
→ 非同期処理なので、異なる順番で結果が表示された
#DAY8
