非同期処理(async): Promise

[azu]

#17 基本文法

Edit(2018-06-25): 当初の予定ではPromiseだけだったが、非同期処理全般の流れになっている。

try...catch文 #93 -> エラーハンドリング -> 非同期という流れでPromise。

詳細はJavaScript Promiseの本を見てって感じにした方が良さそうな気もする。
#9 AjaxのユースケースでPromiseが出てくるので、ここで出てくる文法をカバーするように書く。

目的

• JavaScriptの非同期処理についてを理解する
• JavaScriptでの非同期処理の重要性について説明する
• JavaScriptの非同期処理と例外処理についてを見ていく

アウトライン

• https://github.com/asciidwango/js-primer/blob/master/source/basic/async/OUTLINE.md

タスク

• 非同期処理とは feat(async): 同期処理と非同期処理 #503
• エラーファーストコールバック feat(async): エラーファーストコールバック #509
• Promise feat(promise): Promiseの導入 #524
• Async Function feat(async): Async Function #536

[lacolaco]

Ajaxユースケース側で使うのは 標準のコンストラクタと、thenとcatchくらいですね。 .resolveと.rejectとか、.allは使う予定はないです

[azu]

thenは次のthen(のコールバック)へ値を渡すという表現 #116

[azu]

Promiseのところでasync awaitのユースケースの紹介を簡単に。

[azu]

• 非同期処理とは
• コールバックでの非同期
  • try-catchできない

try{
  fn(callback);
}catch(error){
}

• Nodeスタイルのエラーキャッチ
  • 処理内でエラーが起きた場合にコールバックにどう伝えるかという
  • Promise
• イベント
• 非同期は非同期に統一
• new Promise
• Promise.resolve
• Promise.reject
• Promise#then
• Promise#catch
• Promise#finally
• promiseオブジェクト
• Promise.all
• Promise.race
• async function
  • 常にpromiseオブジェクトを返す
  • await operator

という感じになるかな。

非同期処理と同期処理の大きな違いは、非同期処理は実行時になにか起きるかということで処理を書くから、コードを見ただけではわかりにくい問題がありそう。
非同期処理とtry-catchのエラーハンドリングの難しさを先にしないと、Promiseの説明に入れないという問題に気づいた。

https://asciidwango.github.io/js-primer/basic/error-try-catch/

[azu]

例外処理

• JavaScriptと非同期のエラー処理 - Yahoo! JAPAN Tech Blog
• Why asynchronous exceptions are uncatchable
• [Error handling, "try..catch"](https://javascript.info/try-catch "Error handling, "try..catch"")

[azu]

• 非同期処理とエラーハンドリング
• Promise

という大きく分けた感じ。

非同期処理とエラーハンドリング

これをtry-catchの方に入れるか、Promiseの方にいれるかって難しいな。
try-catchの話で、ネストした場合にcatchした時点でエラーの伝播は止まるよって話はほしいかも。

[azu]

https://github.com/getify/You-Dont-Know-JS/blob/fb60634c558fd4b77200204bdbd7a92d042d95bb/async%20%26%20performance/ch3.md#error-handling
try-catch + setTimeout

[yumetodo]

例外処理側でコールバックの例外問題を提起しておいて、Promise側ではこれだったら解決できる、とサックリ流すのが流れ的に良いのではないでしょうか？

[azu]

全体的な流れのイメージ

• 同期エラーはスコープチェインのように伝播する
• try-catchで止めれば、それ以上伝播しない
• 非同期エラーは実行コンテキストが異なるため伝播しない
  • コールバック内でtry-catchしないといけない
• 非同期エラーを伝播させる技術としてエラーファーストコールバック *A
• エラーファーストコールバックはNode.jsで発展した
  • https://www.joyent.com/node-js/production/design/errors
• (省略) Promise/A+
• ES2015 Promise
• Promiseは非同期処理の成功と失敗の統一的なインタフェースを提供するビルトインオブジェクト *A
• エラーファーストコールバックはあくまで規約だったものをオブジェクトとしてパターン化した
• 非同期には、直列、並列的な表現などさまざまパターンがある
• => 詳細なパターンについてはPromise本を参照
• Promiseにおいてエラーは暗黙的に伝播し、明示的に伝播させる場合にはrejectを行う
• Async/Await
• Promiseはあくまでオブジェクトでそれを構文として表現したのがasync/await
  • 反例がないかは要調査
• async functionは常にPromiseオブジェクトを返し、async functionにおいてはawait式が利用できる
• await式はPromiseがsettleとなるまで待ち、その実行結果を現在の実行コンテキストへと返すもの
  • Completionによって結果を伝えてる
• この時にエラーも伝播ができるため、try-catchで同期処理と同じように例外をキャッチできる *A

＊Aは同じコード例の別表現の例示

[azu]

非同期処理はできるけど、JavaScriptが実行される環境は基本的にシングルスレッドですよって話を簡潔にしたい感じはする。(多分スレッドという概念を出すと難しすぎるから、交互に処理が動いているという簡単なイメージが通じるといいのだけど)
setTimeoutのような非同期処理と呼ばれてるものが他の処理の影響を受けて遅れるということを体感してもらうのがいいのかな。

• JavaScript を学ぶ際に一番重要なのに、誤解されがちな setTimeout 系の概念 - IT戦記

PromiseってよりはJavaScriptにおける非同期って何かという概念を理解できたほうがいい気がするな。
Promiseとかは便利なAPIって感じだし。

ただ分量が難しい

[azu]

📝 JavaScript の async/await の仕様をずっと誤解していた

[azu]

The Node.js Way - Understanding Error-First Callbacks
エラーファーストコールバックについての定義

[azu]

Async Functionについて

• thenの直列処理awaitで書く
• 並列をpromise.allする例
• コールバック関数にはasyncをつけないといけない、関数に閉じてるよという説明
• エラーハンドリング
• return or awaitについて

#525 で話した

[azu]

Flow Control in Modern JS: Callbacks to Promises to Async/Await — SitePoint

[azu]

Promise のコンストラクタに渡した async function 内で throw しても rejected な Promise は作られない（常に fulfilled になる） - Humanity

[azu]

非同期処理 // => 期待評価値 がうまく動いてない気がするので、サンプルコードはちゃんとチェックする必要がありそう

[azu]

async と callback
Async ... await in Javascript

[azu]

#539
doctestがpromiseが混ざると動いてない感じがする。
vm モジュールでunhandled rejectionとかはどうやってcatchすればいいんだろ?

[azu]

#536 で合わせてdoctestも修正入れた

[azu]

https://asciidwango.github.io/js-primer/basic/async/
ひとまず完成。
JobQueue周りの話はおかしいので中途半端だしうまく削りたい