Promise基础入门

Promise是异步编程的一种解决方案，比传统的解决方案回调函数和事件更合理和更强大。
它由社区最早提出和实现，ES6将其写进了语言标准，统一了用法，原生提供了Promise对象。

##常见的业务场景
某款APP的Me模块页面中，需要展示的信息包括，用户基本信息、用户最近点赞的文章列表、用户最新关注朋友列表。
其中得知服务器提供如下三个接口供客户端使用。

###传统异步实现方式

恐怖而且难以阅读无限内嵌回调方法 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function getUserInfo(uid, callback) {
	$.get('http://www.vita.com/user/7788').success(function(data) {
		callback(data)
	})
}

function getFavors(uid, callback) {
	$.get('http://www.vita.com/user/7788/favors').success(function(data) {
		callback(data)
	})
}

function getFriends(uid, callback) {
	$.get('http://www.vita.com/user/7788/friends').success(function(data) {
		callback(data)
	})
}

getUserInfo(7788, function(userInfo) {
	getFavors(7788, function(favors){
		getFriends(7788, function(friends) {
			render({
				userInfo, favors, friends
			})
		})
	})
})

function render(info) {
	//TODO do some page render
}

使用Promise，优雅地处理异步调用场景

使用Promise对象封装每个独立的异步任务，使用then方法实现链式调用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

var userInfo = new Promise((resolve, reject) => {
	$.get('http://www.vita.com/user/7788').success(function(data) {
		resolve({
			userInfo: data
		})
	})
})

var favors = (combine)=> {
	return new Promise((resolve, reject) => {
		$.get('http://www.vita.com/user/7788/favors').success(function(data) {
			resolve({...combine, data})
		})
	})
}

var friends = (combine) => {
	return new Promise((resolve, reject) => {
		$.get('http://www.vita.com/user/7788/friends').success(function(data) {
			resolve({...combine, data})
		})
	})
}

userInfo.then(favors).then(friends).then(combine => {
	//TODO do some page render
})

在then()方法中，数据会随着resolve()方法依次往后传递。后一个方法可以依赖前一个方法的异步结果，通过扁平化的
链式调用，避免了常见的多级回调的代码书写方法,整体流程一目了然同时可以更清晰的书写每一个异步任务。