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 发个判断字符串是否为符合标准的函数
Apr 27 Javascript
javascript实现面向对象类的功能书写技巧
Mar 07 Javascript
js 用CreateElement动态创建标签示例
Nov 20 Javascript
JavaScript实现图片轮播的方法
Jul 31 Javascript
javascript点击按钮实现隐藏显示切换效果
Feb 03 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
Jun 14 Javascript
图片懒加载插件实例分享(含解析)
Jan 09 Javascript
Vue单文件组件基础模板小结
Aug 10 Javascript
在vue中使用Autoprefixed的方法
Jul 27 Javascript
vue使用rem实现 移动端屏幕适配
Sep 26 Javascript
亲自动手实现vue日历控件
Jun 26 Javascript
javascript中call,apply,callee,caller用法实例分析
Jul 24 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中把对象转换为关联数组代码分享
2015/04/09 PHP
ThinkPHP5.0多个文件上传后找不到临时文件的修改方法
2018/07/30 PHP
Yii2框架加载css和js文件的方法分析
2019/05/25 PHP
JQuery 初体验(建议学习jquery)
2009/04/25 Javascript
Input 特殊事件onpopertychange和oninput
2009/06/17 Javascript
IE图片缓存document.execCommand("BackgroundImageCache",false,true)
2011/03/01 Javascript
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
2011/03/17 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
2011/05/24 Javascript
JS 实现Json查询的方法实例
2013/04/12 Javascript
JS实现拖动示例代码
2013/11/01 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
2013/11/13 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
2014/02/04 Javascript
jQuery的remove()方法使用详解
2015/08/11 Javascript
为什么JavaScript没有块级作用域
2016/05/22 Javascript
js 声明数组和向数组中添加对象变量的简单实例
2016/07/28 Javascript
标准的js无缝滚动效果
2016/08/30 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
2016/12/25 Javascript
JS实现最简单的冒泡排序算法
2017/02/15 Javascript
微信小程序实现左滑修改、删除功能
2020/10/19 Javascript
Angular2 自定义表单验证器的实现方法
2018/12/14 Javascript
监听element-ui table滚动事件的方法
2019/03/26 Javascript
vue模仿网易云音乐的单页面应用
2019/04/24 Javascript
关于JSON解析的实现过程解析
2019/10/08 Javascript
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
python获取list下标及其值的简单方法
2016/09/12 Python
Python实现更改图片尺寸大小的方法(基于Pillow包)
2016/09/19 Python
python过滤中英文标点符号的实例代码
2019/07/15 Python
python virtualenv虚拟环境配置与使用教程详解
2020/07/13 Python
Perry Ellis官网:美国男士品味服装
2016/12/09 全球购物
iKRIX意大利网上商店:男女豪华服装和配件
2019/10/09 全球购物
一套C++笔试题面试题
2012/06/06 面试题
成教自我鉴定
2013/10/27 职场文书
中学家长会邀请函
2014/01/17 职场文书
模具设计与制造专业求职信
2014/07/19 职场文书
浅谈克隆 JavaScript
2021/11/02 Javascript
Mysql分库分表之后主键处理的几种方法
2022/02/15 MySQL