イラストでそこそこわかりやすい非同期処理、Promise

同期処理、非同期処理とは

同期処理

一つの作業を終えるまで次の作業を行わない。

非同期処理

1つの作業が終わるのを待たずに他の作業を始める。

例え話

友達（A君、B君）と一緒にケーキを作ることを考えます。作業としてはケーキを焼く、皿の準備をする、トッピングの準備をする、があるとします。
同期処理の場合：A君がケーキを焼く。焼き終わってから、B君が皿の準備をはじめる。皿の準備が終わった後、自分はトッピングの準備をはじめる。

非同期処理の場合：A君がケーキを焼き始める。それと同時に、B君が皿の準備を始める。自分はトッピングの準備を始める。

上の説明から分かるように、非同期処理の場合、どの作業が最初に終わるかわかりません。トッピングの準備、皿の準備、ケーキを焼く、の順に作業が終わるかもしれない。

それぞれの作業の関数を以下のようにする。

index.js

function bakeCake(){
return new Promise((resolve)=>{
setTimeout()=>{
resolve();//成功したことを示す
console.log("baking a cake")
},5000)
})
}

function prepareDish(){
return new Promise((resolve)=>{
setTimeout(()=>{
console.log("preparing dishes")
},1000)
})
}

function addToppings(){
return new Promise((resolve)=>{
setTimeout(()=>{
console.log("adding toppings")
},2000)
})
}

非同期処理では、以下のコード
asyncをつけると非同期関数になる。
await はPromiseを返す関数の処理を待つ。

index.js

async function makeCake(){
bakeCake();
prepareDish();
addToppings();
console.log("finish");
}

//finish
//preparing dishes
//adding toppings
//baking a cake

全ての作業を終わるのをまってから、finishと宣言したいときは、以下のようになる。

index.js

async function makeCake(){
bakeCake();
prepareDish();
addToppings();
await Promise.all([bakeCake(),prepareDish(),addToppings()])
console.log("finish")

//preparing dishes
//adding toppings
//baking a cake
//finish
}

return new Promiseについて

Promiseとは

将来のある時点で完了する可能性のある処理を表す。Promiseを使うことで、非同期処理が完了したときに何をするのか指定できる。

例え話

友達に手紙を送ることを考えます

自分が送った手紙が友達に届くまでに時間がかかるとき、友達が「手紙が届いたよ」と教えてくれると、確認出来て助かります。この「届いたよ」という返事がPromiseに相当します。
もし、return new Promiseを使わないと、手紙が届いたかどうかわからないため、次の作業に進むことができない。よって、非同期処理ができません。

return new Promiseを行うことで、非同期処理を行う関数がPromiseを返すことになる。これにより、その関数が非同期処理を行っていることを示し、他のコードが非同期処理の完了を待つことができるということです。

resolve():非同期処理が成功したことを示す。
reject():非同期処理が失敗したことを示す。

index.js

function sendLetter(){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
const success=true; //今回は、メールが送れる場合を考える
if(success){
resolve('メールが送信できました。')
}else{
reject('メールが送信できませんでした')
}
},3000)
})
}

まとめ

同期処理

一つの作業を終えるまで次の作業を行わない。

非同期処理

1つの作業が終わるのを待たずに他の作業を始める。

Promiseとは

将来のある時点で完了する可能性のある処理を表す。Promiseを使うことで、非同期処理が完了したときに何をするのか指定できる。