关于异步函数的回调问题

发表于   |   分类于

我们在项目中经常需要根据异步请求结果进行相关操作，以往常用的方法是callback，但现在如果结合babel编译，用promise或者async会更加优雅。如下是错误的做法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 异步之后进行相关操作的错误做法
function asyncFun(){
	var flag = false;
	$.ajax({
		url: 'https://api.github.com/',
		type: 'get'
	}).done(function(res){
		if(res.code == 1){
			flag = true
		}
	})
	return flag;    // 这里始终返回false，因为异步请求不阻塞后面代码执行
}
if(asyncFun()){
	// 由于flag始终为false，很明显这里永远不会执行
}

解决方案有三种：传统回调方式，ES5Promise对象，ES6 async/await方式

回调函数方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 定义一个异步函数
function asyncFun(cb){
	$.ajax({
		url: 'https://api.github.com/',
		type: 'get'
	}).done(function(res){
		cb && cb(res)
	})
}
asyncFun(function(res){
	// 根据异步请求返回的结果进行相关操作
	if(res.code == 1){
	}
})

使用ES6引入的promise对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function asyncFun(){
	return new Promise(function(resolve, reject){
		$.ajax({
			url: 'https://api.github.com/',
			type: 'get'
		}).done(function(res){
			resolve(res)
		})
	})
}
asyncFun().then(function(res){
	if(res.code == 1){
		// 你要进行相关的操作
	}
})

如果后面的操作不只一次，你可以定义多个返回Promise对象的函数，像这样

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function asyncFun2(res){
	// 这里可以获取asyncFun传过来的res
	return new Promise(function(resolve, reject){
		$.ajax({
			url: 'https://api.github.com/',
			type: 'get'
		}).done(function(res2){
			resolve(res2)
		})
	})
}
function asyncFun3(res2){
	// 这里可以获取asyncFun2传过来的res2
	return new Promise(function(resolve, reject){
		$.ajax({
			url: 'https://api.github.com/',
			type: 'get'
		}).done(function(res3){
			resolve(res3)
		})
	})
}
asyncFun().then(asyncFun2).then(asyncFun3)

说明：

  • 这种写法十分类似jQuery的链式写法，只要返回Promise对象，就拥有then()及catch()方法，后者用于捕捉回调运行时发生的错误。
  • Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve方法和reject方法。如果异步操作成功，则用resolve方法将Promise对象的状态变为“成功”（即从pending变为resolved）；如果异步操作失败，则用reject方法将状态变为“失败”（即从pending变为rejected）
  • then方法其实有两个参数，第一个参数作为上一步操作resolve时的回调函数，如果上一步操作后状态变为rejected，则以第二个参数作为回调函数

使用ES7关键字async/await——异步终极解决方案

ES7 中有了更加标准的解决方案，新增了async/await两个关键词，async可以声明一个异步函数，此函数需要返回一个 Promise对象。await 可以等待一个 Promise 对象 resolve，并拿到结果。
现在要实现上面的需求，可以这样：

基本规则

  • async 表示这是一个async函数，await只能用在这个函数里面。
  • await 表示在这里等待promise返回结果了，再继续执行。
  • await 后面跟着的应该是一个promise对象（当然，其他返回值也没关系，只是会立即执行，不过那样就没有意义）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function getData(){
	return new Promise(function(resolve,reject){
		$.ajax({
			url: 'https://api.github.com/',
			type: 'get'
		}).done(function(res){
			resolve(res)
		})
	})
}
async function asyncFun(){
	var res = await getData();
	if(res.code == 1){
		//进行相关操作
	}
}

使用async/await捕获异常

这里说下捕获异步操作中的异常问题，既然then不用写，那么catch也可以不用了，可以直接用标准的try/catch语法捕捉错误。

常犯的错误是使用try/catch捕获异步函数的异常，这时候因为try/catch块执行完了，异步函数很可能还没有完成，异常还没有被实际抛出。当异常被抛出的时候，由于catch块已经执行完了，此时就会导致进程崩溃。如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 错误的示例
function getData(){
	$.ajax({
		url: 'https://api.github.com/',
		type: 'get'
	}).done(function(){
		// 模拟异常
		null();
	})
}
try{
	getData();
	console.log('我会被打印');
}catch(e){
	console.log('error')
}
// '我会被打印'
// undefined
// Uncaught TypeError: null is not a function

可以看到异步请求中的异常无法被正常捕获,’error’并没有被打印出来，console.log(‘我会被打印’)仍然执行了，使用async/await可以很容易解决这个问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function getData(){
	return new Promise(function(resolve,reject){
		$.ajax({
			url: 'https://api.github.com/',
			type: 'get'
		}).done(function(){
			// 模拟异常
			reject('error')
		})
	})
}
async function asyncFun(){
	try{
		await getData();
		// 这里以下的代码不被执行
		console.log('我不会被打印');
	}catch(err){
		console.log(err);
	}
}
async();       // Promise{}
			   // error

总结：

  1. 从回调到promise再到async/await解决步式操作需求的问题，可以看到代码易读性明显增强了，async/await不仅去除了嵌套问题，也不用再用链式写法的then了。
  2. async/await只是一套语法糖，其他语言的async/await可能是协程或者多线程编程的语法糖，JS本身是单线程的，async/await与传统的callback或者promise执行起来并无两样
  3. ES7 async/await仍未成标准，最新版谷歌已经支持，但大部分浏览器仍没有实现，要使用它可以用babel编译成浏览器支持的ES5。