在一些实际应用中,我们想要把接口请求回来的数据,渲染到页面,并且要执行下一步操作时,我们肯定会想到用异步处理,但是我们不知道请求接口会花费多少时间,万一还没有返回数据,渲染上去的就是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,我就不一个一个的写了。

               

作者