在一些实际应用中，我们想要把接口请求回来的数据，渲染到页面，并且要执行下一步操作时，我们肯定会想到用异步处理，但是我们不知道请求接口会花费多少时间，万一还没有返回数据，渲染上去的就是undefined，页面肯定会报错。

这个时候就轮到async/await登场了~

先说async，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，如下 

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

使用console.log()打印上面函数的返回值，会发现返回的是一个promise 对象

如果要获取到promise对象中的数据，可以使用then方法

而catch方法则可以捕获函数内部抛出的错误

		timeout().then(res => {
			console.log(res);
		}).catch(err => {
			console.log(err);
		})

再来看看 await，await翻译过来就是等待，那么它等谁呢？

它等的就是promise，因此我们先写一个返回promise对象的函数 

		doubleAfter3seconds = num => {
			return new Promise((resolve, reject) => {
				setTimeout(() => {
					resolve(2 * num)
				}, 3000);
			})
		}

再定义一个 async 函数，使用 await 关键字

通常跟在await后面的是一个返回promise对象的表达式 

		testResult = async () => {
			let result = await doubleAfter3seconds(50);
			console.log(result);
		}

之后我们调用testResult()，代码执行到await这里的时候就暂停了，不再向下执行了；

直到await后面的表达式执行完毕，并且获取到返回值之后，它才会继续向下执行。

需要注意的是await只关心异步过程成功的消息resolve(data)，拿到相应的数据data，至于失败消息reject(error)， await不关心不处理，我们可以通过其他方式来处理抛出的错误。

举个例子，我们可以使用try catch来捕获异常，如下

		testResult = async () => {
			try {
				let result = await doubleAfter2seconds(30);
				console.log(result);
			} catch (err) {
				console.log(err);
			}
		}

也可以让await后面的Promise对象自己catch，我就不一个一个的写了。

               

作者