async与await 用法

妖狐艹你老母 2022-12-01 05:14 190阅读 0赞

#### 一.async ####

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

##### 1.async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数。 #####

async function helloAsync() { 
            return "hello world";
          }
          var asyn = helloAsync();
          console.log(asyn);
    
          helloAsync().then(res => { 
            console.log(res);
          });

结果

Promise { <resolved>: "hello world"}
    	__proto__: Promise
    	[[PromiseStatus]]: "resolved"
    	[[PromiseValue]]: "hello world"
    hello world

#### 二.async 结合 await ####

async 函数执行时，如果遇到 await 就会先暂停执行 ，等到触发的异步操作完成后，恢复 async 函数的执行并返回解析值。

await 操作符用于等待一个 Promise 对象, 它只能在异步函数 async function 内部使用。

###### await针对所跟不同表达式的处理方式： ######

*  Promise 对象：  
    await 会暂停执行，等待 Promise 对象 resolve，然后恢复 async 函数的执行并返回解析值。

load1() { 
          return new Promise((resolve, reject) => { 
            let num1 = Math.random();
            console.log( new Date() +"num1：" + num1);
            setTimeout(() => { 
              if (num1 < 0.5) { 
                resolve(num1);
              } else { 
                reject(num1);
              }
            }, 1000);
          });
        },
        load2() { 
          return new Promise(resolve => { 
            let num2 = Math.random();
            console.log( new Date() +"num2：" + num2);
            setTimeout(() => { 
              resolve(num2);
            }, 2000);
          });
        },
        //await async 用法
        testAsyncAwait() { 
          var _this = this;
          const load = async function() { 
            try { 
              console.log("start:" + new Date());
              const result1 = await _this.load1();
              console.log("result1:" + new Date() + result1);
              const result2 = await _this.load2();
              console.log("result2:" + new Date() + result2);
            } catch (e) { 
              console.log(new Date() +'异常：'+e);
            }
          };
          load();
      }

结果,如果遇到reject状态，则直接返回异常结束，否则先等load1方法执行完，继续继续执行load2方法，写法看似同步的写法。

09:28:17 GMT+0800 (中国标准时间) start
    09:28:17 GMT+0800 (中国标准时间)num1：0.9262235819553089
    09:28:18 GMT+0800 (中国标准时间)异常：0.9262235819553089
    
    09:28:20 GMT+0800 (中国标准时间) start
    09:28:20 GMT+0800 (中国标准时间)num1：0.10612281941843404
    09:28:21 GMT+0800 (中国标准时间)0.10612281941843404
    09:28:21 GMT+0800 (中国标准时间)num2：0.3128774939958008
    09:28:23 GMT+0800 (中国标准时间)0.3128774939958008

*  非 Promise 对象：  
    直接返回对应的值。

load3() { 
          setTimeout(() => { 
            console.log(new Date() +'load3')
          }, 1000);
          return 'load3返回'
        },
        load4() { 
          setTimeout(() => { 
            console.log(new Date() +'load4')
          }, 3000);
          return 'load4返回'
        },
        initdata5() { 
          var _this = this;
          const load = async function() { 
            try { 
              console.log(new Date()+"start:" );
              const result1 = await _this.load3();
              console.log("result1:" + new Date() + result1);
              const result2 = await _this.load4();
              console.log("result2:" + new Date() + result2);
            } catch (e) { 
              console.log(new Date() + "异常：" + e);
            }
          };
          load();
        },

结果

09:37:51 GMT+0800 (中国标准时间)start:
    09:37:51 GMT+0800 (中国标准时间)load3返回
    09:37:51 GMT+0800 (中国标准时间)load4返回
    09:37:52 GMT+0800 (中国标准时间)load3
    09:37:54 GMT+0800 (中国标准时间)load4