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 相关文章推荐
学习YUI.Ext基础第一天
Mar 10 Javascript
ext中store.load跟store.reload的区别示例介绍
Jun 17 Javascript
js调试系列 初识控制台
Jun 18 Javascript
js 获取元素在页面上的偏移量的方法汇总
Apr 13 Javascript
Node.js程序中的本地文件操作用法小结
Mar 06 Javascript
瀑布流的实现方式(原生js+jquery+css3)
Jun 28 Javascript
原生js实现查询天气小应用
Dec 09 Javascript
Angular在一个页面中使用两个ng-app的方法
Feb 20 Javascript
Three.js基础学习教程
Nov 16 Javascript
详解Js里的for…in和for…of的用法
Mar 28 Javascript
Angular如何由模板生成DOM树的方法
Dec 23 Javascript
vue或react项目生产环境去掉console.log的操作
Sep 02 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写的获取各搜索蜘蛛爬行记录代码
2012/08/21 PHP
PHP中使用FFMPEG获取视频缩略图和视频总时长实例
2014/05/04 PHP
WordPress开发中的get_post_custom()函数使用解析
2016/01/04 PHP
PHP使用数组依次替换字符串中匹配项
2016/01/08 PHP
javascript for循环从入门到偏门(效率优化+奇特用法)
2012/08/01 Javascript
javascript setTimeout和setInterval计时的区别详解
2013/06/21 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
2013/09/06 Javascript
在javaScript中关于submit和button的区别介绍
2013/10/20 Javascript
JavaScript实现找出字符串中第一个不重复的字符
2014/09/03 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
2014/09/29 Javascript
深入理解jquery跨域请求方法
2016/05/18 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
2016/10/26 Javascript
Javascript 制作图形验证码实例详解
2016/12/22 Javascript
Javascript基础回顾之(一) 类型
2017/01/31 Javascript
jQuery读取XML文件的方法示例
2017/02/03 Javascript
react native与webview通信的示例代码
2017/09/25 Javascript
JavaScript 作用域实例分析
2019/10/02 Javascript
JavaScript 判断浏览器是否是IE
2021/02/19 Javascript
python多线程操作实例
2014/11/21 Python
Python中有趣在__call__函数
2015/06/21 Python
详解关于Django中ORM数据库迁移的配置
2018/10/08 Python
python 提取tuple类型值中json格式的key值方法
2018/12/31 Python
python 根据字典的键值进行排序的方法
2019/07/24 Python
python 串口读取+存储+输出处理实例
2019/12/26 Python
基于Python词云分析政府工作报告关键词
2020/06/02 Python
新手常见Python错误及异常解决处理方案
2020/06/18 Python
Daisy London官网:英国最大的首饰集团IBB旗下
2019/02/28 全球购物
为女性购买传统的印度服装和婚纱:Kalkifashion
2019/07/22 全球购物
车间班组长岗位职责
2013/11/13 职场文书
实习教师自我鉴定
2013/12/12 职场文书
医药代表个人求职信范本
2013/12/19 职场文书
音乐之声音乐广播稿
2014/09/10 职场文书
怎样写辞职信
2015/02/27 职场文书
JavaScript高级程序设计之基本引用类型
2021/11/17 Javascript
python pygame 开发五子棋双人对弈
2022/05/02 Python