Javascript中使用 async/await 进行异步编程

介绍

• es2017标准中写入了`async/await`用法
  
• 能用同步的方式来写异步代码
  
• 在使用async/await之前,需要了解Promise规范
  
• 浏览器兼容性
  
• node支持情况

基本用法

async/await 的基本使用方法非常的简单,先来看一段代码代码

const promise = () => {
	reuturn new Promise((resolve, reject) => {
		setTimeout(() => {
			resolve('resolved')
		}, 3000)
	})
};
const foo = async () => {
	const result = await promise();
	console.log(result);
	// 'resolved'
}
foo();

首先使用 async关键词来声明一个异步函数 foo.  async关键词在这里有两个作用:

1. 使得在函数 foo 内可以使用 await关键词来暂时阻塞函数内部代码的执行.
2. 使得函数 foo 立即返回一个 Promise 对象.

其次在定义好的异步函数 foo 中使用 await 关键词来阻塞当前函数,直到它后面的 Promise 处理完成. await 的作用:

1. 暂时阻塞当前异步函数, 等待 Promise 处理完成后继续向下执行函数.
2. 如果Promise正常处理完成, await 会将resolve的结果作为返回值返回.

所以,该段代码最后的执行结果是在等待3秒后,输出'resolved'.

注意事项

• async 函数不管你是否使用 return 关键词返回, 一旦调用会立刻返回一个pending状态的 Promise 对象, 直到它执行完成(内部所有的 await 表达式执行完成), 才会调用resolve方法, 并将它的返回值作为参数传递出去.

  const foo = async () => {
  	const result = await promise();
  	console.log(result);
  	// 'resolved'
  	return result;
  }
  foo().then(value => {
  	console.log(value);
  	// 'resolved'
  });

• 如果 async 函数并没有返回值或者并没有使用 return关键词, 那么在函数执行完后,将会调用 resolve(undefined).

  const foo = async () => {
  	const result = await promise();
  	console.log(result);
  	// 'resolved'
  	// return;
  }
  foo().then(value => {
  	console.log(value);
  	// undefined
  });

• await 关键词只能在 async 函数内使用, 否则会报错.
  
• 如果 await 后面跟的不是一个 Promise 对象, 则立刻返回其后所跟的表达式的结果.
  

错误处理

async 函数中进行错误处理的时候可以采用两种形式.

• 可以使用 .catch() 方法处理错误, 但是这种方式并不推荐使用,如果一个 async 函数内有多个 await 表达式, 这种方式就会非常麻烦.

const foo = async () => {
	const result1 = await promise1().catch(err => {
		console.log(err);
	});
	const result2 = await promise2().catch(err => {
		console.log(err);
	});
	const result3 = await promise3().catch(err => {
		console.log(err);
	});
	...
}

• 推荐的错误处理方法, 使用 `try`, `catch` 进行错误处理.一旦promise状态变为 rejected, catch 会立马扑捉到错误, 并把 rejcet() 的参数作为 err 传递出来.

const foo = async () => {
	try {
		const result1 = await promise1()
		const result2 = await promise2()
		const result3 = await promise3()
		...
	} catch (err) {
		console.log(err);
	}
}

async 函数的封装和调用

首先, async 函数的封装和普通函数的封装基本相同

const foo = async () => {
	let result = await promise();
	try {
		result = await promise();
	} catch (err) {
		throw err;
	}
	return result;
}

async 函数的调用有两种形式:

• 使用Promise的链式调用
  

foo().then(result => {
		// todo
	}).catch(err => {
		// handle err
	})

• 继续在async函数中, 使用await表达式调用

const baz = async () => {
	let result;
	try {
		result = await foo();
	} catch (err) {
		// handle err
	}
	...
}