みなさんこんにちは、現役エンジニアのサメハックです
アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！
今回は非同期処理におけるasyncとawaitについて学んでいきましょう！
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！
- 同期処理と非同期処理の違いがわかる
- asyncが何かがわかる
- awaitが何かがわかる
非同期処理とはそもそもなにか
非同期処理とは、超ざっくりいうと処理の順番を入れ替えること。
イメージ的には処理2をバックグラウンド実行させつつ、
処理3を先に実行するようなことです。
JavaScriptはシングルスレッドなのであくまでイメージですが
非同期処理は一時的にメインスレッドの処理から外れて処理を行います。
そして終わったタイミングで「ここ入れてね！」と
メインスレッドに戻ってきます。
同期処理・非同期処理について詳しく知りたい方は
以下を参考に復習してみてください。
asyncとawait
awaitとは
awaitとは非同期処理の完了を待つために使われます。
■ 構文
await 非同期処理を行う関数等;このように記述すると、非同期処理が完了するまで
後続の処理を待機させることができます。
先程の資料に当てはめてみると
非同期処理「「時間かかるから先進めといて!」
await「いや、君の処理が終わるまで待つよ！」
非同期処理「終わったよ!」
後続処理「続きの処理すすめるね！」
このようなやり取りがされています。
図で見るとawaitが処理を止めていることがわかりやすいと思います。
と記述することで、指定した非同期処理が完了するまで処理を止めるよ！
でもこれ単体では使えないよ！
asyncとは
asyncとは非同期処理を行う関数に使われるもので、
「この処理の中でawaitが使われているよ！」というただの目印です。
awaitを使う場合はasyncを付けないと構文エラーになります。
■ 構文
const async 関数名 = () => {
// awaitを含む処理
}このように記述します。
asyncとawaitの関係性
ちなみにですがawaitは非同期処理の完了を待つことで、
asyncは「awaitが使われているよ!」という目印だとお伝えしましたが
async単体ではよくも悪く処理には影響はありません。
- awaitがある → asyncが必須。ないとエラーが起きる
- asyncがある → awaitは必須ではない。awaitがない場合は通常の関数扱い
// asyncがついているが特に意味はない
const myFunction = async() => {
console.log("こんにちは!");
};
console.log(1);
myFunction();
console.log(2);
console.log(3);
console.log(4);
console.log(5);【出力結果】
1
こんにちは!
2
3
4
5fetch関数を使って理解を深めよう！
※今回のサンプルはPaizaIOでは動かないので、
自身の環境で動かすか、CodePenにて動作させてみてください。
以下は、fetchによるデータ取得をawaitを使うことで待機しています。
// 今回叩くAPI
const MY_API = "https://jsonplaceholder.typicode.com/users?id=1";
// awaitを含む関数なので、asyncを付与
async function getData() {
// MY_APIのGETメソッドを実行
// awaitを使ってfetchの完了を待つ
const response = await fetch(MY_API, { methods: "GET" });
// json型に変換する
const jsonData = await response.json();
console.log(jsonData);
};
getData();【出力結果】
[
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "Sincere@april.biz",
"address": {
"street": "Kulas Light",
"suite": "Apt. 556",
"city": "Gwenborough",
"zipcode": "92998-3874",
"geo": {
"lat": "-37.3159",
"lng": "81.1496"
}
},
"phone": "1-770-736-8031 x56442",
"website": "hildegard.org",
"company": {
"name": "Romaguera-Crona",
"catchPhrase": "Multi-layered client-server neural-net",
"bs": "harness real-time e-markets"
}
}
]まとめ
- await 非同期処理
- と記述することで、指定した非同期処理の完了を待つ
- awaitを含む処理を作る場合には関数名にasyncをつける
- awaitがある→asyncは必須
- asyncがある→awaitは必須ではない
満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈
