Javascript的promise,async和await的区别详解


Posted in Javascript onMarch 24, 2022

终于把promise, async, await的区别和联系弄清楚了,看下面代码

写法1,2是promise的写法

写法6是async和await的写法

主要看第2种写法和第6中写法即可, 第2种写法是promise的典型写法,第6中写法是async, await的典型写法

// 以下三个请求依次执行
req1 = () => { return fetch("http://example.com/api/v1/get")}
req2 = () => { return fetch("http://example.com/api/v1/post")}
req3 = () => { return fetch("http://example.com/api/v1/delete")}
//写法1
req1().then(res=>{
    console.log("1: ",res)
    req2().then(res =>{
        console.log("2: ",res)
        req3().then(res =>{
            console.log("3: ",res)
        })
    })
})

// 写法2
req1().then(res =>{
    console.log("1: ", res)
    return req2()
})
.then(res =>{
    console.log("2: ", res)
    return req3()
})
.then(res =>{
    console.log("3: ", res)
})
// 写法3
function f1(){
    req1()
    req2()
    req3()
}
// 写法4
async  function f2(){
    await req1
    await req2
    await req3
}
// 写法5
async  function f3(){
    req1().then(res => {
        console.log("1:", res)
    })
    await f3_1()
}
async function f3_1(){
    req1().then(res => {
        console.log("2:", res)
    })
    await f3_2()
}
async function f3_2(){
    req2().then(res=>{
         console.log("3: ",res)
    })
}
// 写法6
ff()
async function ff(){
    await req1_good()
}
async function req1_good(){
    fetch("http://example.com/api/v1/get").then(res =>{
        console.log("1: ",res)
    })
    await req2_good()
}
async  function req2_good() {
    fetch("http://example.com/api/v1/post").then(res =>{
        console.log("2: ",res)
    })
    await req3_good()
}
async function req3_good() {
     fetch("http://example.com/api/v1/delete").then(res => {
         console.log("3: ",res)
     })
}
  • 最外层的async函数调用之后立即返回了,但是async还是里面还是在逐层执行
  • await的作用是等待其修饰的函数内部的所有await函数都执行完毕,
  • 从最外层启动一个async函数相当于go一个协程,await func 也相当于go 一个协程,不同在于await = go + waitgroup
  • await比promise高明的地方在于,promise在then里面调用另一个promise时,不得不return另一个promise再then, 或者在then中回调,但是await完全不需要
  • async是为了异步,await是为了异步+阻塞,缺一不可

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注三水点靠木的更多内容!   

Javascript 相关文章推荐
一个XML格式数据转换为图表的例子
Feb 09 Javascript
jQuery入门第一课 jQuery选择符
Mar 14 Javascript
匹配任意字符的正则表达式写法
Apr 29 Javascript
jquery异步调用页面后台方法‏(asp.net)
Mar 01 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
Oct 24 Javascript
JavaScript操作HTML DOM节点的基础教程
Mar 11 Javascript
js实现开启密码大写提示
Dec 21 Javascript
HTML5实现微信拍摄上传照片功能
Apr 21 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
May 09 Javascript
JavaScript 严格模式(use strict)用法实例分析
Mar 04 Javascript
区分vue-router的hash和history模式
Oct 03 Javascript
详解Node.js如何处理ES6模块
May 15 Javascript
一起来看看Vue的核心原理剖析
Mar 24 #Vue.js
手写Spirit防抖函数underscore和节流函数lodash
Mar 22 #Javascript
深入讲解Vue中父子组件通信与事件触发
Mar 22 #Vue.js
关于Vue中的options选项
Mar 22 #Vue.js
vue+echarts实现多条折线图
vue使用echarts实现折线图
浅谈Vue的computed计算属性
You might like
《PHP边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
PHP has encountered an Access Violation at 7C94BD02解决方法
2009/08/24 PHP
Fine Uploader文件上传组件应用介绍
2013/01/06 PHP
推荐5款跨平台的PHP编辑器
2014/12/25 PHP
支付宝接口开发集成支付环境小结
2015/03/17 PHP
PHP使用递归生成文章树
2015/04/21 PHP
使用Composer安装Yii框架的方法
2016/03/15 PHP
基于jQuery的获取标签名的代码
2012/07/16 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
2014/03/28 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
2014/05/20 Javascript
javascript实现省市区三级联动下拉框菜单
2015/11/17 Javascript
AngularJS 让人爱不释手的八种功能
2016/03/23 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
2016/11/25 Javascript
javascript事件的传播基础实例讲解(35)
2017/02/14 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
2020/09/27 Javascript
JavaScript原生数组函数实例汇总
2020/10/14 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
[01:10]DOTA2次级职业联赛 - EP战队宣传片
2014/12/01 DOTA
[36:05]完美世界DOTA2联赛循环赛 Forest vs DM 第一场 11.06
2020/11/06 DOTA
python+unittest+requests实现接口自动化的方法
2018/11/29 Python
Python实现深度遍历和广度遍历的方法
2019/01/22 Python
python django框架中使用FastDFS分布式文件系统的安装方法
2019/06/10 Python
python实现一行输入多个值和一行输出多个值的例子
2019/07/16 Python
PyCharm中关于安装第三方包的三个建议
2020/09/17 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
美国顶级品牌男士大码服装店:DXL
2017/08/30 全球购物
泰国办公用品购物网站:OfficeMate
2018/02/04 全球购物
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
如何设定的weblogic的热启动模式(开发模式)与产品发布模式
2012/09/08 面试题
销售队伍口号
2014/06/11 职场文书
2014年学生会工作总结
2014/11/07 职场文书
2014年银行柜员工作总结
2014/11/12 职场文书
小学生作文评语集锦
2014/12/25 职场文书
运动会加油稿30字
2015/07/21 职场文书
vue-cli4.5.x快速搭建项目
2021/05/30 Vue.js
SQL之各种join小结详细讲解
2021/08/04 MySQL