微信小程序学习总结（async，await）

微信小程序学习总结（async，await）

1，async，await和promise

首先是async和await，async和await是async和await两部分组成，async是异步的意思，而await是async wait的简写，所以async用于声名function是一个异步的，await用于等待异步方法执行

• async:

  async是加在一个function之前的，它的作用是将function变为异步的操作，而这个异步操作的返回值是一个promise对象

          async function a1 (){
              return "a1"
          }
          const result = a1()
          console.log(result)
  //打印结果
  Promise {<fulfilled>: "a1"}
  __proto__:Promise
  		[[PromiseStatus]]: "fulfilled"
           [[PromiseValue]]: "a1"
  

  所以当写上了async在函数之前时 函数内部return 一个直接量的话，async会直接返回一个promise实例

  所以直接调用这个a1()方法配合.then方法来拿到a1中return的内容

          async function a1 (){
              return "a1"
          }
          const result = a1()
          a1().then(res=>{
              console.log(res) //输出的"a1"
          })
  

  让我们再来看一下promise a1()的返回值如果是一个普通的promise对象时

          function a1 (){
              return new Promise((reslove,reject)=>{
                  reslove("a1")
              })
          }
          const result = a1()
          a1().then(res=>{
              console.log(res) //输出的"a1"
          })
  

  可见 确实 是与普通的promise对象无异

  但是如果 async中没有返回值 会是什么样子的

          async function a1 (){
              console.log(1)
          }
          const result = a1()
          a1().then(res=>{
              console.log(res) //输出的"underfind"
          })
  

  可见的是它会返回一个undefined，这时候想一下promise的特点是无需等待 所以在没有await的方法下 他会立即执行 返回promise对象 不会阻塞后部分的语句 于普通promise无异样

  所以，现在让我们来看关键字await

• await:

  上边说到await是等async的 他是等async的完成 等的是一个表达式 表达式的结果是promise对象或者其他值

  以为async函数返回一个promise对象 所以await可以用来等待一个async函数的返回值，这也可以说awite是在等待async函数，要记住的是他等待的数一个返回值 ，await不仅仅用来等待promise对象他可以等任何表达式的结果 所以 await后面可以接普通的函数调用或者直接量

          function a1 (){
              return "a1"
          }
          async function a2(){
              return Promise.resolve("a2")
          }
          async function ok(){
              const v1 = await a1()
              const v2 = await a2()
              console.log(v1,v2)
          }
          ok()
  

  当await等到了他要等的东西

  ​ 如果这个东西不是一个promise对象 那么awai表达式结果就是他等到的东西

  ​ 如果等到的是promise对象的话await就会忙起来 他会阻塞后面的代码 等着promise 的返回值然后得到resolve的值中作为await表达式返回结果

  注意：因为await会阻塞代码 所以 await会和async一起使用才可以不然浏览器会报错

• 了解async和await帮我们做了什么

  上面说了async会返回一个promise对象 而awite会等待这个async的promise完成 并将reslove的结果返回出来

  模拟：先不用async和await

          function a1(){
              return new Promise((resolve,reject)=>{
                  setTimeout(() => resolve("a1"), 1000);
              })
          }
          a1().then(res=>{
              console.log("这个是a1:",res)
          })
          //结果是隔了一秒钟 控制台打印“ 这个是a1: a1 ”
  

  ​ 接下来 用上async和await

          function a1(){
              return new Promise((resolve,reject)=>{
                  setTimeout(() => resolve("a1"), 1000);
              })
          }
          async function test(){
              const v = await a1()
              console.log("这个是a1":v)
          }
          test()
    //结果是隔了一秒钟 控制台打印"这个是a1: a1"
  

  两种方法的结果可以明显看到 并没有太大差异 而且 async/awaite还要多了几行代码

• async/awaite的优势是什么

  async/awaite的优势在于处理.then链

          function addtime(n) {
              return new Promise(resolve => {
                  setTimeout(() => resolve(n + 200), n);
              })
          }
          function a1 (n){
              console.log("步骤1：：：",n)
              return addtime(n)
          }
          function a2(n){
              console.log("步骤2：：：",n)
              return addtime(n)
          }
          function a3(n){
              console.log("步骤3：：：",n)
              return addtime(n)
          }
          function start(){
              console.time("start")
              const time1 = 300
              a1(time1).then(time2=>a2(time2)).then(time3=>a3(time3)).then(result=>{
                  console.log("结果是：：：",result)
                  console.timeEnd("start")
              })
          }
          start()
          //返回值
           步骤1：：： 300
   		步骤2：：： 500
   		步骤3：：： 700
  		结果是：：： 900
   		start: 1505.947998046875ms
  

  上面这个是利用.then处理的

  下面来用async/await来处理

          function addtime(n) {
              return new Promise(resolve => {
                  setTimeout(() => resolve(n + 200), n);
              })
          }
          function a1 (n){
              console.log("步骤1：：：",n)
              return addtime(n)
          }
          function a2(n){
              console.log("步骤2：：：",n)
              return addtime(n)
          }
          function a3(n){
              console.log("步骤3：：：",n)
              return addtime(n)
          }
          async function start(){
              console.time("start")
              const time1 = 300
              const time2 = await a1(time1)
              const time3 = await a2(time2)
              const result = await a3(time3)
              console.log("结果是：：：",result)
              console.timeEnd("start")
          }
          start()
          //结果：
          test.html:18 步骤1：：： 300
    	    步骤2：：： 500
   	    步骤3：：： 700
    	    结果是：：： 900
   	    start: 1505.614990234375ms
  

  结果可见 于 promise还是一样的 但是代码的看着特别清晰

• 更有趣的

  改下上面案例的业务需求 还是三个步骤 每个步骤 结束都加上一个步骤结果

  先用async/awaite来写

          function addtime(n) {
              return new Promise(resolve => {
                  setTimeout(() => resolve(n + 200), n);
              })
          }
          function a1 (n){
              console.log("步骤1：：：",n)
              return addtime(n)
          }
          function a2(m,n){
              console.log("步骤2：：：",m,n)
              return addtime(m+n)
          }
          function a3(k,m,n){
              console.log("步骤3：：：",k,m,n)
              return addtime(k+m+n)
          }
          async function start(){
              console.time("start")
              const time1 = 300
              const time2 = await a1(time1)
              const time3 = await a2(time1,time2)
              const result = await a3(time1,time2,time3)
              console.log("结果是：：：",result)
              console.timeEnd("start")
          }
          start()
          //结果 步骤1：：： 300
   			步骤2：：： 300 500
  			 步骤3：：： 300 500 1000
  			结果是：：： 2000
  			:36 start: 2906.759033203125ms
  

  用promise来写

          function addtime(n) {
              return new Promise(resolve => {
                  setTimeout(() => resolve(n + 200), n);
              })
          }
          function a1(n) {
              console.log("步骤1：：：", n)
              return addtime(n)
          }
          function a2(m, n) {
              console.log("步骤2：：：", m, n)
              return addtime(m + n)
          }
          function a3(k, m, n) {
              console.log("步骤3：：：", k, m, n)
              return addtime(k + m + n)
          }
          async function start() {
              console.time("start")
              const time1 = 300
              a1(time1).then(time2 => {
                  return a2(time1, time2).then(time3 => [time1, time2, time3])
              }).then(times => {
                  const [time1, time2, time3] = times
                  return a3(time1, time2, time3)
              }).then(result => {
                  console.log("结果是：：：", result)
                  console.timeEnd("start")
              })
  
          }
          start()
          //结果：
          步骤1：：： 300
   		步骤2：：： 300 500
   		步骤3：：： 300 500 1000
   		结果是：：： 2000
   		start: 2907.22705078125ms
  

  结果也是差不多的 但是 promise传参麻烦 这里就体现了 async/await的好处了

• 本文参考：https://segmentfault.com/a/1190000007535316#comment-area

• 自己照着打了一遍 每个代码 自己实现了 一遍还是不太理解 还需要 继续钻研和学习

  ​