简单理解Promise
1.回调地狱
完成一个事件后才能进行下一个事件,函数体不断嵌套.
function f1(f) {
console.log("f1");
f();
}
function f2(f) {
console.log("f2");
f();
}
function f3(f) {
console.log("f3");
f();
}
function f4() {
console.log("f4");
}
f1(function(){
f2(function(){
f3(f4);
})
})
上面的代码可以理解为:
f1(f);
function f(){
f2(ff);
}
function ff(){
f3(f4);
}//顺序输出f1 f2 f3 f4
2.Promise改写
function f1() {
let p = new Promise(function(success, failed) {
console.log("f1");
success();
});
return p;
}
function f2() {
let p = new Promise(function(success, failed) {
console.log("f2");
success();
});
return p;
}
function f3() {
let p = new Promise(function(success, failed) {
console.log("f3");
success();
});
return p;
}
function f4() {
console.log("f4");
}
f1().then(f2).then(f3).then(f4); //顺序输出f1 f2 f3 f4
3.异步调用
function f1(f){
console.log("f1");
setTimeout(function(){
console.log("f11");
},4000);
f();
}
function f2(f){
console.log("f2");
setTimeout(function(){
console.log("f22");
},3000);
f();
}
function f3(f){
console.log("f3");
setTimeout(function(){
console.log("f33");
},2000);
f();
}
function f4(){
console.log("f4");
setTimeout(function(){
console.log("f44");
},1000);
}
f1(function(){
f2(function(){
f3(f4);
})
})
function f1() {
console.log("f1");
let p = new Promise(function(success, failed) {
setTimeout(function() {
console.log("f11");
}, 4000);
success();
});
return p;
}
function f2() {
console.log("f2");
let p = new Promise(function(success, failed) {
setTimeout(function() {
console.log("f22");
}, 3000);
success();
});
return p;
}
function f3() {
console.log("f3");
let p = new Promise(function(success, failed) {
setTimeout(function() {
console.log("f33");
}, 2000);
success();
});
return p;
}
function f4() {
console.log("f4");
setTimeout(function() {
console.log("f44");
}, 1000);
}
f1().then(f2).then(f3).then(f4);
//顺序输出f1 f2 f3 f4
//4个延时定时器同时启动 1s后输出f4,接着1s输出f3..至f1.
4.Promise解决了什么问题?
- 1.函数的嵌套调用;
- 2.处理多个异步请求并发.
5.正式介绍Promise
1.Promise的概念
Promise 对象是 JavaScript 的异步操作解决方案，为异步操作提供统一接口。Promise 可以让异步操作写起来，就像在写同步操作的流程，而不必一层层地嵌套回调函数。
Pormise的核心概念，只是为了将嵌套的调用方法改为平级调用.
2.Promise 构造函数
let p = new Promise(function (resolve, reject) {
// ...
if (/* 异步操作成功 */){
resolve(value);
} else { /* 异步操作失败 */
reject(error);
}
});
Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。(value和error可有可无)
p.then(function(value) {
// success
}, function(error) {
// failure
});
then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。其中，第二个函数是可选的，不一定要提供。这两个函数都接受Promise对象传出的值作为参数。
3.Promise.then的链式操作
Promise对象的then方法返回一个新的Promise对象（注意，不是原来那个Promise实例），因此可以通过链式调用then方法。
let p = new Promise(function(resolve,reject){
resolve();
});
p.then(function(){
return 123;
}).then(function(num){
console.log(num);
});//输出123
4.Promise.prototype.catch捕捉错误
Promise.prototype.catch()就是.then(null, rejection)或.then(undefined, rejection)
new Promise(function(resolve,reject){
reject();
}).catch(function(){
console.log("出现错误");
});//输出"出现错误"
5.Promise.prototype.finally
finally()方法用于指定不管 Promise 对象最后状态如何，都会执行的操作
let p = new Promise(function(resolve,reject){
if(3>2){
resolve();
}else{
reject();
}
});
p.then(function(){
console.log("对了!");
},function(){
console.log("错了!");
}).finally(function(){
console.log("结束!");
});//输出 对了 结束
6.Promise.all
Promise.all()方法接受一个数组作为参数，p1、p2、p3都是 Promise 实例,只有p1,p2,p3都成功的情况下,才会触发promise.all的方法,有一个没成功就不会执行.
let p1 = new Promise(function(resolve, reject) {
console.log("p1执行完了");
resolve();
});
let p2 = new Promise(function(resolve, reject) {
console.log("p2执行完了");
resolve();
});
let p3 = new Promise(function(resolve, reject) {
console.log("p3执行完了");
resolve();
});
Promise.all([p1,p2,p3]).then(function(){
console.log("全部都执行完了");//输出全部都执行完了
});
7.Promise.race
Promise.race()方法同样是将多个 Promise 实例，只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。
let p1 = new Promise(function(resolve, reject) {
console.log("p1开始执行");
setTimeout(function(){
resolve("p1最快");
},2000);
});
let p2 = new Promise(function(resolve, reject) {
console.log("p2开始执行");
setTimeout(function(){
resolve("p2最快");
},1000);
});
let p3 = new Promise(function(resolve, reject) {
console.log("p3开始执行");
setTimeout(function(){
resolve("p3最快");
},3000);
});
Promise.race([p1,p2,p3]).then(function(text){
console.log(text);//输出p2最快
});
8.Promise.resolve([value])
Promise.resolve()将现有对象转为 Promise 对象
Promise.resolve(123).then(function(num){
console.log(num);
})//输出123
9.Promise.reject([value])
Promise.reject().catch(function(){
console.log("错了");
})//输出 错了
6.Promise与Ajax
function ajax(type,url,isAync,data){
let xhr;
if(window.ActiveXObject){
xhr = new ActiveXObject("Microsoft.XMLHttp");
}else{
xhr = new XMLHttpRequest();
}
type = type.toLowerCase();
if(type == "get"){
let urlParam = url;
if(data != ""){
urlParam += "?" + data;
}
xhr.open(type,urlParam,isAync);
xhr.send();
}else{
xhr.open(type,url,isAync);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(data);
}
let p = new Promise(function(success,failed){
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
success(xhr.responseText);
}
}
});
return p;
}
ajax("post","01ajaxFun.php",true,"userName=laowang&userPwd=666",).then(function(resText){
console.log(resText); //输出laowang 666
});
function ajax(type,url,isAync,data,callBack){
let xhr;
if(window.ActiveXObject){
xhr = new ActiveXObject("Microsoft.XMLHttp");
}else{
xhr = new XMLHttpRequest();
}
type = type.toLowerCase();
if(type == "get"){
let urlParam = url;
if(data != ""){
urlParam += "?" + data;
}
xhr.open(type,urlParam,isAync);
xhr.send();
}else{
xhr.open(type,url,isAync);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(data);
}
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
callBack(xhr.responseText);
}
}
}
<?php
$name = $_REQUEST["userName"];
$pwd = $_REQUEST["userPwd"];
echo $name." ".$pwd;
?>
参考:
扫一扫
4424
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
