初学者跪着学JavaScript Day29 : async 和 await

一日客语：中文:成功客语:ㄙㄣ3声ㄍㄨㄥˊ siinˇ gungˊ

出现async、await可以更简单的使用 Promise

配 code 再复习一下 Promise 吧

1.会有 new Promise 创建一个 Promise 物件，此时状态是: pending 状态

2.Promise callback function 有 resolve、 reject ，状态会改变会有 fulfilled 、 rejected

3.外面要接收透过 Promise 物件的 then 和 catch methods

function woman() {
    let randomNumber = Math.random() * 3;
    let random = Math.floor(randomNumber);
    return new Promise(function (resolve, reject) {
        if (random === 1) {
            return resolve('嫁');
        } else {
            return reject('不嫁');
        }
    });
}
woman()
    .then((yes) => console.log(yes, '女主角说愿意，求婚成功'))
    .catch((no) => console.log(no, '女主角说不愿意，求婚失败'));

介绍 Async

使用 async function

mdn语法：

async function name([param[, param[, ...param]]]) {
   statements
}

呼叫 Async function，返回值会是 Promise物件

当 return 是一个值 ex: Promise { 1 }
当没有 return 时 ex: Promise { undefined }

async function foo() {
    return 1;
}

console.log(foo()); //返回值是一个promise

注意 : Promise 物件可以使用 then methods

复习一下 : result 是 Promise 物件可以使用 then 在这之前会经由 reslove / reject 解析出值

function nini() {
    let result = new Promise(function (reslove, reject) {
        console.log('nini:你在哪里');
        setTimeout(() => {
            reslove('渣男:我在家里啊');
        }, 1000);
    });

    return result;
}
nini().then(function (x) {
    console.log(x);
});

那既然 Async function 回传值是一个 Promise 物件，试试用 then methods

function nini() {
    let result = new Promise(function (resolve, reject) {
        reslove('nini:你在哪里');
    });

    return result;
}
nini().then((x) => console.log(x));

async function kiki() {
    return 'kiki:在哪里';
}

kiki().then((y) => console.log(y));

在这里你会疑惑！明明我自己写 async function kiki() 返回值是字串啊!!!

才不是返回什麽 promise 物件咧，因为他被偷偷处理了

原始

async function kiki() {
    return 'kiki:在哪里';
}

处理时

function kiki() {
    return new Promise(function (resolve, reject) {
        resolve('kiki:在哪里');
    });
}

kiki().then((y) => console.log(y));

但要注意不是相等只是等价喔～

介绍 await

async function 内可以使用 await，可以和 Promise 搭配一起使用

async function 内包含 await 表达式，此表达式可以0~多个

async function kiki() {
    let result = await new Promise(function (reslove, reject) {
        resolve('kiki:在哪里');
    });
    console.log(result);//kiki:在哪里
}

执行方式:遇到 await 会停下来等解析完毕会回传给 await 再 return 出去赋值给 result ，

因此可以把非同步用的像是同步

在学 Promsie 时要做到 promise chain 会在 then() 内 return 另一个 function ，

如果忘记快来复习一下：渣男给不完的promise 吧

但在 Async function 和 await 表达式可以更轻松做到

执行完第一句await再执行第二句 await，不是同步执行～

原本建置 promise chain 是一次建起，现在可以分段建构

若await和非new promise物件使用

会转成 resolve Promise 传给 await 回传出去

async function woman() {
    const result = await 100000;
    console.log(result); // 100000
}

woman();

发生错误时

没错又要再复习一下 promise，因为金鱼脑的我，必须一直复习才能加深印象。

当发生错误无法成功执行时会走到 promise 内的 reject function，

then 内的 reject function 会收到

但 async await 方式会使用try...catch来捕捉错误

利用前天写的 promise 来改写试试

原始:

function woman() {
    let randomNumber = Math.random() * 3;
    let random = Math.floor(randomNumber);
    return new Promise(function (resolve, reject) {
        if (random === 1) {
            return resolve('嫁');
        } else {
            return reject('不嫁');
        }
    });
}
woman()
    .then((yes) => console.log(yes, '女主角说愿意，求婚成功'))
    .catch((no) => console.log(no, '女主角说不愿意，求婚失败'));

async function woman() {
    let randomNumber = Math.random() * 3;
    let random = Math.floor(randomNumber);
    try {
        let result = await new Promise(function (resolve, reject) {
            if (random === 1) {
                resolve('嫁');
            } else {
                throw '不嫁';
            }
        });
        console.log(result, '女主角说愿意，求婚成功');
    } catch (error) {
        console.log(error, '女主角说不愿意，求婚失败');
    }
}

woman();

今天的我又进化了一点

把 new Promise 拉到外面写，wow

function marry() {
    return new Promise((resolve, reject) => {
        let randomNumber = Math.random() * 3;
        let random = Math.floor(randomNumber);
        if (random === 1) {
            resolve('嫁');
        } else {
            reject('不嫁');
        }
    });
}

async function woman() {
    try {
        let result = await marry();
        console.log(result, '女主角说愿意，求婚成功');
    } catch (error) {
        console.log(error, '女主角说不愿意，求婚失败');
    }
}

又在练习另一种方式

利用 async会自动转 promise 物件来和 await 运算子试试

async function marry() {
    let randomNumber = Math.random() * 3;
    let random = Math.floor(randomNumber);
    try {
        if (random === 1) {
            return '嫁';
        } else {
            throw new Error('不嫁');
        }
    } catch (error) {
        throw error;
    }
}

async function woman() {
    try {
        let result = await marry();
        console.log(result, '女主角说愿意，求婚成功');
    } catch (error) {
        console.log(error, '女主角说不愿意，求婚失败');
    }
}

今日学习就到这了～真的很累

很推荐 JavaScript 概念三明治：基础观念、语法原理一次带走写的 async 跟 await 推推推

观念简单又清晰，解救了水深火热的我，原本超级不懂一看就上手

写完 Async 又再次顺便复习 promise ，更加熟练也能理解

"可以更简单的使用 Promise "的意思

当没有 async 跟 await 时会要一直使用 then 去接值，接完值想要再执行

function 的话，会在then 内返回 function

但使用 async 跟 await 可以直接在 async function 内做好

就剩明天了～～～自我精神喊话加油！！