async与await

1.基本概念:async await号称异步的终极解决方案,async await之后再无回调.

2.基本使用:

async用于修饰一个函数, 表示一个函数是异步的.

如果async函数内没有await, 那么async没有意义的, 全是同步的内容.

只有遇到了await开始往下, 才是异步的开始.

我们用代码分析一下:

async与await_第1张图片

分析:第一步先输出1,遇到了函数fn(),并且下方调用,所以输出4,async 遇到await变成了异步的,所以等待执行,先输出3,最后输出2.验证结果:

async与await_第2张图片 

await 要用在 async 函数中

await 后面一般会跟一个promise对象, await会阻塞async函数的执行, 直到等到 promise成功的结果(resolve的结果) .

我们再来一个列子继续分析:

async与await_第3张图片

 我们一起来分析一下:

利用下面这张图:

async与await_第4张图片

 

首先先输出1,new Promise()被实例化了,函数体里的代码会立即执行,所以输出2,但由于碰到了resolve,resolve是异步的,所以他跑到了任务队列中.

接着往下执行,接着输出3,因为成功的结果then也已经跑到了任务队列中,所以直接输出7.

接着再把任务队列中的then拿出来,输出结果5,最后执行成功的结果res,'成功',控制台我们来验证一下:

async与await_第5张图片

接着我们再来分析一道题:

async与await_第6张图片 

来分析一下执行过程:

首先先输出1,接着该执行函数,但是没有被调用,所以不会执行,所以接下来输出6.

接下来轮到textOne(),相当于函数预解析,所以接下来会执行 textOne(),所以输出8.

接下来轮到createObj()这个函数,在这他调用了这个函数,所以上边的createObj()函数会执行,接着输出3,但由于内部resolve是异步的,会被放进任务队列中,所以接下来会输出4.

5由于在return已经执行完了,所以并不会输出.

紧接着会往下进行,输出7,因为还有同步代码没有执行完,所以res的成功结果还在任务队列中等待,接下来输出10,这次同步任务已经执行完毕.

这回轮到异步任务resolve开始执行,他的响应结果在res中,所以会输出'成功',紧随其后会输出9.

我们看下控制台输出结果,验证一下我们的答案:

async与await_第7张图片

 

给大家准备了一些干货:

同步的代码都

1. async和await是一对关键字,必须成对出现

2. async用于修饰一个函数,代表该函数是一个异步函数

 注意:只有await往后的才是异步代码

 3. await用于等待一个值,通常是一个promise

4. await后面是一个普通值,那会直接返回该值本身,如果await后面是一个promise,会返回promise成功的结果 .

明天我们继续async和await这方面的知识学习,不见不散!!!

你可能感兴趣的:(js,await,async,javascript)