异步调用及promise基本用法

1.异步分析及引出promise

1.1 异步调用

1.1.1 异步效果分析
①定时任务
②Ajax
③事件函数

1.1.2 多次异步调用的依赖分析
多次异步调用的结果顺序不确定
异步调用结果如果存在依赖需要，要用嵌套

1.2 promise概述

promise是异步编程的一种解决方案，从语法上来讲，Promise是一个对象，从它可以获取异步操作的消息。

使用Promise主要有以下好处：
可以避免多层异步调用嵌套问题（回调地狱）
Promise对象提供了简洁的API，使得控制异步操作更容易

Promise API

1.3 promise用法

（1）实例化Promise对象，构造函数中传递函数，该函数中用于处理异步任务
（2）resolve和reject两个参数用于处理成功和失败两种情况，并通过p.then获取处理结果

var p = new Promsie(function(resolve,reject){
	//这里用于实现异步任务
	//成功时调用resolve（）
	//失败时调用reject（）
});
p.then(function(ret){
	//从resolve得到正常结果
},function(ret){
	//从reject得到错误信息
})

1.4 基于promise发送ajax请求

1.4.1 处理原生Ajax

function queryData(url) {
	var p = new Promise(function(resolve,reject){
		var xhr = new XMLHttpRequest();
		xhr.onreadystatechange = function(){
		  		if(xhr.readyState != 4) return;
		  		if(xhr.readyState == 4 && xhr.status == 200){
		  				resolve(xhr.responseText);
		  			}else{
		  				reject('服务器错误');
		  			}
		}；
		xhr.open('get',url);
		xhr.send(null);
	});
	return p;
}
queryData('http://localhost:3000/data')
 	.then(function(data){
		console.log(data);
	},function(info){
		console.log(info);
	});

1.4.2 处理多个Ajax请求并且保证顺序

queryData('http://localhost:3000/data')
 	.then(function(data){
 		console.log(data);
 		//return一个新的promise对象，是下一个then的调用者
		return queryData('http://localhost:3000/data1');
	})
	//data用于接收上一个异步任务的处理结果
	.then(function(data){
		console.log(data);
		return queryData('http://localhost:3000/data2');
	})
	.then(function(data){
		console.log(data);
	});