【ES2017】async/await の基礎(前編)
Promiseの理解はできたので async/await について基礎から学んでいきたいと思います。
- async/await とは
- 簡単なサンプル
- Promiseを使った例
- Async Functionを使った例
- 簡単なサンプル
- Async Functionの定義方法
- Async Function の役割
- Async Functionは常にPromiseインスタンスを返す
- await 式について
- Async Functionでのエラーハンドリング
- Async Function呼び出し元をcatch メソッドでつなぐ
- try-catch を使う
- エラー処理は呼び出し元に記述するべきか、呼び出し先に記述すべきか
- awaitは常にPromiseを受け取る
- awaitはAsync Functionの直下のみ使用可能
- Async Functionでのエラーハンドリング
- Async Function 利用パターン
- 非同期の逐次処理
- 1. then をつなぐ
- 2. Array.prototype.reduce() を使う
- 3. Async Fuction を使う
- 非同期の並列処理
- Promiseの結果を再利用したい場合
- 非同期の逐次処理
- ここまでのまとめ
- 参考
【JavaScript 小ネタ】JSXなどのテンプレート上でクラス名に入る無駄な空白(スペース)をよしなに削除する方法
ちょっとした小ネタを思いついたので書いておきたいと思います。
JSX上などで、クラス名の出し分けとかによくある下記のような記述をすると、場合によっては無駄な空白(スペース)が開発者ツール上で見えたりして気になったりしないでしょうか?
<a href="#" className={`foo ${isActive ? "is-active" : ""} ${isHidden ? "is-hidden" : ""}`}>test</a>
▼ Chromeの開発者ツールでの見え方
foo
の後ろに、無駄な空白が入ってしまっています。
こういう時皆さんはどうしていますか?
自分の場合は今まで、挙動には問題ないのでそのまま無視するか、下記のように空白が入ることを想定した書き方をしていました。
<a href="#" className={`foo${isActive ? " is-active" : ""}${isHidden ? " is-hidden" : ""}`}>test</a>
${...}
の前に空けていた空白を削除して詰めれば、無駄な空白は生まれなくなります。
しかし 可読性が低下 してしまうので良い方法とは言えません。
何かスマートに解決できる方法があればいいなーとなんとなく思っていました。
【JavaScript】ちゃんと理解しておきたいPromiseの勘所など
以前下記の記事でPromiseについて調べたことをまとめましたが、どうもすっきりと腹落ちしていませんでした。
ようやく最近になってふと腹落ちして理解できたと思うので、改めて自分の頭の整理のためにまとめておきたいと思います。
- Promiseとは
- Promiseの勘所
- 絶対に必要な基礎知識
- Promise.resolve() は渡す引数によって返されるPromiseオブジェクトが変わる
- then() は 非同期で行われるPromise.resolve() とほぼ同じ役割
- Promiseオブジェクトを渡した例
- Promiseでの逐次(直列)処理
- Array.prototype.reduce() と組み合わせて見やすく書く
- Promise.race() を使ったタイムアウト処理
- まとめ
- 参考