Promise && async/await的理解和用法

最新推荐文章于 2024-01-16 17:53:14 发布

weixin_34354945

最新推荐文章于 2024-01-16 17:53:14 发布

阅读量126

点赞数

文章标签：数据结构与算法

原文链接：https://segmentfault.com/a/1190000016091553

版权

Promise && async/await的理解和用法

为什么需要promise（承诺）这个东西

在之前我们处理异步函数都是用回调这个方法，回调嵌套的时候会发现阅读性和调试的难度会增加很多；

怎么理解promise

想象一下，你把一个任务交给一个不错的小伙子，他叫承诺；不用担心你交给他的任务会丢失，他总会返回的，做成功了resolve，失败了reject；

var promise = new Promise((resolve, reject) =>{
    //交给给“承诺”同学一个异步任务
    setTimeout(()=>{
        if(true){
            // 成功了，返回params
            resolve('params')
        }else{
            // 失败了，返回error
            reject('error')
        }
    }, 1000) 
})

// 上面是给承诺一个任务，下面是"承诺"同学的返回
promise.then((res)=>{
    console.log(res)
}).catch((rej)=>{   
    console.log(res)
})

怎么使用promise

实际情况中，异步的场景没有那么简单，你可以会遇到下面这些场景

“串行应用场景”下的处理方案

let promise = new Promise((res, rej)=>{
    asyncFunc('promise', 1000, res, rej)
}) 

promise.then(res=>{
    console.log(res);
    return new Promise((res, rej)=>{
        asyncFunc('second', 2000, res, rej)
    })
}).then(res=>{
    console.log(res);
    return new Promise((res, rej)=>{
        asyncFunc('third', 1000, res, rej)
    })
    // throw 'oh, no!';
}).then(res=>{
    console.log(res);
    console.log('endinggggggg')
}).catch(err=>{
    console.log('catch', err)
})

“并行应用场景”的处理方案(即在所有的异步操作完成之后执行)

let promise1 = new Promise((res, rej)=>{
    asyncFunc('promise1', 1000, res, rej)
})

let promise2 = new Promise((res, rej)=>{
    asyncFunc('promise2', 2000, res, rej)
})

let promise3 = new Promise((res, rej)=>{
    asyncFunc('promise3', 1000, res, rej)
})

var promiseAll = Promise.all([promise1, promise2, promise3])
promiseAll.then(res =>{
    console.log('最终的结果', res)
}).catch(err =>{
    console.log('catch', err);
})

“竞速模式下”，如字面意思，只要是哪一个提前完成了。就表示整个状态处理完成状态；这个场景可以发散成如果是超过了3s我就不去做这件事情了

let promise1 = new Promise((res, rej)=>{
    asyncFunc('promise1', 1000, res, rej, true)
})

let promise2 = new Promise((res, rej)=>{
    asyncFunc('promise2', 2000, res, rej, true)
})

let promise3 = new Promise((res, rej)=>{
    asyncFunc('promise3', 1000, res, rej)
})

// 1000s的任务完成了，就直接返回promise1了
var promiseRace = Promise.race([promise1, promise2, promise3])
promiseRace.then(res =>{
    console.log('最终的结果', res)
}).catch(err =>{
    console.log('catch', err);
})

js是单线程，promise，setTimeout的执行优先级

讲这一块的东西就得讲讲nodejs的事件处理机制；
事件队列应该是一个数据结构，所有的事情都被事件循环排队和处理，直到队列为空。但是Node中的这种情况与抽象反应器模式如何描述完全不同。
下面讲的东西只适合V8；

NodeJS中有许多队列，其中不同类型的事件在自己的队列中排队。

在处理一个阶段之后并且在移到下一个队列之前，事件循环将处理两个中间队列，直到中间队列中没有剩余的项目。

定义：

有四种主要类型，由libuv事件循环处理；

过期的定时器和间隔队列 - （比如使用setTimeout,setInterval）;
IO事件队列 - 已完成的IO事件
Immediates队列 - 使用setImmediate功能添加回调
关闭处理程序队列 - 任何close事件处理程序

还有2个中间队列，不属于libuv本身的一部分，但是是nodejs的一部分；

Next Ticks Queue - 使用process.nextTick 函数添加回调；（优先级更高）
其他微型任务队列 - 包括其他微型任务，例如已经解决的承诺回调；

如何工作的：

上图是node中libuv模块在处理异步I/O操作的流程图；

Node通过定时器检查队列中的任何过期定时器来启动事件循环，并在每一个步骤中遍历每一个队列。如果没有任务则循环退出，每一次队列处理都被视为事件循环的一个阶段。特别有意思的是中间红色的队列，每次阶段都会优先去处理中间队列的任务。然后再去处理其他的队列。

什么是async/await

async/await 可以是Generator和promise结合实现的；

注意核心点：

asnyc 函数总是返回一个Promise对象，不论函数是否return Promise；
await 后面跟着Promise对象，如果不是Promise对象，也会被封装成Promise；
async/await 和Promise对象在本质上是一样的

其他note点

await的任何内容都通过Promise.resolve()传递，这样就可以安全的await非原生Promise；
构造函数以及getter/settings方法不能是异步的；
尽管编写的是同步的代码，但是也不要错失并行执行的机会，不然你需要消耗等待的性能丧失；
Babel REPL 说起来很有趣。试试就知道。

怎么用async/await

实际情况中，异步的场景没有那么简单，你可以会遇到下面这些场景

场景：只有一个await并且 resolve

const delay = timeout => new Promise(resolve => setTimeout(resolve, timeout));
async function f(){
    await delay(1000);
    await delay(2000);
    await delay(3000);
    return 'done'
}
f().then(v=> console.log(v));

场景：只有一个await并且 reject

let a;
async function g(){
    await Promise.reject('error');
    a = await 1;
}
g().then(v=>console.log(v)).catch(err=>console.log(err));

场景：有多个await，可以用try/catch

let a ;
async function g(){
    try{
        await Promise.reject('error')
    }catch(err){    
        console.log(err)
    }
    a= await 1;
    return a;
}

g().then(v=>console.log(v)).catch(err=>console.log(err));

场景：等待平行任务

async function series(){
    const await1 = delay(1000);
    const await2 = delay(1000);
    await await1;
    await await2;
    return 'done'
}
series();