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

async 完全理解 - 全ての async は Promise に通ず / Guide to async, await

async 完全理解 - 全ての async は Promise に通ず / Guide to async, await

saiya_moebius

December 04, 2020
Tweet

More Decks by saiya_moebius

Other Decks in Programming

Transcript

  1. Promise
    Deferred Objects
    async await
    Promise async await

    View full-size slide

  2. Promise
    ( )
    ( )
    resolve(T)
    Promise
    reject(any)
    Promise
    then(f, f)
    ,
    ,

    View full-size slide

  3. Promise
    ( )
    ( )
    resolve(T)
    Promise
    reject(any)
    Promise
    then(f, f)
    ,
    ,

    View full-size slide

  4. async
    return
    throw
    await
    const value = await ;
    console.debug(value);
    .then((value) => {
    console.debug(value);
    });

    View full-size slide

  5. const promise = new Promise();
    // ... ...
    promise.resolve( ); /* */ promise.reject( );
    new Promise((resolve, reject) => {
    // ... ...
    resolve( ); /* */ reject( );
    });

    View full-size slide

  6. // Promise
    let resolve, reject;
    new Promise((_resolve, _reject) => {
    // resolve, reject
    resolve = _resolve; reject = _reject;
    });
    resolve( ); /* */ reject( );
    // ↑ ...

    View full-size slide

  7. function () {
    // Promise ...
    const promise = new Promise();
    // ... ( promise.resolve ) ...
    return promise;
    }
    const promise = ();
    promise.resolve(null); // resolve

    View full-size slide

  8. function () {
    // Promise
    return new Promise((resolve, reject) => {
    // ... ( resolve ) ...
    });
    }
    const promise = ();
    // ↑ resolve

    View full-size slide

  9. function (props) {
    //
    const hoge = props.something.foobar();
    // Promise ...
    const promise = new Promise();
    // ... ( promise.resolve ) ...
    return promise;
    }
    resolve( )
    reject( )

    View full-size slide

  10. function () {
    /* ※1 */
    return new Promise((resolve, reject) => {
    // reject( )
    });
    }
    const promise = ();
    // ↑ Promise reject
    ※1

    View full-size slide

  11. promise.then
    .then((result) => {
    return (); // Promise
    }).then((result) => {
    // result ===
    });

    View full-size slide

  12. Promise.all(Promise[]): Promise
    Promise.race(Promise[]): Promise
    promise.catch(f)

    View full-size slide

  13. function myFunction() {
    A().then((resultA) => {
    if (resultA === "hoge") {
    B().then((resultB) => {
    if (resultB === "huga") C();
    });
    } else {
    D().then((resultC) => {
    if (resultC === "piyo") E();
    });
    }
    });
    }

    View full-size slide

  14. async
    return
    throw
    await
    const value = await ;
    console.debug(value);
    .then((value) => {
    console.debug(value);
    });

    View full-size slide

  15. await
    //
    async function myFunction() {
    if (await A() === "hoge") {
    if (await B() === "huga") C();
    } else {
    if (await D() === "piyo") E();
    }
    }
    await then

    View full-size slide

  16. Promise
    Promise.all Promise.race
    await Promise.all( 1(), 2(), ...)
    Promise

    View full-size slide

  17. async
    await
    async Promise
    Promise await
    await

    View full-size slide

  18. async await
    function hoge() {
    const async = 1;
    const await = 2;
    console.log(async, await); // it works
    }
    async await
    async function() { ... } async

    View full-size slide

  19. await
    async function myFunction() {
    await 1(); // 1().then(...)
    1();
    2(); // await
    2();
    await 3(); // 3().then(...)
    }
    2
    no-floating-promises

    View full-size slide

  20. await Promise.resolve(Promise.resolve(123));
    // Promise.resolve(123) 123
    // Promise.resolve Promise

    View full-size slide

  21. fulfill
    reject
    resolve
    Promise.reject(e)
    Promise.resolve(value) fulfill
    resolve
    reject

    View full-size slide

  22. new Promise Promise. Promise

    View full-size slide

  23. Promise
    Promise
    Promise = undefined; //
    Promise.resolve(1234); //
    await (async() => 123)(); //
    async await
    Promise
    Promise ZoneAwarePromise
    Promise
    Zone
    async await
    Promise.

    View full-size slide

  24. await then
    await
    14.6.13 Runtime Semantics: Evaluation
    25.5.5.3 AsyncFunctionAwait ( value )
    25.4.5.3.1 PerformPromiseThen

    View full-size slide