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 相关文章推荐
IE bug table元素的innerHTML
Jan 11 Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&闭包&减缓全局空间污染
Nov 16 Javascript
Jquery index()方法 获取相应元素索引值
Oct 12 Javascript
javascript获取checkbox复选框获取选中的选项
Aug 12 Javascript
jQuery中的编程范式详解
Dec 15 Javascript
DOM节点删除函数removeChild()用法实例
Jan 12 Javascript
如何使用HTML5地理位置定位功能
Apr 27 Javascript
js过滤HTML标签完整实例
Nov 26 Javascript
微信小程序 数据绑定详解及实例
Oct 25 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
Nov 09 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
Jan 09 Javascript
vue中实现上传文件给后台实例详解
Aug 22 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的POSIX 函数以及进程测试的深入分析
2013/06/03 PHP
PHP类相关知识点实例总结
2016/09/28 PHP
php中序列化与反序列化详解
2017/02/13 PHP
php无限级评论嵌套实现代码
2018/04/18 PHP
JS图片无缝滚动(简单利于使用)
2013/06/17 Javascript
鼠标经过显示二级菜单js特效
2013/08/13 Javascript
将Datatable转化成json发送前台实现思路
2013/09/06 Javascript
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
2014/05/05 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
jQuery插件扩展操作入门示例
2017/01/16 Javascript
详解使用mpvue开发github小程序总结
2018/07/25 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
2018/11/05 Javascript
详解Vue底部导航栏组件
2019/05/02 Javascript
Smartour 让网页导览变得更简单(推荐)
2019/07/19 Javascript
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
vue 实现路由跳转时更改页面title
2019/11/05 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
2020/02/23 Javascript
swiper4实现移动端导航栏tab滑动切换
2020/10/16 Javascript
django自定义Field实现一个字段存储以逗号分隔的字符串
2014/04/27 Python
Python文件夹与文件的操作实现代码
2014/07/13 Python
用Python代码来解图片迷宫的方法整理
2015/04/02 Python
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
python对数组进行排序,并输出排序后对应的索引值方式
2020/02/28 Python
解决pyPdf和pyPdf2在合并pdf时出现异常的问题
2020/04/03 Python
PyCharm 在Windows的有用快捷键详解
2020/04/07 Python
OpenCV Python实现图像指定区域裁剪
2021/03/12 Python
CSS3中box-shadow的用法介绍
2015/07/15 HTML / CSS
美国家具网站:Cymax
2016/09/17 全球购物
extern在函数声明中是什么意思
2014/01/19 面试题
难忘的一课教学反思
2014/04/30 职场文书
李培根演讲稿
2014/05/22 职场文书
六查六看个人剖析材料
2014/10/14 职场文书
廉政文化进校园广播稿
2014/10/20 职场文书
古见同学有交流障碍症 第二季宣传CM公开播出
2022/04/11 日漫
Golang Web 框架Iris安装部署
2022/08/14 Python