await 后面接的是promise,await语句下面(注意:不是await后面,而是await所在语句的下面,即下行以后)的代码就相当在promise.then()里面执行,
有文章说 await后面是返回的一个promise的resolve/reject的结果,我未证实,如果是这样,那await简直太好用了,还可以返回reject的值
await 通过变通“=”的含义,将左值等于右边Promise对象中resolve的值,以此方法巧妙的将以前只能层层嵌套写进里面等待的异步操作,变成了常规的按顺序执行的语句,真是太聪明了1、首先需要理解async 和 await的基本含义

async 是一个修饰符,async 定义的函数会默认的返回一个Promise对象resolve的值,因此对async函数可以直接进行then操作,返回的值即为then方法的传入函数

// 0. async基础用法测试

async function fun0() {
console.log(1)
return 1
} fun0().then( x => { console.log(x) }) // 输出结果 1, 1, async function funa() {
console.log('a')
return 'a'
} funa().then( x => { console.log(x) }) // 输出结果a, a, async function funo() {
console.log({})
return {}
} funo().then( x => { console.log(x) }) // 输出结果 {} {} async function funp() {
console.log('Promise')
return new Promise(function(resolve, reject){
resolve('Promise')
})
} funp().then( x => { console.log(x) }) // 输出promise promise

await 也是一个修饰符,

await 关键字 只能放在 async 函数内部, await关键字的作用 就是获取 Promise中返回的内容, 获取的是Promise函数中resolve或者reject的值
// 如果await 后面并不是一个Promise的返回值,则会按照同步程序返回值处理

//  await 关键字 只能放在 async 函数内部, await关键字的作用 就是获取 Promise中返回的内容, 获取的是Promise函数中resolve或者reject的值
// 如果await 后面并不是一个Promise的返回值,则会按照同步程序返回值处理,为undefined
const bbb = function(){ return 'string'} async function funAsy() {
const a = await 1
const b = await new Promise((resolve, reject)=>{
setTimeout(function(){
resolve('time')
}, 3000)
})
const c = await bbb()
console.log(a, b, c)
} funAsy() // 运行结果是 3秒钟之后 ,输出 1, time , string,
// 2.如果不使用promise的方法的话

function log2(time) {
setTimeout(function(){
console.log(time)
return 1
}, time)
} async function fun1() {
const a = await log2(5000)
const b = await log2(10000)
const c = log2(2000)
console.log(a)
console.log(1)
} fun1() // 以上运行结果为: 立刻输出undefined 立刻输出1 2秒后输出2000 5秒后输出5000 10秒后输出10000

2、那么由此看来async / await的综合用法如下

// 1.定义一个或多个普通函数,函数必须返回Promise对象,如果返回其他类型的数据,将按照普通同步程序处理

function log(time) {
return new Promise((resolve, reject)=> {
setTimeout(function(){
console.log(time)
resolve()
}, time)
})
} async function fun() {
await log(5000)
await log(10000)
log(1000)
console.log(1)
} fun()
// 3. async / await的重要应用 

const asy = function(x, time) {
return new Promise((resolve, reject) =>{
setTimeout(()=>{
resolve(x)
}, time)
})
} const add = async function() {
const a = await asy(3, 5000)
console.log(a)
const b = await asy(4, 10000)
console.log(b)
const c = await asy(5, 15000)
console.log(a,b,c)
const d = a + b +c
console.log(d)
} add(); // 5秒后输出3 又10秒后输出4 又15秒后输出5 然后立刻输出3,4,5,然后输出12

理解async 和 await的更多相关文章

  1. Ext JS学习第十六天 事件机制event(一) DotNet进阶系列(持续更新) 第一节:.Net版基于WebSocket的聊天室样例 第十五节:深入理解async和await的作用及各种适用场景和用法 第十五节:深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G

    code&monkey   Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...

  2. C# 多线程(18):一篇文章就理解async和await

    目录 前言 async await 从以往知识推导 创建异步任务 创建异步任务并返回Task 异步改同步 说说 await Task 说说 async Task 同步异步? Task封装异步任务 关于 ...

  3. 第十五节:深入理解async和await的作用及各种适用场景和用法

    一. 同步VS异步 1.   同步 VS 异步 VS 多线程 同步方法:调用时需要等待返回结果,才可以继续往下执行业务 异步方法:调用时无须等待返回结果,可以继续往下执行业务 开启新线程:在主线程之外 ...

  4. 理解async和await

    async 是“异步”的简写,而 await 可以认为是 async wait 的简写. 所以应该很好理解 async 用于申明一个 function 是异步的,而 await 用于等待一个异步方法执 ...

  5. 深入理解async和await的作用及各种适用场景和用法

    https://www.cnblogs.com/yaopengfei/archive/2018/07/02/9249390.html https://www.cnblogs.com/xianyudot ...

  6. async和await浅析

    要理解async和await的用法,首先要了解Task相关知识,这里不做说明,因为这不是本文的重点. 如果你已经对Task很了解,那么如何使用async和await,在此主要总结了以下三点: 只有在a ...

  7. async和await用法

    原文:async和await用法 要理解async和await的用法,首先要了解Task相关知识,这里不做说明,因为这不是本文的重点. 如果你已经对Task很了解,那么如何使用async和await, ...

  8. 那些年我们一起追逐的多线程(Thread、ThreadPool、委托异步调用、Task/TaskFactory、Parallerl、async和await)

    一. 背景 在刚接触开发的头几年里,说实话,根本不考虑多线程的这个问题,貌似那时候脑子里也有没有多线程的这个概念,所有的业务都是一个线程来处理,不考虑性能问题,当然也没有考虑多线程操作一条记录存在的并 ...

  9. async和await用法(Task)

    原文:async和await用法 要理解async和await的用法,首先要了解Task相关知识,这里不做说明,因为这不是本文的重点. 如果你已经对Task很了解,那么如何使用async和await, ...

  10. C# 中 async 和 await 的基本使用

    C# 中 async 和 await 的基本使用 前言 经常在 C# 的代码中看到以 Async 结尾的方法,大概知道意为异步方法,但不知道怎么使用,也不知道如何定义. 对于"同步" ...

随机推荐

  1. Git ignore 忽略文件不起作用

    前提:拉取了项目上的代码,或者自己本地已经提交过了的文件.然后在 .gitignore 文件中添加了过滤,但是不管用,还是可以追踪 解决方案: 1.先删除本地的文件(可以备份到其他文件夹外) 2.然后 ...

  2. yb课堂 实战之Mybatis打通Mysql数据库 《二》

    配置mybatis连接Mysql数据库 server.port=8081 # ========================数据库相关配置===================== spring.d ...

  3. SpringBoot自定义全局异常返回页面

    返回自定义异常界面,需要引入thymeleaf依赖(非必须,如果是简单的html界面则不用) <dependency> <groupId>org.springframework ...

  4. Oracle ROW_NUMBER() OVER()函数用法详解 (分组排序 例子多)

    转载☞:https://blog.csdn.net/qq_25221835/article/details/82762416 ROW_NUMBER 语法 语法格式:row_number() over( ...

  5. Linux自己制作rpm包

    制作rpm包 由源码包---->rpm包 安装制作rpm包工具包rpm-build 在制作过程中需要源码包和配置文件 rpmbuild制作rpm包的原理: 1.首先rpmbuild会先将源码包进 ...

  6. [oeasy]python0135_命名惯用法_name_convention

    命名惯用法 回忆上次内容 上次 了解了isidentifier的细节 关于 关键字 关于 下划线   如何查询 变量所指向的地址? id   如何查询 已有的各种变量? locals   如果 用一个 ...

  7. oeasy教您玩转linux010206toilet

    我们来回顾一下 上一部分我们都讲了什么? 用apt查询并下载了figlet 玩了一下字符画 设置了字符画的字体 但是没有修改颜色 这次我们来找找另一个命令toilet apt search toile ...

  8. CF452C 题解

    洛谷链接&CF 链接 题目简述 有 \(m \times n\) 张牌,有 \(n\) 个种类,每个种类有 \(m\) 张,现在抽一张放回,再抽一张,求这张牌与第一张抽出的牌种类相同的概率. ...

  9. python+selenium基础之XPATH定位(第一篇)

    世界上最远的距离大概就是明明看到一个页面元素站在那里,但是我却定位不到!! selenium定位元素的方法有很多种,像是通过id.name.class_name.tag_name.link_text等 ...

  10. .NET TCP、UDP、Socket、WebSocket

    做.NET应用开发肯定会用到网络通信,而进程间通信是客户端开发使用频率较高的场景. 进程间通信方式主要有命名管道.消息队列.共享内存.Socket通信,个人使用最多的是Sokcet相关. 而Socke ...