async await 使用技巧

香菊网 发表于: 2019-11-12 分类: js部分  前端front  
await is a reserved word 问题解决方式
// await 只能在当前的函数体里面

// 错误
async test1Fn () {
    this.ajax({...req}).then((res) => {
      let tempVal = await test2Fn()
    })
}


// 正确
test1Fn () {
    this.ajax({...req}).then(async (res) => {
      let tempVal = await test2Fn()
    })
}

引言:

    async 是 ES7 才有的与异步操作有关的关键字,和 Promise , Generator 有很大关联的。

    async 函数返回一个 Promise 对象,可以使用 then 方法添加回调函数。本文简单接收async使用方法。

语法:

    async function name([param[, param[, ... param]]]) { statements

  • name: 函数名称。
  • param: 要传递给函数的参数的名称。
  • statements: 函数体语句。
字段 说明 必须
name 函数名。 *
param 要传递给函数的参数的名称。  
statements 函数体语句。 *

async 函数

// async 函数返回一个promise对象

sync function helloAsync(){
    return "helloAsync";
}
  
console.log(helloAsync())  // Promise {<resolved>: "helloAsync"}
 
helloAsync().then(v=>{
   console.log(v);         // helloAsync
})

 await 关键字

async 关键字差不多了,最重要的就是async函数的执行会返回一个promise 对象,并且把内部的值进行promise的封装。如果promise对象通过then或catch方法又注册了回调函数,async函数执行完以后,注册的回调函数就会放到异步队列中,等待执行。如果只是async,  和promise 差不多,但有了await就不一样了, await 关键字只能放到async 函数里面,await是等待的意思,那么它等待什么呢,它后面跟着什么呢?其实它后面可以放任何表达式,不过我们更多的是放一个返回promise 对象的表达式,它等待的是promise 对象的执行完毕,并返回结果。

/*
 * await 操作符用于等待一个 Promise 对象 返回之后才能继续执行,
 * 它只能在异步函数 async function 内部使用。
 * 内部会调用Promise.solve() 方法把它转化成一个promise 对象作为返回,
 */

function testAwait(){
   return new Promise((resolve) => {
       setTimeout(function(){
          console.log("testAwait");
          resolve();
       }, 1000);
   });
}
 
async function helloAsync(){
   await testAwait();
   console.log("helloAsync");
 }
helloAsync();
// testAwait
// helloAsync

await promise函数 和 普通函数 区别

  • Promise 对象:await 会暂停执行,等待 Promise 对象 resolve,然后恢复 async 函数的执行并返回解析值。
  • 非 Promise 对象:直接返回对应的值。

转载请注明: 香菊网_技术博客(http://www.xiangjv.top)

标签: js部分前端front
Copyright © 2019 幻雨焉缘博客 | 浙ICP备19001843号-1
----------------------------------
种一棵树,最好的培养时间是十年前,其次是现在 加油  (ง •_•)ง。        ──── 前端攻城狮