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

王笑朝发布于2019-08-26 12:17 / 1727人阅读

摘要：但是中的这种情况与抽象反应器模式如何描述完全不同。在处理一个阶段之后并且在移到下一个队列之前，事件循环将处理两个中间队列，直到中间队列中没有剩余的项目。如果没有任务则循环退出，每一次队列处理都被视为事件循环的一个阶段。

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();

欢迎提意见和star

如果有不对的可以提issue
如果觉得对你有帮助可以star下
github

参考文档

这一系列的文档讲的很不错

https://juejin.im/post/5b777f...

讲promise，setTimeout优先级的；nodejs中事件循环中的任务优先级

https://jsblog.insiderattack....

developers.google.com域名下面的文档还是很有质量的，其中会比较全面的介绍怎么去用promise和async/await

https://developers.google.com...

云服务器 GPU云服务器 linux &gt&gt用法 async await html&ltbr&gt和 js的 &amp标签

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108414.html

setTimeout&amp;Promise&amp;Async之间的爱恨情仇

摘要：但是提出标准，允许脚本创建多个线程，但是子线程完全受主线程控制。只是将事件插入了任务队列，必须等到当前代码执行栈执行完，主线程才会去执行它指定的回调函数。之后全局上下文进入函数调用栈。 setTimeout 一、setTimeout 初现定义：setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。语法： setTimeout(code, millisec...

Half 2019-08-23 15:31 评论0 收藏0
async &amp; await &amp; promise

摘要：最近项目中用的比较多，所以特地去了解，模仿一下实现先来看看使用的方法通过是通过使用生成器配合方法模拟的一个同步操作，这个技术有效的避免了传统回调和形成的回调地狱。最近项目中 asyn & await 用的比较多，所以特地去了解，模仿一下实现~ 先来看看使用 async & await 的方法 async function d () { try { const a = a...

Dean 2019-08-22 17:31 评论0 收藏0
async/await 和 Promise 的用例&amp;关系

摘要：和的关系和的关系非常的巧妙，必须在内使用，并装饰一个对象，返回的也是一个对象。的会使得的代码节点自动抛出相应的异常，终止向下继续执行。示例方法内无节点没有修饰的方法内有节点注意内的对节点的作用。假设我们有三个请求，req1，req2, req3，三个请求后者依赖前者的请求结果。我们先使用Promise封装一个异步请求的方法。 Promise 异步请求使用Promise可以非常容易的...

y1chuan 2019-08-26 18:37 评论0 收藏0
async &amp; await (译)

摘要：的出现，让我们可以走出回调地狱，着实惊艳。我已经开始使用里的和关键字来简化的处理。异步任务在这个例子是执行之后，一直在执行完成才继续下一个任务并没有产生阻塞。最后这个函数处理了返回值并且返回了一个对象。依然很棒，但和使得它可维护性更好。 JavaScript Promises的出现，让我们可以走出回调地狱，着实惊艳。Promises 允许我们更好的引入和处理异步任务，虽然如此，但引入好...

The question 2019-08-22 11:07 评论0 收藏0
js异步从入门到放弃(实践篇) — 常见写法&amp;面试题解析

摘要：前文该系列下的前几篇文章分别对不同的几种异步方案原理进行解析，本文将介绍一些实际场景和一些常见的面试题。流程调度里比较常见的一种错误是看似串行的写法，可以感受一下这个例子判断以下几种写法的输出结果辨别输出顺序这类题目一般出现在面试题里。前文该系列下的前几篇文章分别对不同的几种异步方案原理进行解析，本文将介绍一些实际场景和一些常见的面试题。(积累不太够，后面想到再补) 正文流程调度...

Awbeci 2019-08-23 18:05 评论0 收藏0