水彩絵の具つかった
写真が上手に撮れてない罠
javaScript の 同期非同期, Promise, async-await をイラストにしてみた
タイトル下手くそすぎか！ 画像はもうしゃあない。
画像はマジで俺の理解やからあんま鵜呑みにせんとってくださいや。大体ですわ。
要するに以下のjsの実装をまとめたかった。有用な記事がたくさんあるので、それのリンク集みたいな感じで。
あと難しい話を情報量を落とさずに要約する訓練も兼ねて。
結論は、みんなMDN見よかということです
この記事でまとめておくこと
- 同期非同期
- Promise
- async/await
整理
処理形式を短く (3行で) まとめる。
1. 同期/非同期
- 同期はconsole.log() とかみたいに結果を待つ処理
- 非同期は$.ajax() みたいに 結果を待たずに走る処理
- 非同期処理ではコールバックで処理後のケリのつけ方を定義する
- 詳しいのはこちら
2. Promise
- 非同期処理は、場合によってはネストが深くなる問題がある
- そこで、Promiseオブジェクトとthen式を連結させて処理を簡潔にする
- Promiseオブジェクトはresolve（解決）と reject（拒否）の処理が定義されている
- 詳しいのはこちら
qiita.com
3. async/await
- Promise をより簡潔に書くための構文。
- asyncは これは非同期関数やで！ という宣言（もっと平べったく言うと目印）。Promiseを返す。
- awaitは 僕はasyncの結果を待ってるマンでーす！ という宣言（実際は演算子）
- 詳しいのはこちら
Mozillaのリンク
- Promise: Promise | MDN
- async : async function | MDN
- await : await | MDN
