js-primer icon indicating copy to clipboard operation
js-primer copied to clipboard

非同期: PromiseとAsync Functionを中心とした内容に置き換える

Open azu opened this issue 2 years ago • 3 comments

目的

  • Promiseの章が一番複雑で長いため、もっと読みやすい形を目指す
  • エラーファーストコールバックを非同期のメインから補足的な立ち位置に変更する

エラーファーストコールバック変更の背景は主に次のような点 #1449 #1444

  • エラーファーストコールバックは多くのケースでPromiseの代替方法が提供されている
    • エラーファーストコールバックは使われるところが限定的になっている
      • ほぼNode.jsに以前からあったものを触る時
      • expressなどの以前からライブラリ
    • Node.jsでも新規なら、 fs/promisesdns/promises、Fetch APIなどPromiseベースのAPIが提供されている
    • Iterationについても、Async Generatorをベースにしたevents.onなどで解決されてきている
    • ただし、シビアなパフォーマンスではコールバックの方が優位となっている
    • デバッグはStackTraceの問題からPromiseの方が優位であることが多い
  • 非同期を学ぶ時に、Promise/Asyncから入ることが増えている
    • Promiseは新しいものではなくなった(仕様に入ってから7年以上経つ)
    • エラーファーストコールバック → Promiseのように歴史の流れを汲むのは冗長に感じるようになってきている

現状のアウトライン

非同期処理:コールバック/Promise/Async Function
        同期処理
        非同期処理
        非同期処理はメインスレッドで実行される
        非同期処理と例外処理
        エラーファーストコールバック
        [ES2015] Promise
            Promiseインスタンスの作成
            Promise.prototype.thenとPromise.prototype.catch
            Promiseと例外
            Promiseの状態
            Promise.resolve
            Promise.reject
            Promiseチェーン
            Promiseチェーンで逐次処理
            Promise.allで複数のPromiseをまとめる
            [Promise.race ](https://jsprimer.net/basic/async/#promise-race)
        [ES2017] Async Function
        Async Functionの定義
        Async FunctionはPromiseを返す
        await式
            Promiseチェーンをawait式で表現する 
        Async Functionと組み合わせ
            Async Functionと反復処理
            Promise APIとAsync Functionを組み合わせる
            await式はAsync Functionの直下でのみ利用可能
            [ES2022] Module直下での[await式 ](https://jsprimer.net/basic/async/#await-expression)
        まとめ

これを次のようなイメージに書き換える

現状のアウトライン

非同期処理:コールバック/Promise/Async Function
        同期処理
        非同期処理
        非同期処理はメインスレッドで実行される (ここも再検討
        非同期処理と例外処理
        [ES2015] Promise
            Promiseインスタンスの作成
            Promise.prototype.thenとPromise.prototype.catch
            Promiseと例外
            Promiseの状態
            Promise.resolve
            Promise.reject
            Promiseチェーン
            Promiseチェーンで逐次処理
            Promise.allで複数のPromiseをまとめる
            [Promise.race ](https://jsprimer.net/basic/async/#promise-race)
        [🆕 コラム?] エラーファーストコールバック
        [ES2017] Async Function
        Async Functionの定義
        Async FunctionはPromiseを返す
        await式
            Promiseチェーンをawait式で表現する 
        Async Functionと組み合わせ
            Async Functionと反復処理
            Promise APIとAsync Functionを組み合わせる
            await式はAsync Functionの直下でのみ利用可能
            [ES2022] Module直下での[await式 ](https://jsprimer.net/basic/async/#await-expression)
        まとめ

やること

  • 非同期の章の書き直し
  • ユースケース CLIをPromiseベースに変更
    • 補足としてfs.readFileなどのコールバックAPI での書き方を追加

azu avatar Jul 23 '22 05:07 azu

エラーファーストコールバックはtry-catchの自動化はないスタイルと言い換えできる。 逆にunhandled rejectionの概念はないんだな

azu avatar Aug 06 '22 05:08 azu

エラーファーストコールバックは章の最後におくのがいいかと。

promise asyncの流れの間に入れる必要があるとそうではない感じ。 2015より前の非同期処理というか。 コラムだけど、がっつりセクションぐらいの感覚かな

azu avatar Aug 06 '22 06:08 azu

並行、並列の図は https://wavedrom.com/ を使って書けるかも。 メンテナンス性を考えると、テキストで書けた方が嬉しい。 書籍全体で統一感はないけど

azu avatar Aug 07 '22 01:08 azu