js promise,async,await简单笔记

promise demo

function getToken(username,pwd) {
        console.log("111")
        return new Promise(function (resolve, reject) {
            console.log("222")
            setTimeout(() => {
                console.log("333")
                if (username=="admin" && pwd=="123456"){
                    resolve("xxx")
                }else{
                    reject("用户名或密码错误")
                }

            }, 1000);

        })
    }
    console.log("444")
    getToken("admin","123456").then(function (token) {
        console.log("token:",token)
    }).catch(function (error) {
        console.log("error:",error)
    })
    console.log("555")

输出：

444
111 
222 
555 

333
token: xxx 
 

从结果可以看出，promise function中的代码是同步执行的，当调用resolve时会回调then，同时也会把参数传递给then,调用reject时会回调catch，同时也会把参数传递给catch

async/await demo

function getToken(username,pwd) {
        console.log("111")
        return new Promise(function (resolve, reject) {
            console.log("222")
            setTimeout(() => {
                console.log("333")
                if (username=="admin" && pwd=="123456"){
                    resolve("xxx")
                }else{
                    reject("用户名或密码错误")
                }

            }, 1000);

        })
    }

    async function asyncTest(){
        console.log("444")
        try {
            let token = await getToken("admin","123456")
            console.log("token:",token)
        }catch (e) {
            console.log("err:",e)
        }
        console.log("555")

    }

    let ret = asyncTest();
    console.log("ret:",ret)

输出：

444

111

222

ret: Promise { <state>: "pending" }

333

token: xxx

555

分析：当在函数中使用await关键字时，函数前必须加async关键字，await关键字的作用是，当await后面的表达式的值为数字/字符串等普通类型时，await直接得到这个值，当表达式的值为promise对象时，则等待该promise对象resolve或reject，await将得到resolve或reject的值，这里的try-catch是用来处理reject的情况。从结果可以看出，async函数始终会自动返回一个promise对象，当执行到await语句时，函数就返回了，等await结束会自动往下执行下面剩余的代码