• 技术文章 >web前端 >js教程

    理解JavaScript之Async/Await的新语法

    coldplay.xixicoldplay.xixi2020-07-08 16:31:41转载559

    受到Zeit团队博文的启发,我们的PayPal团队不久之前将服务器端数据库迁移到了Async/Await上。我想要和你们分享一下我的经验。

    首先我们先来了解两个术语:

    你们总是将Async和Await放在一起说,但是你需要知道的是,它们是两个不同的东西。对于Async函数和Await关键词,你需要了解的是,他们从某种程度上来说当然是有一定关联的,但是在没有Await的情况下,Async函数依然可以使用。

    相关学习推荐:javascript视频教程

    函数会返回一个Promise

    当你用async关键词创建一个函数的时候,这个函数永远都会返回一个Promise。当你在async函数内部进行返回的时候,它会用一个Promise包裹你的值。

     // here is an async function
     async function getNumber() {
    
      return 4 // actually returns a Promise
      }
      // the same function using promises
      function getNumber() {
    
         return Promise.resolve(4)
    
    }

    Async函数和它的基于Promise的Equivalent

    除了将你的return转换为Promise之外,async函数还有一个特别之处,那就是它是唯一一个让你使用await关键词的地方。

    Await让你可以暂停async函数的执行,直到它受到了一个promise的结果。这让你可以写出按照执行顺序显示的async代码。

     // async function to show user data
     async function displayUserData() {
    
        let me = await fetch('/users/me')
    
        console.log(me)
    
    }// promise-based equivalent
    function displayUserData() {
    
        return fetch('/users/me').then(function(me) {
    
            console.log(me)
    
        })
    
    })

    Await允许你在不需要callback的情况下写异步代码。这样做的好处是让你的代码可读性更高。而且await可以与任何promise兼容,而不仅仅是用async函数所创建的promise。

    在Async函数中处理错误

    因为async函数也是一个Promise,当你在代码中放入一个async函数的时候,它会被吸收,然后作为rejected Promise被返回。

     // basic error handling with async functions
     async function getData(param) {
    
       if (isBad(param)) {     
        throw new Error("this is a bad param")
    
       }   
       // ...
       }
       // basic promise-based error handling example
       function getData(param) {
    
       if (isBad(param)) {      
       return Promise.reject(new Error("this is a bad param"))
    
       }  
        // ...
        }

    当你使用await调用Promise的时候,你可以用try/catch将其包裹,或是你需要在返回的Promise中添加一个catch handler。

     // rely on try/catch around the awaited Promise
    
    async function doSomething() {   
     try {       
      let data = await getData()
    
        } catch (err) {       
         console.error(err)
    
        }
    
    }
    // add a catch handlerfunction doSomething() {    
    return getData().catch(err => {      
      console.error(err)
    
        })
    
    }

    整合

    利用好promise的错误处理属性,以及async函数的简洁语法,能够给你带来一些强大的能力。

    在下面这个简单的例子中,你会看到我是如何利用async函数内在的错误处理能力的,它让我简化了Express应用中的错误处理流程。

     // catch any errors in the promise and either forward them to next(err) or ignore them
     const catchErrors = fn => (req, res, next) => fn(req, res, next).catch(next)
     const ignoreErrors = fn => (req, res, next) => fn(req, res, next).catch(() => next())
     // wrap my routes in those helpers functions to get error handling
     app.get('/sendMoney/:amount', catchErrors(sendMoney))
     // use our ignoreErrors helper to ignore any errors in the logging middleware
     app.get('/doSomethingElse', ignoreErrors(logSomething), doSomethingElse)
     // controller method can throw errors knowing router will pick it up
     export async function sendMoney(req, res, next) {  
     if (!req.param.amount) {     
     throw new Error('You need to provide an amount!')  
    
      }  await Money.sendPayment(amount) // no try/catch needed
    
      res.send(`You just sent ${amount}`)}
    
    // basic async logging middleware
    export async function logSomething(req, res, next) {
    
        // ...    
        throw new Error('Something went wrong with your logging')
    
        // ...
    
    }

    此前,我们一直都在用next(err)来处理错误。然而,有了async/await,我们可以将错误放在代码中的任何位置,然后router会将这些错误throw到Express提供的next函数中,这样就极大的简化了错误处理流程。

    我用了几个小时的时间对数据库进行了迁移。要想使用这个方式,你唯一需要的,就是对Promise的深刻理解,以及学会如何设置babel。

    以上就是理解JavaScript之Async/Await的新语法的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:webhek,如有侵犯,请联系admin@php.cn删除
    专题推荐:JavaScript Async/Await
    上一篇:Vue-Router怎么实现中间件管道? 下一篇:详解vue中watch如何使用?watch用法介绍
    线上培训班

    相关文章推荐

    • 微信开发中使用async/await• async/await的来龙去脉• 除了 async 速度翻 10 倍,JavaScript 还带来了什么?• 弄懂promise、async、await

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网