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. 韦东山IMX6ULL Linux开发板基于Buildroot系统QT应用环境配置开发运行

    @ 目录 一. 编译系统 1.设置交叉编译工具链 2.编译系统 二. QT下载 1.安装 Qtcreator 2.创建第一个程序 3.配置 QtCreator 开发环境 4.移植QT程序到开发板 一. ...

  2. virtualbox ubuntu拓展存储空间

    1. 关闭虚拟机,右键点击virtualbox图标,选择打开文件位置,记录下路径: 2. 找到需要拓容的ubuntu虚拟机的.vdi文件,记录下路径: 3. windows命令行转到virtualbo ...

  3. JVM是如何创建一个对象的?

    哈喽,大家好,我是世杰. 本文我为大家介绍面试官经常考察的「Java对象创建流程」 照例在开头留一些面试考察内容~~ 面试连环call Java对象创建的流程是什么样? JVM执行new关键字时都有哪 ...

  4. 求之不得的 Java 文档教程大汇总!

    已收录至免费编程资源大全:https://github.com/liyupi/free-programming-resources 大家好,我是鱼皮,今天分享几个 GitHub 上非常实用的 Java ...

  5. [oeasy]python0074_修改字体背景颜色_background_color_背景色

    修改背景色 回忆上次内容 上次将asciiart和颜色一起来玩 7 种基本色 变化多端 不过到目前为止 改的 都是前景色 背景色可以修改吗? 重温参数 具体动手试试 print("\033[ ...

  6. 【2024最新】4000字搞懂sora!一张脑图贯穿!

    话不多说,上图! 下面就是对sora的具体阐释: Sora是OpenAI推出的一款革命性的视频生成模型,能够根据文本指令.静态图像或视频生成长达60秒的完整视频.这一模型基于扩散式模型和自注意力深度学 ...

  7. [rCore学习笔记 07]移除标准库依赖

    改造Rust hello world 移除println!宏 rustc添加对裸机的支持 rustup target add riscv64gc-unknown-none-elf detail rus ...

  8. 一个基于 SourceGenerator 生成 从 dbReader转换为 class 数据的性能测试实验

    好奇 SourceGenerator 出现开始,好几年了,虽然一直好奇用SourceGenerator 生成代码 与 emit 等动态生成的代码会有多少差距, 但是一直特别懒,不想搞 其实 dappe ...

  9. 【Zookeeper】03 单机操作

    访问Zookeeper 开启Zookeeper服务程序: ./zkServer.sh start 启动Zookeeper客户端进行访问: ./zkCli.sh 运行打印: [root@VM-0-7-c ...

  10. 什么是3D扫描技术?

    相关: https://www.bilibili.com/video/BV1fN4y1z7uD/?vd_source=f1d0f27367a99104c397918f0cf362b7 接触式:就是使用 ...