一，什么是Promise?
Promise是异步任务的终极解决方案，Promise解决异步任务可以完美解决回调地狱问题
二，Promise的三种状态
Promise 必须为以下三种状态之一：
等待态（Pending）、执行态（Fulfilled）和拒绝态（Rejected）。
一旦Promise 被
resolve或reject，不能再迁移至其他任何状态（即状态 immutable）。
三，Promise的基本过程
1. 初始化 Promise 状态（pending）
2. 立即执行 Promise 中传入的 fn 函数，将Promise 内部 resolve、reject 函数作为参数传递给 fn ，按事件机制时机处理
3. 执行 then(..) 注册回调处理数组（then 方法可被同一个 promise 调用多次
四，从回调地狱开始(冗余-->后面有解决办法)
$.ajax({
url: 'http://api.tianapi.com/duilian/index?key=1e6ecc58567a22475e459cfac3b00413',
success: function(data) {
// console.log(data);
ret = data;
console.log(ret); //这个是data中的数据
$.ajax({
url: 'http://api.tianapi.com/zmsc/index?key=1e6ecc58567a22475e459cfac3b00413',
success: function(data1) {
console.log(data1);
$.ajax({
url: 'http://api.tianapi.com/pyqwenan/index?key=1e6ecc58567a22475e459cfac3b00413',
success: function(data2) {
console.log(data2);
}
})
}
})
}
})
五，Promise基本使用
- 实例化Promise对象，构造函数中传递参数，该函数中用于处理异步任务
- resolve 和 reject 两个参数用于处理成功和失败两种情况，并通过p.then获取处理结果
语法格式：
var p = new Promise(function(resolve,reject){
//成功时调用：resolve()
//失败时调用：reject()
});
p.then(function(ret){
//从resolve得到的正常结果,
},function(ret){
//从reject得到错误的消息
});
var p = new Promise(function(resolve, reject) {
//这里用于实现异步任务
setTimeout(function() {
var flag = true;
if (flag) {
resolve('成功');
} else {
reject('失败');
}
}, 1000)
});
p.then(function(data) {
console.log(data);
}, function(info) {
console.log(info);
});
六，基于promise实现原生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://api.tianapi.com/esports/index?key=1e6ecc58567a22475e459cfac3b00413&num=10')
.then(function(data) {
console.log(data);
}, function(info) {
console.log(info);
})
七，发送多个Ajax请求，保证顺序，解决回调地狱
QueryData('http://api.tianapi.com/pyqwenan/index?key=1e6ecc58567a22475e459cfac3b00413')
.then(function(data) {
console.log(data)
return QueryData('http://api.tianapi.com/esports/index?key=1e6ecc58567a22475e459cfac3b00413&num=10');
})
.then(function(data) {
console.log(data);
return QueryData('http://api.tianapi.com/duilian/index?key=1e6ecc58567a22475e459cfac3b00413');
})
.then(function(data) {
console.log(data);
});
八，Promise的then方法参数中函数的返回值
①：返回Promise实例对象
返回该实例对象会调用下一个then
②：返回普通值
返回普通值会直接传递给下一个then,通过then参数中函数的参数接收该值
九，Promise常用API--->实例方法
p.then()得到异步任务的正确结果
p.catch()获取异常信息
p.finally()成功与否都会执行(尚且不是正式标准)
语法格式：
console.dir(Promise);
QueryData()
.then(function(data) {
console.log(data)
})
.catch(function(data) {
console.log(data);
})
.finally(function() {
console.log('finished');
});
十，Promise常用API--->对象方法
①：Promise.all()并发处理多个异步任务，所有任务执行完才能得到结果
语法格式：
Promise.all([p1,p2,p3]).then(return) =>{
console.log(result)
})
②：Promise.race()并发处理多个异步任务，只要有一个任务完成就能得到结果
语法格式：
Promise.race([p1,p2,p3]).then(return) =>{
console.log(result)
})
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;
}
var p1 = QueryData('http://api.tianapi.com/tiangou/index?key=1e6ecc58567a22475e459cfac3b00413')
var p2 = QueryData('http://api.tianapi.com/esports/index?key=1e6ecc58567a22475e459cfac3b00413&num=10')
var p3 = QueryData('http://api.tianapi.com/zmsc/index?key=1e6ecc58567a22475e459cfac3b00413')
// Promise.all([p1, p2, p3]).then(function(result) {
// console.log(result);
// })
Promise.race([p1, p2, p3]).then(function(result) {
console.log(result);
})
