async&awaitキーワードの使い方

参考文献:https://javascript.info/async-await
asyncとawaitのキーワードは通常promiseと協力して仕事するために使われます.以下に彼らの機能と使い方を紹介します.
async
asyncのキーワードは関数の前に定義されています.現在の関数はpromiseオブジェクトに戻ります.基本的な書き方は以下の通りです.

    async function test() {
        //do something
    }

asyncキーワードを使う時は以下の点に注意します.

関数returnが非promiseオブジェクトである場合、return結果はpromiseのresoved値として作用します.

関数returnがpromiseオブジェクトである場合、プロミセオブジェクトは直接に戻る.

asyncキーワードも匿名関数を修飾するために使用できます.

もしreturn結果がpromiseのreject値であることを望むなら、return 1つのrejectのpromiseオブジェクトが必要です.

例は以下の通りです

    //          （            ）
    async function test() {
        return "success";
    }
    async function test1() {
        return Promise.resolve("success");
    }
    function test2() {
        return Promise.resolve("success");
    }
    test().then(function (re) {
        console.log(re);
    });
    test1().then(function (re) {
        console.log(re);
    });
    test2().then(function (re) {
        console.log(re);
    });
    //async         ，             success
    (async function () {
        return "success";
    })().then(function (re) {
        console.log(re);
    });
    (async () => {
        return "success";
    })().then(function (re) {
        console.log(re);
    });
    let test3 = async function () {
        return "success";
    };
    test3().then(function (re) {
        console.log(re);
    });
    //    return    promise reject ，     ：return Promise.reject("xxx");
    async function test4() {
        return Promise.reject("reject");
    }
    test4().then(function (re) {
        console.log("success");
    }).catch(function (re) {
        console.log(re);
    });

await
awaitキーワードの定義はpromiseオブジェクトの前で、ステートメント関数の後のコードはawaitキーワードの修飾のpromiseが実行されるのを待つ必要があります.基本的な書き方は以下の通りです.

    //success     1000ms   
    async function test() {
        let promise = new Promise((resolve, reject) => {
            setTimeout(() => resolve("success"), 1000);
        });
        let re = await promise;
        console.log(re);
    }
    test();

awaitキーワードを使う時は以下の点に注意します.

awaitキーワードはasyncキーワードの修飾がある関数の内部に定義しなければならない.

promiseがrejectの分岐を行ったら、awaitおよび後続のコードをtry-catchで含めて異常を捕捉しなければならない.

awaitはコードの実行をブロックしません.

例は以下の通りです

    /**
     * await        async                    
     *              ，           ：
     * Uncaught SyntaxError: await is only valid in async function
     */
    // let promise = new Promise((resolve, reject) => {
    //     setTimeout(() => resolve("success"), 1000);
    // });
    // let re = await promise;
    // console.log(re);

    /**
     * end        ，  await        
     * failed     1000ms   await，  reject        
     */
    async function test() {
        let promise = new Promise((resolve, reject) => {
            setTimeout(() => reject("failed"), 1000);
        });
        try {
            let re = await promise;
            console.log(re);
        }
        catch (e) {
            console.log(e);
        }
    }
    test();
    console.log("end");

次の前の比較的完全な例:

    async function test(random) {
        let promise = new Promise((resolve, reject) => {
            setTimeout(() => random >= 0.5 ? resolve("success") : reject("failed"), 200);
        });
        try {
            let re = await promise;
            return re;
        }
        catch (er) {
            return Promise.reject(er);
        }
    }
    //     success      failed（    resolve      reject  ）
    test(Math.random()).then(function (re) {
        console.log(re);
    }).catch(function (er) {
        console.log(er);
    });