Promise

Transcript

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

   View Slide

2. Promise
   ● PromiseはJavaScriptのオブジェクト
   ● 処理が終わったら教えるよという 約束
   ● 非同期処理を統一されたインターフェースで書ける
   ● コールバック地獄の回避につかえる
   ● ES2015で追加
   https://caniuse.com/#search=promise
   IE以外は使える・・・
   →IEに対応するなら 要 Polyfill (es6-promise etc
   

   View Slide

3. Promiseの基本
   

   View Slide

4. Promiseの基本
   // Promiseオブジェクトを作成
   const promise = new Promise((resolve, reject) => {
   // 何らかの処理（非同期処理）
   if (解決時) {
   resolve('解決');
   } else {
   reject(new Error('棄却'));
   }
   });
   

   View Slide

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

   View Slide

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

   View Slide

7. new Promise(fn)
   const promise = new Promise((resolve, reject) => {
   // 何らかの処理
   });
   

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

15. メソッドチェーン
    

    View Slide

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

    View Slide

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

    View Slide

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'));
    

    View Slide

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));
    

    View Slide

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

    View Slide

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'));
    

    View Slide

22. 複数のPromiseを扱う
    

    View Slide

23. Promise.all()
    

    View Slide

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

    View Slide

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) // 棄却時の処理;
    );
    

    View Slide

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

    View Slide

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);
    });
    

    View Slide

28. いずれかのPromiseが棄却
    

    View Slide

29. Promise.race()
    

    View Slide

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

    View Slide

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) // 棄却時の処理;
    );
    

    View Slide

32. おまけ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide