JavaScript async和await

JavaScript async和await

一,概念

ES2017标准引入了async函数,使得异步操作变得更加方便,有人说,这是解决回调地狱的终极方案

async函数是什么?其实它就是Generator函数的语法糖.

async函数就是将Generator函数的星号(*),替换成async,将yield替换成了awaitj仅此而已.async和await,比起星号和yield,语义更清晰.

async表示函数里有异步操作,await表示紧跟在后面的表达式需要等待结果.

二.基本使用

1.async

async函数返回一个Promise对象,可以使用then方法添加回调函数.
async函数内部的return语句返回的值,会成为then方法回调函数的参数.

async function foo() {
    return 'hello world';
}
foo().then(res => {
    console.log(res);//hello world
});
console.log('我先执行');//我先执行
console.log(foo());//Promise {<resolved>: "hello world"}

上述

1. async 使用形式

async函数有多种使用形式

• 函数声明

  async function foo(){}
  

• 函数表达式

  const foo=async function(){}
  

• 对象的方法

  let obj={async foo(){}}
  obj.foo().then(....);
  

• Class的方法

  class Cat{
      constructor(){
          
      }
      //实例方法,异步
      async show(){}
  }
  
  let cat=new Cat();
  cat.show().then(....);
  

• 箭头函数

  let foo=async ()=>{}
  

• 立即执行函数

  (async function(){
      // ...
  })();
  

2. 异常处理

async函数内部抛出错误,导致返回的Promise对象变为reject状态,抛出的错误对象会被catch()方法回调函数接收到

async function foo() {
    throw new Error('错误');
}
foo().then(res => {
    console.log(res);
}).catch(error=>{
    console.log(error);//Error: 错误
});

3. Promise对象状态的变化

async函数返回的是Promise对象,必须等到内部所有的await命令后面的Promise对象执行完,才会发生状态的改变,除非遇到return语句或者抛出错误.也就是说,只有async函数内部的异步操作执行完,才会执行then方法指定的回调函数.

async function getTitle(url) {
  let response = await fetch(url);
  let html = await response.text();
  return html.match(/<title>([\s\S]+)<\/title>/i)[1];
}
getTitle('https://tc39.github.io/ecma262/').then(console.log)

上面代码中,函数getTitle内部有三个操作:抓取网页,取出文本,匹配页面标题,只有是哪个操作全部完成,才会执行then方法里面的console.log

2.await

正常情况下,await命令后面是一个Promise对象,返回该对象的结果,如果不是Promise对象,就直接返回对应的值

1. await使用

async function foo() {
    return await 123;//等同于return 123;
}
foo().then(res => {
    console.log(res);//123
});

上面代码中，await命令的参数是数值123，这时等同于return 123。

注意:await一定要运行在async函数之内

当async函数执行的时候,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体内后面的语句

(async function () {
    var p1 = await new Promise(function (resolve, reject) {
        setTimeout(() => {
            console.log("打印p1");
            resolve('成功');
        }, 1000);
    })
    var p2 = await new Promise(function (resolve, reject) {
        setTimeout(() => {
            console.log("打印p2");
             resolve('成功');
        }, 1000);
    })
    console.log(p1, p2);
    console.log("同步任务");
})();
//打印p1
//打印p2
//成功 成功
//同步任务

await会等待这个Promise完成,并将其resolve的结果返回出来 p1,p2

2. 错误捕捉

await命令后面的Promise对象如果变为了reject状态,则reject的参数会被catch()方法的回调函数接收到

async function foo() {
    await Promise.reject('出错了');
}
foo().then(res => {
    console.log(res);
}).catch(error=>{
    console.log(error);//出错了
});

注意:任何一个await语句后面的Promise对象变为reject状态,那么整个async函数都会中断执行

async function foo() {
    var p1=await Promise.reject('出错了');//p1=undefined
    var p2=await Promise.resolve('成功');//不会执行
}
foo().then(res => {
    console.log(res);
}).catch(error=>{
    console.log(error);//出错了
});

3. 错误处理

await命令后面的Promise对象,运行结果可能是rejected,所以最好把await命令放在try...catch代码块中

async function f() {
    try {
        await Promise.reject('出错了');
    } catch(e) {
        console.log(e);
    }
    return await Promise.resolve('hello world');
}
f().then(v => console.log(v));
// hello world

如果有多个await命令,可以统一放在try…catch结构中

async function main() {
  try {
    const val1 = await firstStep();
    const val2 = await secondStep(val1);
    const val3 = await thirdStep(val1, val2);

    console.log('Final: ', val3);
  }
  catch (err) {
    console.error(err);
  }
}

async函数返回的 Promise 对象，必须等到内部所有await命令后面的 Promise 对象执行完，才会发生状态改变，除非遇到return语句或者抛出错误。也就是说，只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数。

(async function (){
    var res1 = await promiseAjax({
        type: 'get',
        url: 'datas.php',
        data: 'userid=abc1001'
    });
    var res2 = await promiseAjax({
        type: 'get',
        url: 'datas.php',
        data: 'userid=abc1002'
    });
    var res3 = await promiseAjax({
        type: 'get',
        url: 'datas.php',
        data: 'userid=abc1003'
    });
    res1 = JSON.parse(res1);
    res2 = JSON.parse(res2);
    res3 = JSON.parse(res3);
    // con.innerHTML = `姓名：${res1.name}，身份证：${res2.idcode}，地址：${res3.address}`;
    return `姓名：${res1.name}，身份证：${res2.idcode}，地址：${res3.address}`;
})().then(val=>{
    con.innerHTML = val;
});

三.async/await执行顺序分析

console.log('script start');
async function async1(){
    await async2();
    console.log('async1 end');
}
async function async2(){
    console.log('async2 end');
}
async1();
setTimeout(() => {
    console.log('setTimeout');
}, 0);
new Promise(resolve=>{
    console.log('Promise');
    resolve('成功');
}).then(()=>{
    console.log('Promise1');
}).then(()=>{
    console.log('Promise2');
});
console.log('script end');

参考事件循环来分析这段代码:

• 首先,整个script代码是个宏任务,先执行宏任务,输出script start
• 再执行async1()这个函数,async1中要去执行 async2(),输出async end,把await async2()后面的代码放到微任务队列中
• 遇到setTimeout把它放入异步任务的宏任务中
• 再执行Promise这段代码,因为Promise只是实例化了一个构造函数而已,其本身还是同步的.所以输出 Promise
• 由于Promise.then()是异步任务中的微任务,所以先放入微任务中
• 执行到最后代码还有一个同步任务 ,输出 script end
• 同步任务都执行完之后,再开始执行异步队列中的任务,异步队列中,先执行微任务,再执行宏任务
• 输出 async1 end,Promise1,Promise2,最后执行异步任务的宏任务,输出setTimeout

所以答案是:script start>async end>Promise>script end>async1 end>Promise1>Promise2>setTimeout