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 相关文章推荐
经验几则 推荐
Sep 05 Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
May 06 Javascript
文字不间断滚动(上下左右)实例代码
Apr 21 Javascript
jQuery实现炫酷的鼠标轨迹特效
Feb 01 Javascript
JS常用算法实现代码
Nov 14 Javascript
js实现1,2,3,5数字按照概率生成
Sep 12 Javascript
Vee-Validate的使用方法详解
Sep 22 Javascript
浅谈Vue.nextTick 的实现方法
Oct 25 Javascript
vue 解决循环引用组件报错的问题
Sep 06 Javascript
vue中v-for循环给标签属性赋值的方法
Oct 18 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
Jan 08 Javascript
浅析JavaScript 函数防抖和节流
Jul 13 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:风雨欲来 路在何方?
2006/10/09 PHP
zend framework框架中url大小写问题解决方法
2014/08/19 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
IE6 fixed的完美解决方案
2011/03/31 Javascript
jQuery简单实现遍历数组的方法
2015/04/14 Javascript
JS中完美兼容各大浏览器的scrolltop方法
2015/04/17 Javascript
javascript实现根据时间段显示问候语的方法
2015/06/18 Javascript
Javascript的表单与验证-非空验证
2016/03/18 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
2017/12/01 Javascript
微信小程序自定义prompt组件步骤详解
2018/06/12 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
[19:15]DK战队纪录片
2014/09/02 DOTA
python中split方法用法分析
2015/04/17 Python
理解Python垃圾回收机制
2016/02/12 Python
浅谈Python中函数的参数传递
2016/06/21 Python
Python实现KNN(K-近邻)算法的示例代码
2019/03/05 Python
TensorFlow梯度求解tf.gradients实例
2020/02/04 Python
python标准库OS模块函数列表与实例全解
2020/03/10 Python
python 星号(*)的多种用途
2020/09/21 Python
微软开源最强Python自动化神器Playwright(不用写一行代码)
2021/01/05 Python
Booking.com西班牙:全球酒店预订
2018/03/30 全球购物
Big Green Smile法国:领先的英国有机和天然产品在线商店
2021/01/02 全球购物
利用指针变量实现队列的入队操作
2012/04/07 面试题
面向对象概念面试题(.NET)
2016/11/04 面试题
创先争优制度
2014/01/21 职场文书
单位成立周年感言
2014/01/26 职场文书
大学中国梦演讲稿
2014/04/23 职场文书
医院领导班子四风对照检查材料
2014/09/27 职场文书
焦裕禄纪念馆观后感
2015/06/09 职场文书
工作经历证明范本
2015/06/15 职场文书
五一晚会主持词
2015/07/01 职场文书
2016五一劳动节慰问信
2015/11/30 职场文书
Python 制作自动化翻译工具
2021/04/25 Python
Vue h函数的使用详解
2022/02/18 Vue.js
Python实现Hash算法
2022/03/18 Python
vue判断按钮是否可以点击
2022/04/09 Vue.js