async await 对比 Promise

news/2024/7/23 23:53:30 标签: Promise, async, 异步, 回调, callback

async__await__Promise__1">async && await 对比 Promise 的优点

  1. 处理异常
    Promise 不能catchPromise内部的异常
       //Promise写法
    async function returnPromise() {
        return 'ok'
    }
    
    try {
        returnPromise()
            .then(res => {
                console.log(res)
                throw new Error('可能出错的位置')
            })
            .catch(reason => {
                console.log(reason)
            })
    } catch (e) {
        console.log(e)
    }
    
    async && await 同步和异步所抛出的异常可以一起处理
    //改成 async && await
    (async () => {
        try {
            const msg = await returnPromise()
            console.log(msg)
            throw new Error('可能出错的位置')
        } catch (e) {
            console.log(e)
        }
    })()
    
  2. 处理then
    Promise 虽然对比层层回调来说已经算是很美观,但是请接下看
    (() => {
        returnPromise()
        .then(res => {
            console.log(res)
            //dosomething
            return Promise.resolve('step1')
        })
        .then(res => {
            console.log(res)
            //dosomething
            return Promise.resolve('step2')
        })
        .then(res => {
            console.log(res)
            //dosomething
            return Promise.resolve('step3')
        })
        .then(res => {
            console.log(res)
            //dosomething
            return Promise.resolve('step4')
        })
    })()
    
    async && await 更加简洁
    (async () => {
        console.log(await returnPromise())
        //dosomething
        console.log(await Promise.resolve('step1'))
        //dosomething
        console.log(await Promise.resolve('step2'))
        //dosomething
        console.log(await Promise.resolve('step3'))
        //dosomething
        console.log(await Promise.resolve('step4'))
        //dosomething
    })()
    

结语

对于两者的态度,笔者认为两者应该是共生的,而不是async && await 取代Promise,毕竟前者的实现靠着后者,或者说只是后者的语法糖。毕竟,Promise.allPromise.race等一些方法,目前来说处理批量异步还是算厉害的。本篇博客的意义在于让更加透彻的理解Promise ,以及async && await 这块语法糖到底好在哪里。

如果对你有帮助的话,请点一个赞吧


http://www.niftyadmin.cn/n/1257949.html

相关文章

Vue 数据响应式详解

前言 Vue最具特色的一点,就是数据驱动,即你不用写复杂的DOM操作,只需专心于业务所用到的数据。 那么,Vue的数据响应式到底是怎么实现的呢? 正文 数据变化的过程 侦测数据的变化 (数据劫持 / 数据代理)收集视图依赖…

const 关键字

可能有的误解 对于 ES6 中增加的const关键字,很多人的(包括我自己)都有一些误解。这个误解是:使用const关键字定义的变量是无法被修改的,即必须在定义的时候就赋值。这话不能说是全错,只是对简单类型和引用…

then 方法

then()方法 如果不是第一个参数函数,则会忽略这个then(),例如 func() .then(hello) //这个then会被忽略 .then(res>{console.log(res) })resolve(arg)的参数arg会传到紧接着的.then(callback(arg))中如果你读懂了下面的例子,那么说明你对t…

数组和伪数组的区别

正文 常见的伪数组有:函数参数arguments,DOM对象列表(例如document.querySelectorAll(div)),jQuery中的$(div)等Array.prototype 伪数组没有Array.prototype,它只是一个对象数组有Array.prototype,他是对象的同时&…

一道经典的 js 面试题

原题目 在浏览器环境下,判断程序输出的结果是? var foo window的foolet obj {foo: obj的foo,func() {let self thisconsole.log(this.foo)console.log(self.foo);(function () {console.log(this.foo)console.log(self.foo)})()}}obj.func()console.…

深拷贝的实现

正文 Object.prototype.toString() 返回的是[object Object]表示数据 类型的字符串可以利用这一点来确定数据的具体类型和[].toString()以及Number.prototype.toString()都不一样,数组和字符串等类型数据都重写了toString()方法。 function type(val) {return {}…

手动实现一些函数的封装

正文 全局对象 node 中的 全局 this指向的是module.exports,而不是全局对象global 在外部函数中的this指向global,匿名函数也是 浏览器环境下全局this就是window 在外部函数中的this指向window,匿名函数也是 reverse - 不改变原数组版&a…

call,apply,bind 实现

正文 Tips:call bind apply对箭头函数来说,会忽略掉第一个参数,也就是this指向参数,所以不会改变箭头函数this的指向 call实现 this指向绑定传参返回值,看了很多的实现例子,都没有写这个。如果缺少返回值…