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 相关文章推荐
JavaScript 对话框和状态栏使用说明
Oct 25 Javascript
jquery 问答知识整理
Feb 11 Javascript
dojo学习第二天 ajax异步请求之绑定列表
Aug 29 Javascript
使用jQuery插件创建常规模态窗口登陆效果
Aug 23 Javascript
在JavaScript中实现类的方式探讨
Aug 28 Javascript
jQuery简单实现banner图片切换
Jan 02 Javascript
让checkbox不选中即将选中的checkbox不选中
Jul 11 Javascript
使用开源工具制作网页验证码的方法
Oct 17 Javascript
electron demo项目npm install安装失败的解决方法
Feb 06 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
Jul 19 Javascript
Vue 数据响应式相关总结
Jan 28 Vue.js
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
一起来看看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 获取一个月第一天与最后一天的代码
2010/05/16 PHP
关于php循环跳出的问题
2013/07/01 PHP
php根据操作系统转换文件名大小写的方法
2014/02/24 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
Linux环境下php实现给网站截图的方法
2016/05/03 PHP
golang与PHP输出excel示例
2016/07/22 PHP
PHP二维数组去重实例分析
2016/11/18 PHP
thinkPHP中配置的读取与C方法详解
2016/12/05 PHP
微信公众号实现会员卡领取功能
2017/06/08 PHP
用javascript作一个通用向导说明
2011/08/30 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
2013/04/01 Javascript
javascript中数组的冒泡排序使用示例
2013/12/18 Javascript
原生js和jquery中有关透明度设置的相关问题
2014/01/08 Javascript
纯js写的分页表格数据为json串
2014/02/18 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
2014/03/13 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
2014/06/09 Javascript
JS交换变量的方法
2015/01/21 Javascript
微信小程序 setData使用方法及常用错误解决办法
2017/05/11 Javascript
前端常见跨域解决方案(全)
2017/09/19 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
2017/09/21 Javascript
vue之debounce属性被移除及处理详解
2019/11/13 Javascript
vue实现简单学生信息管理
2020/05/30 Javascript
node中短信api实现验证码登录的示例代码
2021/01/20 Javascript
javascript实现下拉菜单效果
2021/02/09 Javascript
使用Python的Treq on Twisted来进行HTTP压力测试
2015/04/16 Python
Python使用Redis实现作业调度系统(超简单)
2016/03/22 Python
用python实现的线程池实例代码
2018/01/06 Python
解决Pycharm下面出现No R interpreter defined的问题
2018/10/29 Python
为什么从Python 3.6开始字典有序并效率更高
2019/07/15 Python
pytorch实现用Resnet提取特征并保存为txt文件的方法
2019/08/20 Python
Python笔记之工厂模式
2019/11/20 Python
python 基于DDT实现数据驱动测试
2021/02/18 Python
维多利亚的秘密官方旗舰店:VICTORIA’S SECRET
2018/04/02 全球购物
法人委托书的范本格式
2014/09/11 职场文书
团代会闭幕词
2015/01/28 职场文书
Angular性能优化之第三方组件和懒加载技术
2021/05/10 Javascript