[JavaScript知识库]async函数

async函数

async函数就是将Generator函数的*号换成async,将yield换成await

async表明异步，await表示暂时中断

1.是对Generator的改进

1. 内置执行器

   Generator函数的执行必须依靠执行器，async函数自带执行器，执行与普通函数一样，只要一行

2. 更好的语义

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

3. 更广的适用性

   yield后面只能是Thunk函数或Promise对象，而async函数的await命令后面可以是Promise对象和原始类型的值（原始类型会自动转成立即resolved的Promise对象）

4. 返回值是Promise

   async函数的返回值是Promise对象，比Generator函数的返回值是Iteraor对象方便

   async函数可以完全堪称多个异步操作，包装成一个Promise对象，await命令就是内部then命令的语法糖

2.基本语法

async函数返回一个Promise对象，可以使用then方法添加回调函数。当函数执行的时候一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句

//指定ms秒后输出一个值
function timeout(ms){
    return new Promise((resolve)=>{
        setTimeout(resolve,ms);
    });
}
//等价于
async function timeout(ms){
    await new Promise((resolve)=>{
        setTimeout(resolve,ms);
    });
}

async function asyncPrint(value,ms){
    await timeout(ms);
    console.log(value)
}

asyncPrint('hello world', 1000);

async函数有多种使用形式

//函数声明
async function foo(){}
//函数表达式
const foo = async function(){};
//对象的方法
let obj = {async foo(){}};
obj.foo().then(...)
//Class的方法
class Storage{
    constructor(){
    	this.cachePromise = caches.open('avatars');
	}           
	async getAvatar(name){
        const cache = await this.cachePromise;
        return cache.match(`/avatars/${name}.jpg`);
    }
}
const storage = new Storage();
storage.getAvatar('jake').then(...);
//箭头函数
const foo = async ()=>{};

async函数内部return语句返回的值，会成为then方法回调函数的参数

asyncPrint('hello world', 1000);
async function f(){
    return 'hello world';
}
f().then(v=>console.log(v));//hello world

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

async function f(){
    throw new Error('出错了');
}

f().then(
    v=>console.log('resolve',v),
    e=>console.log('reject',e)
)
//reject Error: 出错了

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)

仅当抓取网页，取出文本，匹配页面标题三个操作全部完成才会执行then方法里面的console.log

await命令后面是一个Promise对象，返回该对象的结果。如果不是Promise对象，就返回对应的值。

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

使用注意点

Promise对象可能运行rejected,把await放进try ... catch

async function f(){
    try{
        await fun(){}
    }catch(err){

    }
}
//另一种
async function f(){
    await fun().catch(function(error){
        
    })
}

同时触发

let foo = await getFoo();
let bar = await getBar();
//只有getFoo()完成后才执行getBar()
//同时触发
let [foo,bar] = await Promise.all([getFoo(),getBar()])
//或
let fooPromise = getFoo();
let barPromsie = getBar();
let foo = await fooPromise;
let bar = await barPromise;

await只能在async函数中，普通函数中会报错