async和await

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(....);
12345678910
箭头函数
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);//p1为resolve内的值：成功，p2为resolve内的值：成功
    console.log("同步任务");
})();
//打印p1
//打印p2
//成功 成功
//同步任务

await会等待这个Promise完成,并将其resolve的结果返回出来 p1,p2
3. 错误捕捉
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);//出错了
});

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');

参考事件循环来分析这段代码:
1.首先,整个script代码是个宏任务,先执行宏任务,输出script start
2.再执行async1()这个函数,async1中要去执行 async2(),输出async2 end,
把await async2()后面的代码放到微任务队列中,遇到setTimeout把它放入异步任务的宏任务中，
3.再执行Promise这段代码,因为Promise只是实例化了一个构造函数而已,其本身还是同步的.所以输出 Promise
4.由于Promise.then()是异步任务中的微任务,所以先放入微任务中执行到最后代码还有一个同步任务 ,输出 script end
5.同步任务都执行完之后,再开始执行异步队列中的任务,异步队列中,先执行微任务,再执行宏任务
6.输出 async1 end,Promise1,Promise2
,最后执行异步任务的宏任务,输出setTimeout
7.所以答案是:script start>async2 end>Promise>script end>async1 end>Promise1>Promise2>setTimeout