Javascript中内置的延迟对象Promise资料.docx

Javascript中内置的延迟对象Promise资料.docx

《Javascript中内置的延迟对象Promise资料.docx》由会员分享，可在线阅读，更多相关《Javascript中内置的延迟对象Promise资料.docx（16页珍藏版）》请在冰点文库上搜索。

Javascript中内置的延迟对象Promise资料

Javascript中内置的延迟对象Promise

阅读目录

　　Promise的基本使用：

　　Promise实例的三种状态：

　　then方法：

　　catch方法：

　　构造函数Promise的四个方法：

　　官方的例子：

　　其他：

　　浏览器支持情况：

　　Promise的基本使用：

　　利用Promise是解决JS异步执行时候回调函数嵌套回调函数的问题，更简洁地控制函数执行流程；

　　通过new实例化Promise，构造函数需要两个参数，第一个参数为函数执行成功以后执行的函数resolve，第二个函数为函数执行失败以后执行的函数reject：

运行下面代码

newPromise（function（resolve,reject）{

}）;

　　通过Promise，我们把回调函数用线性的方式写出来，而不是一层套一层，这个函数有四层回调；

运行下面代码

复制代码

fn（"args",function（a）{

fn1（"foo",function（b）{

fn2（"bar",function（c）{

fn3（"baz",function（d）{

alert（"回调成功，获知的内容为：

"+a+b+c+d）

}）

}）

}）

}）

复制代码

　　以上的Demo只有包含成功的回调，如果失败的回调也算的话，也就更麻烦了；

　　如果使用Promise的方式，我们可以改装成线性的代码，更加符合阅读的习惯，只要在then函数下写逻辑即可；

运行下面代码

复制代码

newPromise（function（resolve,reject）{

resolve

（1）;

}）.then（function（val）{

console.log（val）;

returnnewPromise（function（resolve,reject）{

resolve

（2）;

}）;

}）.then（function（val）{

console.log（val）;

returnnewPromise（function（resolve,reject）{

resolve（3）;

}）;

}）.then（function（val）{

console.log（val）;

returnnewPromise（function（resolve,reject）{

resolve（4）;

}）;

}）.then（function（val）{

console.log（val）;

}）;

复制代码

　　这是一个ajax异步获取数据的例子，我们使用了回调函数；

运行下面代码

复制代码

复制代码

　　因为ES6内置了Promise，我们可以把以上的callback改写成promise的方式，首先ajax函数返回一个Promise对象；

运行下面代码

复制代码

复制代码

回到顶部

　　Promise实例的三种状态：

　　每一个实例化的Promise都有三个状态；pending（等待）rejected（拒绝）resolved（解决），默认的状态为pending，如果执行了resolve（），那么这个promise的状态会变为resolve，如果执行了reject（）,那么这个promise的状态就会变成rejected，而且这些状态是不可撤销的，一经更改，不会再变了；

回到顶部

　　then方法：

　　promise有一个then方法，then方法接收两个参数，第一个为函数的成功回调，第二个为函数的失败回调：

运行下面代码

复制代码

varpromise=newPromise（function（resolve,reject）{

resolve（）;//执行成功回调;

}）;

console.log（0）;

promise.then（function（val）{

console.log

（1）;

},function（）{

console.log（"失败"）;

}）;

console.log（"2"）;

复制代码

运行下面代码

复制代码

varpromise=newPromise（function（resolve,reject）{

reject（）;

}）;

console.log（0）;

promise.then（function（val）{

console.log

（1）;

},function（）{

console.log（"失败"）;

}）;

console.log（"2"）;

复制代码

　　then方法每一次都是返回不同的Promise实例，then的第一个参数是成功回调，这个成功回调的参数为：

上一个Promise实例执行resolve方法的参数；

　　一般来说，then方法会返回当前的promise，如果在then方法里面return一个新的Promise实例，那么此时的then返回的就是新的Promise实例，利用这个特性，就可以实现多层回调；

运行下面代码

复制代码

newPromise（function（resolve,reject）{

resolve

（1）;

}）.then（function（val）{

console.log（val）;

returnnewPromise（function（resolve,reject）{

resolve

（2）;

}）;

}）.then（function（val）{

console.log（val）;

returnnewPromise（function（resolve,reject）{

resolve（3）;

}）;

}）.then（function（val）{

console.log（val）;

returnnewPromise（function（resolve,reject）{

resolve（4）;

}）;

}）.then（function（val）{

console.log（val）;

}）;

复制代码

　　不管代码是异步还是同步的，都可以用Promise的then方法，同步的代码直接写在then方法第一个参数，把需要参数通过resolve传给下一个then方法，

　　如果是异步的代码，就直接return一个Promise实例：

运行下面代码

复制代码

newPromise（function（resolve,reject）{

resolve

（1）;

}）.then（function（val）{

console.log（val）;

return2;

}）.then（function（val）{

console.log（val）;

return3;

}）.then（function（val）{

console.log（val）;

returnnewPromise（function（resolve,reject）{

//异步操作些这里

resolve（4）;

}）;

}）.then（function（val）{

console.log（val）;

return5;

}）.then（function（val）{

console.log（val）;

}）;

复制代码

回到顶部

　　catch方法：

　　catch方法和失败回调时一样的，如果上一个异步函数抛出了错误了，错误会被捕获，并执行catch方法或者失败回调；

运行下面代码

复制代码

varpromise=newPromise（function（resolve,reject）{

resolve（）;//执行成功回调;

}）;

console.log（0）;

promise.then（function（val）{

console.log（"成功"）;

thrownewError（"heheda"）;

}）.catch（function（e）{

console.log（e）;

}）.then（function（）{

console.log（"继续执行"）;

}）;

复制代码

　　Promise中的错误是会一层层传递的，如果错误没有没有被捕获，会一直传递给下一个promise对象，直到被捕获为止，然后继续往下执行：

运行下面代码

复制代码

newPromise（function（resolve,reject）{

resolve

（1）;

}）.then（function（val）{

console.log（val）;

returnnewPromise（function（resolve,reject）{

thrownewError（"err"）;

}）;

}）.then（function（val）{

console.log（val）;

returnnewPromise（function（resolve,reject）{

resolve（3）;

}）;

}）.then（function（val）{

console.log（val）;

returnnewPromise（function（resolve,reject）{

resolve（4）;

}）;

}）.then（function（val）{

console.log（val）;

}）.catch（function（err）{

console.log（err）;

}）.then（function（）{

console.log（"继续执行"）

}）

复制代码

回到顶部

　　构造函数Promise的四个方法：

　　构造函数Promise有四个方法,Promise.all，Promise.race,Promise.reject,Promise.resolve：

　　Promise.all（iterable）

　　　　返回一个promise对象，当iterable参数里所有的promise都被解决后，该promise也会被解决

　　　　要注意all方法是Promise函数的方法，不是实例的方法，参数是一个数组，数组里面全是Promise的实例：

运行下面代码

复制代码

varp0=newPromise（function（resolve）{

setTimeout（function（）{

resolve（0）

},1000）;

}）

varp1=newPromise（function（resolve）{

setTimeout（function（）{

resolve

（1）

},2000）;

}）

varp2=newPromise（function（resolve）{

setTimeout（function（）{

resolve

（2）

},3000）;

}）

Promise.all（[p0,p1,p2]）.then（function（arr）{

console.log（arr）

}）

复制代码

　　Promise.race（iterable）

　　　　当iterable参数里的任意一个子promise被成功或失败后，父promise马上也会用子promise的成功返回值或失败详情作为参数调用父promise绑定的相应句柄，并返回该promise对象。

　　Promise.reject（reason）

　　　　调用Promise的rejected句柄，并返回这个Promise对象。

　　Promise.resolve（value）

　　　　用成功值value解决一个Promise对象。

如果该value为可继续的（thenable，即带有then方法），返回的Promise对象会“跟随”这个value，采用这个value的最终状态；否则的话返回值会用这个value满足（fullfil）返回的Promise对象。

回到顶部

　　官方的例子：

运行下面代码

复制代码