Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Promise

 Promise

howdy39

June 15, 2018
Tweet

More Decks by howdy39

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

  3. Promiseの基本

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. メソッドチェーン

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size slide

  22. 複数のPromiseを扱う

    View full-size slide

  23. Promise.all()

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size slide

  28. いずれかのPromiseが棄却

    View full-size slide

  29. Promise.race()

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. 参考
    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 full-size slide