一、Promise
1、Promise对象代表一个异步操作，有三种状态，pending（进行中）、fulfilled（已成功）、rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态，这也是promise这个名字的由来“承若”。
2、一旦状态改变就不会再变，任何时候都可以得到这个结果。
promise对象的状态改变，只有两种可能：从pending变为fulfilled，从pending变为rejected。
这时就称为resolved（已定型）。
如果改变已经发生了，你再对promise对象添加回调函数，也会立即得到这个结果。
这与事件（event）完全不同，事件的特点是：如果你错过了它，再去监听是得不到结果的。
3、promise必须实现then方法（可以说，then就是promise的核心），而且then必须返回一个promise，同一个promise的then可以调用多次，并且回调的执行顺序跟它们被定义时的顺序一致。
4、then方法接受两个参数，第一个参数是成功时的回调，在promise由“等待”态转换到“完成”态时调用，另一个是失败时的回调，在promise由“等待”态转换到“拒绝”态时调用。
二、Promise的语法
MDN web docs 官方的语法
new Promise( function(resolve, reject) {...} /* executor */ );
举例
var isOpen = true;
//创建一个Promise对象名为 buyCloth
//resolve 和 reject 参数是函数
//当承诺实现了的时候，就会调用resolve函数，然后对应的promise的状态就变成fulfilled；
//当承诺没有实现的时候，就会调用reject函数，其状态变成了rejected
var buyCloth = new Promise(function(resolve,reject){
if(isOpen){
var cloth = {
color:'red',
price:'$120'
};
resolve(cloth);
}else{
var err = new Error("the shop is closed");
reject(err);
}
});
var testPromise = function(){
buyCloth.then(function(fulfilled){
console.log(fulfilled);
}).catch(function(rejected){
console.log(rejected.message);
});
}
我们定义一个 testPromise 函数来调用 promise，
.then() 和.catch() 函数来处理 promise 返回的结果。
1、.then()
有两个参数：onFulfilled 和 onRejected
onFulfilled当然是Promise 实现的时候调用，onRejected就是Promise被拒绝的时候调用的。
如果传入的 onFulfilled 参数类型不是函数，则会在内部被替换为(x) => x ，即原样返回 promise 最终结果的函数
2、.catch()
是当promise没有实现的时候，状态为rejected时被使用。请求失败则调用error函数。
.then() 里面的函数有一个fulfilled的参数，这个参数的值就是promise实现后调用resolve()所返回的值，在这里就是 cloth ；
同理.catch() 里面的一个rejected参数的值就是promise没有实现而调用reject()所返回的错误信息值在这个例子就是 err 。
三、完整代码
1、新建一个b.js文件
testPromise() 无参调用Promise方法
testPromise2(boolen isOpen) 传参调用Promise方法
function alerTest(){
alert("test");
}
function testSetTimeout(){
var time = 0;
for (var i = 0; i <= 3; i++) {
console.log(i+" begin");
time = new Date().getTime();
setTimeout(function(){
console.log(new Date().getTime()-time);
console.log("hi");
},600);
console.log(i+" end");
}
}
var isOpen = true;
//创建一个Promise对象名为 buyCloth
//resolve 和 reject 参数是函数
//当承诺实现了的时候，就会调用resolve函数，然后对应的promise的状态就变成fulfilled；
//当承诺没有实现的时候，就会调用reject函数，其状态变成了rejected
var buyCloth = new Promise(function(resolve,reject){
if(isOpen){
var cloth = {
color:'red',
price:'$120'
};
resolve(cloth);
}else{
var err = new Error("the shop is closed");
reject(err);
}
});
var testPromise = function(){
buyCloth.then(function(fulfilled){
console.log(fulfilled);
}).catch(function(rejected){
console.log(rejected.message);
});
}
//通过前端调用把 isShopOpen 值传入
var buyCloth2 = function(isShopOpen){
//then必须返回一个promise
return new Promise(function(resolve,reject){
if(isShopOpen){
var cloth = {
color:'red',
price:'$120'
};
resolve(cloth);
}else{
var err = new Error("the shop is closed");
reject(err);
}
});
}
var testPromise2 = function(isOpen){
buyCloth2(isOpen).then(function(fulfilled){
console.log(fulfilled);
}).catch(function(rejected){
console.log(rejected.message);
});
}
2、同一目录下新建一个 test.html
我们定义三个按钮去调用Promise
testPromise()，testPromise2(true)，testPromise2(false)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="b.js"></script>
</head>
<body>
<p>
js的单线程机制，当程序执行到setTimeout时，会跳过setTimeout需要等候的时间，执行后面的程序，
到了相应的时间后，js才把setTimeout的程序放到队列中.
至于会不会在准确的时间去执行setTimeout，这是说不准的，因为这要等之前就正在执行的程序执行完才轮到setTimeout的执行，
所以一般情况下，setTimeout的程序一般会在所设定的时间之后才执行。
</p>
<button type="button" onclick='testSetTimeout()'>testSetTimeout</button>
<p>Promise</p>
<button type="button" onclick='testPromise()'>testPromise</button>
<button type="button" onclick='testPromise2(true)'>testPromiseYes</button>
<button type="button" onclick='testPromise2(false)'>testPromiseNo</button>
</body>
</html>
网友评论