async await 个人总结

junnplus 发布于2019-08-23 13:43 / 2794人阅读

摘要：认识首先要从单个熟悉官方介绍声明将定义一个返回对象的异步函数。

认识async await 首先要从单个熟悉

async

官方介绍：
async function 声明将定义一个返回 AsyncFunction 对象的异步函数。
个人理解：

1. 首先`async function`会申明定义一个异步执行的函数，无阻塞，不会阻塞后面代码执行
2. 该函数的返回值是一个Promise对象

执行以下代码

async function testAsync() {
    return "茶树菇"
  }
  console.log(testAsync());
/*打印结果：
Promise
result: "茶树菇"
status: "resolved"
“Promise”原型*/

打印结果可以看出，async 可以将其后的函数执行结果转为Promise对象
既然如此那以下操作也是可行的

testAsync().then(r => {
    console.log(r);
  });//"茶树菇"

由以下打印结果可知async function声明函数是异步函数

function t() {
  return new Promise(resolve => {
    resolve("hah")
  })
}
async function t1() {
  const a = await t()
  // console.log(a);
  console.log("t1函数里");
}
t1()
console.log("我在t1函数调用后");
/*打印结果：
[Log] 我在t1函数调用后
[Log] t1函数里
*/

await

官方介绍：
await 操作符用于等待一个Promise 对象。它只能在异步函数 async function 中使用。

个人理解：
官方注释await是在等待一个Promise对象，其实没有限制，只是根据等待到的结果类型的不同有不同的操作，如果等到的就是个结果，则await就返回这个值，如果等到的是一Promise对象，则await会阻塞后面代码执行，等待Promise的结果（由于await在async function申明的异步执行函数，所以不会影响该函数外的其他代码执行，只影响内部）
注意：如果await等待的Promise执行结果除了resolve外，还有异常处理reject，则最好用.catch(err => err)去接收处理异常，例const a = await t().catch(err => err)

async function testAsync1() {
    return "茶树菇";
}

function testAsync2() {
    return new Promise(resolve => {
      resolve("茶树菇")
    })
}

function testAsync3() {
    return "茶树菇";
}

async function testFn() {
    const v1 = await testAsync1();
    const v2 = await testAsync2();
    const v3 = await testAsync3();
    console.log(v1);//"茶树菇"
    console.log(v2);//"茶树菇"
    console.log(v3);//"茶树菇"
//由此可见`await`等待的不一定是个`Promise`对象，也可以是个值
}
testFn();

为什么用async await，对比Promise的优缺点在哪？

模拟个使用场景，如下代码
需求：随机产生一个1～2之间的随机数，用延时器模拟异步操作，判断该值，如果小于一就成功，大于一失败

//用Promise实现：
function test(resolve, reject) {
    var timeOut = Math.random() * 2;
    console.log("随机数为：" + timeOut);
    setTimeout(function() {
      if (timeOut < 1) {
        resolve("小于1, 成功")
      } else {
        reject("大于1,失败")
      }
    }, timeOut * 1000)
  }
  new Promise(test).then((result) => {
    console.log(result);
  }).catch((reason) => {
    console.log(reason);
  })

打印结果：

function test2() {
    var timeOut = Math.random() * 2;
    console.log("随机数为：" + timeOut);
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (timeOut < 1) {
          resolve("小于1, 成功")
        } else {
          reject("大于1,失败")
        }
      }, 1000)
    })
  }
  async function asyncFn() {
    const v3 = await test2().catch(er => er)
    console.log(v3);
  }
  asyncFn()

看代码其实单一的异步处理链并不能看出async await的优势，但是如果需要处理多个Promise组成的处理链，就能看出区别
假设需求为：分布完成，每一步都需要上一步的结果：

//每次调用时间都增加200
function logTimeOut(n) {
    return new Promise(resolve => {
      setTimeout(() => resolve(n + 200), n)
    })
  }
//第一步
  function stepOne(n) {
    console.log("第一步所用的时间", n);
    return logTimeOut(n)
  }
//第二步将第一步的结果加上200作为第二部的初始时间
  function stepTow(m, n) {
    console.log("第二部所用的时间",m, n);
    return logTimeOut(n + m)
  }
//第三步将第二步的结果加上200作为第三步的初始时间
  function stepThree(k, m, n) {
    console.log("第三部所用的时间", k, m, n);
    return logTimeOut(k + m + n)
  }

首先用Promise实现

//promise实现
  function doIt() {
    console.time("doIt");
    // 第一步初始时间
    const time1 = 200;
    stepOne(time1).then(time2 => {
      return stepTow(time1, time2).then(time3 => [time1, time2, time3])
    })
    .then(timeArr => {
      const [time1, time2, time3] = timeArr
      return stepThree(time1, time2, time3)
    })
    .then(result => {
      console.log("总共计算用时", result);
      console.timeEnd("doIt")
    })
  }
doIt()

使用async awiat：

// async await 实现
  async function startIt() {
    console.time("startIt")
    const time1 = 200;
    const time2 = await stepOne(time1)
    const time3 = await stepTow(time1, time2)
    const result = await stepThree(time1, time2, time3)
    console.log("总共计算用时", result);
    console.timeEnd("startIt")
  }

打印结果：

这样对比就能明显看出区别Promise实现的代码逻辑复杂，不清晰，不直观，而通过async await，可以将异步逻辑，用类似于同步的代码实现，简洁明了

这是到目前为止的个人理解，转载请标明出处

GPU云服务器云服务器 async await await-async async-await 个人总结

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99447.html

async/await 异步应用的常用场景

摘要：下面将简单地描述一下一些日常常用场景加深对认识最普遍的异步操作就是请求我们也可以用来简单模拟异步请求。其中是必须的如果省略了程序就不能按预期得到结果。前言 async/await 语法用看起来像写同步代码的方式来优雅地处理异步操作,但是我们也要明白一点,异步操作本来带有复杂性,像写同步代码的方式并不能降低本质上的复杂性,所以在处理上我们要更加谨慎, 稍有不慎就可能写出不是预期执行的代...

ermaoL 2019-08-02 16:18 评论0 收藏0
async/await 异步应用的常用场景

摘要：下面将简单地描述一下一些日常常用场景加深对认识最普遍的异步操作就是请求我们也可以用来简单模拟异步请求。其中是必须的如果省略了程序就不能按预期得到结果。前言 async/await 语法用看起来像写同步代码的方式来优雅地处理异步操作,但是我们也要明白一点,异步操作本来带有复杂性,像写同步代码的方式并不能降低本质上的复杂性,所以在处理上我们要更加谨慎, 稍有不慎就可能写出不是预期执行的代...

darkbug 2019-08-26 13:45 评论0 收藏0
async/await 异步应用的常用场景

摘要：下面将简单地描述一下一些日常常用场景加深对认识最普遍的异步操作就是请求我们也可以用来简单模拟异步请求。其中是必须的如果省略了程序就不能按预期得到结果。前言 async/await 语法用看起来像写同步代码的方式来优雅地处理异步操作,但是我们也要明白一点,异步操作本来带有复杂性,像写同步代码的方式并不能降低本质上的复杂性,所以在处理上我们要更加谨慎, 稍有不慎就可能写出不是预期执行的代...

宠来也 2019-08-30 10:53 评论0 收藏1
小程序开发技巧总结

摘要：前言最近公司要开发一款电商小程序，匆忙看了一遍文档就开始干活了。整体开发体验个人感觉不太好，特别是如果之前习惯了开发，突然去开发小程序，感觉很鸡肋。前言最近公司要开发一款电商小程序，匆忙看了一遍文档就开始干活了。整体开发体验个人感觉不太好，特别是如果之前习惯了Vue开发，突然去开发小程序，感觉很鸡肋。以下是我在开发中遇到的一些问题以及解决方法的总结，仅供参考引入iconfont ...

Wuv1Up 2019-08-22 18:48 评论0 收藏0
异步等待的 Python 协程

摘要：辅之以事件循环，协程可用于异步处理，尤其是在中。当前支持的协程基于增强型生成器，于版本开始采用。新的特性中，异步还有两种新用途异步内容管理器和迭代器。现在 Python 已经支持用协程进行异步处理。但最近有建议称添加协程以全面完善 Python 的语言结构，而不是像现在这样把他们作为生成器的一个类型。此外，两个新的关键字———异步(async)和等待(await)，都该添加到 Pyt...

NicolasHe 2019-07-24 18:05 评论0 收藏0