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 相关文章推荐
js 弹出框 替代浏览器的弹出框
Oct 29 Javascript
jQuery实现模拟marquee标签效果
Jul 14 Javascript
jQuery实现的经典滑动门效果
Sep 22 Javascript
AngularJS ng-mousedown 指令
Aug 02 Javascript
jQuery异步提交表单的两种方式
Sep 13 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
Jan 03 Javascript
Vue计算属性的使用
Aug 04 Javascript
webpack写jquery插件的环境配置
Dec 21 jQuery
Vue中 key keep-alive的实现原理
Sep 18 Javascript
javascript设计模式之装饰者模式
Jan 30 Javascript
ElementUI 修改默认样式的几种办法(小结)
Jul 29 Javascript
js实现无缝轮播图插件封装
Jul 31 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实现维护文件代码
2007/06/14 PHP
PHP笔记之:基于面向对象设计的详解
2013/05/14 PHP
destoon实现首页显示供应、企业、资讯条数的方法
2014/07/15 PHP
PHP下SSL加密解密、验证、签名方法(很简单)
2020/06/28 PHP
详解PHP函数 strip_tags 处理字符串缺陷bug
2017/06/11 PHP
PHP实现动态获取函数参数的方法示例
2018/04/02 PHP
实例讲解PHP中使用命名空间
2019/01/27 PHP
Laravel Validator 实现两个或多个字段联合索引唯一
2019/05/08 PHP
js版本A*寻路算法
2006/12/22 Javascript
基于jquery的15款幻灯片插件
2011/04/10 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
不到30行JS代码实现Excel表格的方法
2014/11/15 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
2015/08/08 Javascript
实现高性能JavaScript之执行与加载
2016/01/30 Javascript
Vue官方文档梳理之全局配置
2017/11/22 Javascript
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
2019/06/21 Javascript
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
Python 字符串中的字符倒转
2008/09/06 Python
在Django的URLconf中进行函数导入的方法
2015/07/18 Python
破解安装Pycharm的方法
2018/10/19 Python
python遍历文件夹找出文件夹后缀为py的文件方法
2018/10/21 Python
python实现图片筛选程序
2018/10/24 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
scrapy-redis源码分析之发送POST请求详解
2019/05/15 Python
Python通用函数实现数组计算的方法
2019/06/13 Python
jupyter notebook 实现matplotlib图动态刷新
2020/04/22 Python
语文教学随笔感言
2014/02/18 职场文书
《小小雨点》教学反思
2014/02/18 职场文书
事业单位考察材料范文
2014/12/25 职场文书
幼儿园大班个人总结
2015/02/28 职场文书
毕业设计致谢语
2015/05/14 职场文书
情人节单身感言
2015/08/03 职场文书
Java实现注册登录跳转
2022/06/16 Java/Android