详细介绍async await 含义,使用,原理

一、含义

async 函数 就是将 Generator 函数的星号（*）替换成 async,将 yield 换成await
（1）内置执行器。Generator 函数的执行必须靠执行器(co模块),async函数自带执行器
（2）更好的语义。async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果。
（3）更广的适用性。co模块约定，yield命令后面只能是 Thunk 函数或 Promise 对象。async函数的await命令+，可以是 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时会自动转成立即 resolved 的 Promise 对象）
（4）返回值是 Promise。比 Generator 函数的返回值是 Iterator 对象方便，用then方法指定下一步的操作。async函数完全可以看作多个异步操作，包装成的一个 Promise 对象，而await命令就是内部then命令的语法糖

二、基本用法

1. async 函数 :异步操作
（1）立刻返回 一个promise对象
（2）可以使用then方法

2. 遇到await：紧跟promise包装的对象
（1）先返回
（2）等异步操作结束完成后,再继续执行函数体内后面的语句

//指定多少毫秒输出一个值
function timeout(ms){
	return new promise((resolve)=>{
		setTimeout(resolve,ms);
	})
}
async function asyncPrint(value,ms){
	await timeout(ms);
	console.log(ms);
}
asyncPrint('hello world',50);
//由于async函数返回的是promise，所以整体也可当作await 后续的表达式，timeout改写为如下
async function timeout(ms){
	await new promise((resolve)=>{
		setTimeout(resolve,ms);
	})
}

3. 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 () => {}
```javascript
在这里插入代码片

4. 调用async函数返回Promise对象
（1）async函数内部return语句返回的值，会成为then方法回调函数的参数

async function f() {
  return 'hello world';
}

f().then(v => console.log(v))
// "hello world"

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

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

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

5. Promise 对象的状态变化
（1）只有async函数内部的异步操作执行完，遇到return语句或者抛出错误，才会执行then方法指定的回调函数

6. await命令
（1）await + Promise对象： 返回该对象的结果
（2）await + 原始值：返回原始值

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

（3）await + thenable对象：（即定义了then方法的对象）等同于 Promise 对象
（4）await命令后面的 Promise 对象如果变为reject状态，则reject的参数会被catch方法的回调函数接收到，整个async函数都会中断执行

async function f() {
  await Promise.reject('出错了');
}
f()
.then(v => console.log(v))
.catch(e => console.log(e))
// 出错了
async function f() {
  await Promise.reject('出错了');
  await Promise.resolve('hello world'); // 不会执行
}
//如果出错了不想中断，将第一个await放在try...catch结构里面，或者await Promise.catch
async function f() {
  try {
    await Promise.reject('出错了');
  } catch(e) {
  }
  //或者
  await Promise.reject('出错了')
    .catch(e => console.log(e));
  return await Promise.resolve('hello world');
}

f()
.then(v => console.log(v))

7. 错误处理
（1）await + Promise(rejected) , 等同于async函数返回的 Promise 对象被reject

//防止出错的方法，也是将其放在try...catch代码块之中
async function f() {
  try {
    await new Promise(function (resolve, reject) {
      throw new Error('出错了');
    });
  } catch(e) {
  }
  return await('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);
  }
}

8. 实现一个多次重复尝试

const superagent = require('superagent');
const NUM_RETRIES = 3;
async function test() {
  let i;
  for (i = 0; i < NUM_RETRIES; ++i) {
    try {
      await superagent.get('http://google.com/this-throws-an-error');
      break;
    } catch(err) {}
  }
  console.log(i); // 3
}

test();

9. 注意点
（1）await命令后面的Promise对象，运行结果可能是rejected，所以最好把await命令放在try…catch代码块中

async function myFunction() {
  try {
    await somethingThatReturnsAPromise();
  } catch (err) {
    console.log(err);
  }
}
// 另一种写法
async function myFunction() {
  await somethingThatReturnsAPromise()
  .catch(function (err) {
    console.log(err);
  });
}

（2）多个await命令后面的异步操作，如果不存在继发关系，最好让它们同时触发，会缩短程序的执行时间

// 写法一
let [foo, bar] = await Promise.all([getFoo(), getBar()]);
// 写法二
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;

（3）await命令只能用在async函数之中，如果用在普通函数，就会报错
（4）async 函数可以保留运行堆栈

三、async函数的实现原理

（1）Generator+自动执行器函数

//实现如下async函数
async function fn(args){
	...
}
//等同于
function fn(args){
	return spawn(function *(){//spawn函数就是自动执行器
	 //...
	})
}

function spawn(genF){ //genF是一个Generator函数
	return new Promise(function(resolve,reject){
		const gen = genF();//gen第一次执行返回一个遍历器对象,递归调用遍历器对象gen.next()方法直到返回ture结束
		function step(nextF){
			let next;
			try{
				next = nextF()//第二次执行调用gen.next()方法返回{value: ,done:}
			}catch(e){
				return reject(e)
			}
			if(next.done){//为true返回
				return resolve(next.value)
			}
			//继续执行
			Promise.resolve(next.value).then(function(v){
				step(function(){return gen.next(v);});
			},function(e){
				step(function(){return gen.throw(e)})
			});
		}
		step(function(){return gen.next(undefined)})//传入第二次
	});
}