Promise

Transcript

1. Promise 2018/06/15 第9回 TG社フロントエンド勉強会 Tatsuya Nakano(howdy39)

2. Promise • PromiseはJavaScriptのオブジェクト • 処理が終わったら教えるよという 約束 • 非同期処理を統一されたインターフェースで書ける • コールバック地獄の回避につかえる

   • ES2015で追加 https://caniuse.com/#search=promise IE以外は使える・・・ →IEに対応するなら 要 Polyfill (es6-promise etc

3. Promiseの基本

4. Promiseの基本 // Promiseオブジェクトを作成 const promise = new Promise((resolve, reject) =>

   { // 何らかの処理（非同期処理） if (解決時) { resolve('解決'); } else { reject(new Error('棄却')); } });

5. Promiseの基本 const promise = new Promise((resolve, reject) => { /*

   省略 */ }); // Promiseオブジェクトの結果により処理を実行 promise .then(value => { console.log('then', value); // resolve()が呼ばれた場合 }) .catch(value => { console.log('catch', value); // reject()が呼ばれた場合 });

6. Promiseオブジェクトの作り方 その１

7. new Promise(fn) const promise = new Promise((resolve, reject) => {

   // 何らかの処理 });

8. Promiseオブジェクトの作り方 その２

9. Promise.resolve() Promise.resolve()は解決したPromiseオブジェクトを返す ※次の1と2は同じ 1. const promise = Promise.resolve('howdy39'); 2. const

   promise = new Promise((resolve) => { resolve('howdy39') });

10. Promise.reject() Promise.reject()は棄却したPromiseオブジェクトを返す ※次の1と2は同じ 1. const promise = Promise.reject('howdy39'); 2. const

    promise = new Promise((resolve, reject) => { reject('howdy39') });

11. Promiseオブジェクトの作り方 その3

12. Fetch 等のPromiseを返す関数など const promise = fetch('https://api.github.com/orgs/topgate');

13. Promiseオブジェクトが持つメソッド

14. Promiseオブジェクトが持つ2つのメソッド Promise#then(onFulfilled, onRejected) 解決時はonFulfilledハンドラの処理が呼ばれる 棄却時はonRejectedハンドラの処理が呼ばれる Promise#catch(onRejected) Promise#then(undefined, onRejected) のシンタックスシュ ガー

    then()もcatch()、どちらもPromiseオブジェクトを返す

15. メソッドチェーン

16. メソッドチェーン Promiseはthenメソッドを使ってメソッドチェーンにできる ※thenメソッドの戻りがPromiseオブジェクトだから Promise.resolve() // 解決したPromise .then(() => console.log('aaa')) .then(()

    => console.log('bbb')) .then(() => console.log('ccc'));

17. 次のPromiseに値を渡す(値をreturn) Promise.resolve() .then(() => { console.log('aaa'); return 'howdy39'; // 値をreturnすればOK

    }) .then((value) => console.log('bbb', value)) .then(() => console.log('ccc'));

18. 次のPromiseに値を渡す(Promiseをreturn) Promise.resolve() .then(() => { console.log('aaa'); return Promise.resolve('howdy39'); // Promiseをreturn

    }) .then((value) => console.log('bbb', value)) .then(() => console.log('ccc'));

19. 次のPromiseに値を渡す(fetchをreturn) Promise.resolve() .then(() => { console.log('aaa'); return fetch('https://api.github.com/orgs/topgate'); }) .then(response

    => { console.log('bbb'); return response.json(); // Response#json()はPromiseを返す }) .then(json => console.log('ccc', json));

20. 棄却時のハンドリング

21. catch()で棄却をハンドリング Promiseはcatchメソッドを使って棄却時のハンドリングをする Promise.reject(new Error('my error')) // 棄却したPromise .then(() => console.log('aaa'))

    .then(() => console.log('bbb')) .catch((error) => console.log('ccc', error)) .then(() => console.log('ddd'));

22. 複数のPromiseを扱う

23. Promise.all()

24. Promise.all() Promiseの配列を指定すると並列に実行される すべてのPromiseが解決するとthenの処理が呼ばれる いずれかのPromiseが棄却するとcatchの処理が呼ばれる Promise.all([Promise1, Promise2, Promise3]);

25. Promise.all([ new Promise(resolve => { console.log('aaa'); resolve(); }), new Promise(resolve

    => { console.log('bbb'); resolve(); }), ]).then( () => console.log('ccc'), // 解決時の処理 ).catch( (error) => console.log('ddd', error) // 棄却時の処理; );

26. Promise.all()で複数の値を受け取る

27. 分割代入を使うと楽 Promise.all([ Promise.resolve('aaa'), Promise.resolve('bbb'), Promise.resolve('ccc'), ]).then(values => { const [a,

    b, c] = values; console.log('a', a); console.log('b', b); console.log('c', c); });

28. いずれかのPromiseが棄却

29. Promise.race()

30. Promise.race() Promiseの配列を指定すると並列に実行される いずれかのPromiseが解決するとthenの処理が呼ばれる いずれかのPromiseが棄却するとcatchの処理が呼ばれる Promise.race([Promise1, Promise2, Promise3]); 使う機会はあんまりなさそう

31. Promise.race([ new Promise(resolve => { console.log('aaa'); resolve(); }), new Promise(resolve

    => { console.log('bbb'); reject(new Error('bbb error')); }), ]).then( () => console.log('ccc'), // 解決時の処理 ).catch( (error) => console.log('ddd', error) // 棄却時の処理; );

32. おまけ

33. Promise#finally() Promiseオブジェクトにはthenとcatchの他にfinallyも存在 ES 2018 で実装 http://kangax.github.io/compat-table/es2016plus/#test-Promis e.prototype.finally

34. finallyは解決/棄却に関係なく呼ばれる Promise.resolve() .then(() => Promise.reject(new Error('my error'))) .catch(error => console.log('error',

    error)) .finally(() => console.log('finally222'));

35. まとめ 1. Promiseを使うと非同期処理がきれいに書ける 2. fetch はPromiseを返す 3. Promise#all()で非同期処理をまとめてかける

36. 参考 JavaScript Promiseの本 http://azu.github.io/promises-book Promise | MDN https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise Promise.prototype |

    MDN https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/prototype 今更だけどPromise入門 https://qiita.com/koki_cheese/items/c559da338a3d307c9d88 JavaScript の Promise https://developers.google.com/web/fundamentals/primers/promises