async

async

async函数对 Generator 函数的改进，体现在以下四点。

（1）内置执行器。async函数自带执行器。也就是说，async函数的执行，与普通函数一模一样，只要一行。
（2）更好的语义。async和await，比起星号和yield，语义更清楚了。async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果。
（3）更广的适用性。async函数的await命令后面，可以是 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时会自动转成立即 resolved 的 Promise 对象）。
（4）返回值是 Promise。

用法

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

	function timeout(ms) {
	  return new Promise((resolve) => {
	    setTimeout(resolve, ms);
	  });
	}
	
	async function asyncPrint(value, ms) {
	  await timeout(ms);
	  console.log(value);
	}
	
	asyncPrint('hello world', 50);

上面代码指定 50 毫秒以后，输出hello world。

    let p = new Promise((resolve,reject)=>{
        resolve("success");
    });
    async function getA(){
        //await 后面是一实例的回调promise实例，如果不是会默认转化
        //直接让promise执行，返回执行时的参数
        let a = await p;//先将这里的异步执行之后执行后面的代码
        console.log(a);//success
    }
    getA().then((res)=>{
        console.log(res);//undefined,如果想让这里拿到值，则让在async中return a
    }).catch((e)=>{
        console.log(e);
    })

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

	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(v),
	  e => console.log(e)
	)
	// Error: 出错了

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 () => {};

await

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

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

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

	async function f() {
	  await Promise.reject('出错了');
	  await Promise.resolve('hello world'); // 不会执行
	}

如果我们希望即使前一个异步操作失败，也不要中断后面的异步操作。这时可以将第一个await放在try…catch结构里面，这样不管这个异步操作是否成功，第二个await都会执行。

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

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)
	// "ECMAScript 2017 Language Specification"

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