javascript 之 Promise

Promise

基础

/**
 * 在then中直接处理ok和ng的case
 * start promise
 * failthis is ng
 */
var p_1=new Promise((ok,ng)=>{
    console.log("start promise")
    // ok("this is ok")
    ng("this is ng")
}).then(
    hhh=>{
        console.log("finish"+hhh)
    },
    ddd=>{
        console.log("fail"+ddd)
    }
)

• 可以在then中直接获取reject的case并处理(异常处理)

/**
 * 使用catch的方式处理promise ng的case
 * this is p_2
 * the res is p2 fail
 */
var p_2 = new Promise((ok, ng) => {
    console.log("this is p_2")
    // ok("p2 finish")
    ng("p2 fail")
}).then(e => {
    console.log("the res is " + e)
}).catch(e => {
    console.log("the res is " + e)
})

• 也可以使用then 接受ok的case,通过catch处理ng的case

进阶(链式调用)

/**
 * then 后使用return返回数据
 * this is p_3 
 * the res is p3 finish 
 * the res in p3_1 is p3_1 ok
 */
var p_3 = new Promise((ok, ng) => {
    console.log("this is p_3")
    ok("p3 finish")
    // ng("p3 fail")
}).then(e => {
    console.log("the res is " + e)
    return ("p3_1 ok")
}).then(e => {
    console.log("the res in p3_1 is " + e)
})

• 在一次then之后，使用return 将新的类型作为值传给下一个then(没有异常的情况下)

区分ok和ng

/**
 * 返回的对象中有这个then()方法，那么它就会被当作是一个promise处理。
 * this is p4
 * the res is p4 finish
 * the res is this is ng1
 */
var p_4=new Promise((ok,ng)=>{
    console.log("this is p4")
    ok("p4 finish")
}).then(e=>{
    console.log("the res is "+e)
    return{then(ok1,ng1){
        // ok1("this is ok1")
        ng1("this is ng1")
    }}
}).then(e=>{
    console.log("the res is "+e)
}).catch(e=>{
    console.log("the res is "+e)
})

• 通过return then的方式，同时将ng和ok的case 分别进行处理

另一种写法如下

/**
 * this is p5
 * the res exp is this is ng2 
 */
var p_5=new Promise((ok,ng)=>{
    console.log("this is p5")
    ok("p5 finish")
}).then(e=>{
    return new Promise((ok2,ng2)=>{
        // ok2("this is ok2")
        ng2("this is ng2")
    })
}).then(e=>{
    console.log("the res is "+e)
    return new Promise((ok,ng)=>{
        ok("hhh")
        ng("ng")
    })
}).then(e=>{
    console.log(e)
}).catch(e=>{
    console.log("the res exp is "+e)
})

从上也看到多个链式调用的情况下，可以在最后一个之后添加一个catch

await/async

基础

/**
 * async 标识的函数，默认会返回Promise 对象，可以直接在调用函数后使用then
 * the res is this is async promise
 */
async function p_6(){
    return "this is async promise"
}

p_6().then(e=>{
    console.log("the res is "+e)
})

• async 的标识的直接当作promise 对象处理即可，异常处理在下面会讲

await关键字

基础

/**
 * await 关键字在async的函数内部使用，可用于代替then,更便于理解
 */
/**
 * 用于提供演示函数
 * @param {时间间隔} interval 
 * @returns 
 */
function timeoutPromise(interval) {
    return new Promise((resolve, reject) => {
        setTimeout(function () {
            resolve("done");
        }, interval);
    });
};

async function p_7() {
    console.log("begin time " + Date())
    res1 = await timeoutPromise(1000)
    res2 = await timeoutPromise(1000)
    res3 = await timeoutPromise(1000)
    console.log("end time " + Date())
    return (res1 + " " + res2 + " " + res3)
}

p_7().then(e => {
    console.log("the res is " + e)
})

/*
* begin time Mon Feb 07 2022 00:04:40 GMT+0800 (GMT+08:00)
* end time Mon Feb 07 2022 00:04:43 GMT+0800 (GMT+08:00)
* the res is done done done
* 
*/

• 当内部有多个await时，如上在运行的结果上看可以发现是同步完成的，async 内await标志的会顺序执行结束，最终3s

先初始化再运行，让函数内部异步运行

function timeoutPromise(interval) {
    return new Promise((resolve, reject) => {
        setTimeout(function () {
            resolve("done");
        }, interval);
    });
};

async function p_7() {
    console.log("begin time " + Date())
    const t1 = timeoutPromise(1000)
    const t2 = timeoutPromise(1000)
    const t3 = timeoutPromise(1000)

    res1 = await t1
    res2 = await t2
    res3 = await t3

    console.log("end time " + Date())
    return (res1 + " " + res2 + " " + res3)
}

p_7().then(e => {
    console.log("the res is " + e)
})

/**
 * begin time Mon Feb 07 2022 00:10:57 GMT+0800 (GMT+08:00)
 * end time Mon Feb 07 2022 00:10:58 GMT+0800 (GMT+08:00)
 * the res is done done done
 * 可以看到用时1s，是异步运行了
 */

异常处理

调用时处理

/**
 * 在返回的promise 对象中进行异常处理(Promise.reject 不用return直接生效异常,
 * await Promise.resolve 则一定要在前面加return 不然没有效果)
 * the res exp is fail the job
 */
async function p_8(){
    // return await Promise.resolve("finish the job")
    
    await Promise.reject("fail the job")
}

p_8().then(e=>{
    console.log("the res is "+e)
}).catch(e=>{
    console.log("the res exp is "+e)
})

async 函数内处理

/**
 * 在函数内部进行异常处理
 * fail the job 1
 * the res exp is fail the job 2 
 * the res is undefined
 */
async function p_9(){
    try{
    await Promise.resolve(console.log("fail the job 1"))
    await Promise.reject("fail the job 2")
    await Promise.resolve(console.log("fail the job 3"))
    return "this is res "
    }catch(e){
        console.log("the res exp is "+e)
    }
}

p_9().then(e=>{
    console.log("the res is "+e)
}).catch(e=>{
    console.log("the res exp is "+e)
})

• 从上面也可以看到在函数内处理后，then调用时就获取不到异常了。

参考

async和await:让异步编程更简单
JavaScript Promise链式调用（二）
Promise.resolve()详解
前端必备：从头开始，搞懂Promise之Promise基础
Promise