Promise对象.docx
《Promise对象.docx》由会员分享，可在线阅读，更多相关《Promise对象.docx（20页珍藏版）》请在冰豆网上搜索。
Promise对象
Promise对象
Promise对象Promise的含义基本用法Promise.prototype.then（）Promise.prototype.catch（）Promise.all（）Promise.race（）Promise.resolve（）Promise.reject（）两个有用的附加方法应用async函数
Promise的含义
Promise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。
它由社区最早提出和实现，ES6将其写进了语言标准，统一了用法，原生提供了Promise对象。
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。
从语法上说，Promise是一个对象，从它可以获取异步操作的消息。
Promise提供统一的API，各种异步操作都可以用同样的方法进行处理。
Promise对象有以下两个特点。
（1）对象的状态不受外界影响。
Promise对象代表一个异步操作，有三种状态：
Pending（进行中）、Resolved（已完成，又称Fulfilled）和Rejected（已失败）。
只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。
这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。
（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。
Promise对象的状态改变，只有两种可能：
从Pending变为Resolved和从Pending变为Rejected。
只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。
就算改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。
这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。
有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。
此外，Promise对象提供统一的接口，使得控制异步操作更加容易。
Promise也有一些缺点。
首先，无法取消Promise，一旦新建它就会立即执行，无法中途取消。
其次，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。
第三，当处于Pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。
如果某些事件不断地反复发生，一般来说，使用stream模式是比部署Promise更好的选择。
基本用法
ES6规定，Promise对象是一个构造函数，用来生成Promise实例。
下面代码创造了一个Promise实例。
varpromise=newPromise（function（resolve,reject）{
//...somecode
if（/*异步操作成功*/）{
resolve（value）;
}else{
reject（error）;
}
}）;
Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。
它们是两个函数，由JavaScript引擎提供，不用自己部署。
resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从Pending变为Resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从Pending变为Rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
Promise实例生成以后，可以用then方法分别指定Resolved状态和Reject状态的回调函数。
promise.then（function（value）{
//success
},function（error）{
//failure
}）;
then方法可以接受两个回调函数作为参数。
第一个回调函数是Promise对象的状态变为Resolved时调用，第二个回调函数是Promise对象的状态变为Reject时调用。
其中，第二个函数是可选的，不一定要提供。
这两个函数都接受Promise对象传出的值作为参数。
下面是一个Promise对象的简单例子。
functiontimeout（ms）{
returnnewPromise（（resolve,reject）=>{
setTimeout（resolve,ms,'done'）;
}）;
}
timeout（100）.then（（value）=>{
console.log（value）;
}）;
上面代码中，timeout方法返回一个Promise实例，表示一段时间以后才会发生的结果。
过了指定的时间（ms参数）以后，Promise实例的状态变为Resolved，就会触发then方法绑定的回调函数。
Promise新建后就会立即执行。
letpromise=newPromise（function（resolve,reject）{
console.log（'Promise'）;
resolve（）;
}）;
promise.then（function（）{
console.log（'Resolved.'）;
}）;
console.log（'Hi!
'）;
//Promise
//Hi!
//Resolved
上面代码中，Promise新建后立即执行，所以首先输出的是“Promise”。
然后，then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行，所以“Resolved”最后输出。
下面是异步加载图片的例子。
functionloadImageAsync（url）{
returnnewPromise（function（resolve,reject）{
varimage=newImage（）;
image.onload=function（）{
resolve（image）;
};
image.onerror=function（）{
reject（newError（'Couldnotloadimageat'+url））;
};
image.src=url;
}）;
}
上面代码中，使用Promise包装了一个图片加载的异步操作。
如果加载成功，就调用resolve方法，否则就调用reject方法。
下面是一个用Promise对象实现的Ajax操作的例子。
vargetJSON=function（url）{
varpromise=newPromise（function（resolve,reject）{
varclient=newXMLHttpRequest（）;
client.open（"GET",url）;
client.onreadystatechange=handler;
client.responseType="json";
client.setRequestHeader（"Accept","application/json"）;
client.send（）;
functionhandler（）{
if（this.readyState!
==4）{
return;
}
if（this.status===200）{
resolve（this.response）;
}else{
reject（newError（this.statusText））;
}
};
}）;
returnpromise;
};
getJSON（"/posts.json"）.then（function（json）{
console.log（'Contents:
'+json）;
},function（error）{
console.error（'出错了',error）;
}）;
上面代码中，getJSON是对XMLHttpRequest对象的封装，用于发出一个针对JSON数据的HTTP请求，并且返回一个Promise对象。
需要注意的是，在getJSON内部，resolve函数和reject函数调用时，都带有参数。
如果调用resolve函数和reject函数时带有参数，那么它们的参数会被传递给回调函数。
reject函数的参数通常是Error对象的实例，表示抛出的错误；resolve函数的参数除了正常的值以外，还可能是另一个Promise实例，表示异步操作的结果有可能是一个值，也有可能是另一个异步操作，比如像下面这样。
varp1=newPromise（function（resolve,reject）{
//...
}）;
varp2=newPromise（function（resolve,reject）{
//...
resolve（p1）;
}）
上面代码中，p1和p2都是Promise的实例，但是p2的resolve方法将p1作为参数，即一个异步操作的结果是返回另一个异步操作。
注意，这时p1的状态就会传递给p2，也就是说，p1的状态决定了p2的状态。
如果p1的状态是Pending，那么p2的回调函数就会等待p1的状态改变；如果p1的状态已经是Resolved或者Rejected，那么p2的回调函数将会立刻执行。
varp1=newPromise（function（resolve,reject）{
setTimeout（（）=>reject（newError（'fail'））,3000）
}）
varp2=newPromise（function（resolve,reject）{
setTimeout（（）=>resolve（p1）,1000）
}）
p2.then（result=>console.log（result））
p2.catch（error=>console.log（error））
//Error:
fail
上面代码中，p1是一个Promise，3秒之后变为rejected。
p2的状态由p1决定，1秒之后，p2调用resolve方法，但是此时p1的状态还没有改变，因此p2的状态也不会变。
又过了2秒，p1变为rejected，p2也跟着变为rejected。
Promise.prototype.then（）
Promise实例具有then方法，也就是说，then方法是定义在原型对象Promise.prototype上的。
它的作用是为Promise实例添加状态改变时的回调函数。
前面说过，then方法的第一个参数是Resolved状态的回调函数，第二个参数（可选）是Rejected状态的回调函数。
then方法返回的是一个新的Promise实例（注意，不是原来那个Promise实例）。
因此可以采用链式写法，即then方法后面再调用另一个then方法。
getJSON（"/posts.json"）.then（function（json）{
returnjson.post;
}）.then（function（post）{
//...
}）;
上面的代码使用then方法，依次指定了两个回调函数。
第一个回调函数完成以后，会将返回结果作为参数，传入第二个回调函数。
采用链式的then，可以指定一组按照次序调用的回调函数。
这时，前一个回调函数，有可能返回的还是一个Promise对象（即有异步操作），这时后一个回调函数，就会等待该Promise对象的状态发生变化，才会被调用。
getJSON（"/post/1.json"）.then（function（post）{
returngetJSON（mentURL）;
}）.then（functionfuncA（comments）{
console.log（"Resolved:
",comments）;
},functionfuncB（err）{
console.log（"Rejected:
",err）;
}）;
上面代码中，第一个then方法指定的回调函数，返回的是另一个Promise对象。
这时，第二个then方法指定的回调函数，就会等待这个新的Promise对象状态发生变化。
如果变为Resolved，就调用funcA，如果状态变为Rejected，就调用funcB。
如果采用箭头函数，上面的代码可以写得更简洁。
getJSON（"/post/1.json"）.then（
post=>getJSON（mentURL）
）.then（
comments=>console.log（"Resolved:
",comments）,
err=>console.log（"Rejected:
",err）
）;
Promise.prototype.catch（）
Promise.prototype.catch方法是.then（null,rejection）的别名，用于指定发生错误时的回调函数。
getJSON（"/posts.json"）.then（function（posts）{
//...
}）.catch（function（error）{
//处理getJSON和前一个回调函数运行时发生的错误
console.log（'发生错误！
',error）;
}）;
上面代码中，getJSON方法返回一个Promise对象，如果该对象状态变为Resolved，则会调用then方法指定的回调函数；如果异步操作抛出错误，状态就会变为Rejected，就会调用catch方法指定的回调函数，处理这个错误。
另外，then方法指定的回调函数，如果运行中抛出错误，也会被catch方法捕获。
p.then（（val）=>console.log（"fulfilled:
",val））
.catch（（err）=>console.log（"rejected:
",err））;
//等同于
p.then（（val）=>console.log（fulfilled:
",val））
.then（null,（err）=>console.log（"rejected:
",err））;
下面是一个例子。
varpromise=newPromise（function（resolve,reject）{
thrownewError（'test'）;
}）;
promise.catch（function（error）{
console.log（error）;
}）;
//Error:
test
上面代码中，promise抛出一个错误，就被catch方法指定的回调函数捕获。
注意，上面的写法与下面两种写法是等价的。
//写法一
varpromise=newPromise（function（resolve,reject）{
try{
thrownewError（'test'）;
}catch（e）{
reject（e）;
}
}）;
promise.catch（function（error）{
console.log（error）;
}）;
//写法二
varpromise=newPromise（function（resolve,reject）{
reject（newError（'test'））;
}）;
promise.catch（function（error）{
console.log（error）;
}）;
比较上面两种写法，可以发现reject方法的作用，等同于抛出错误。
如果Promise状态已经变成Resolved，再抛出错误是无效的。
varpromise=newPromise（function（resolve,reject）{
resolve（'ok'）;
thrownewError（'test'）;
}）;
promise
.then（function（value）{console.log（value）}）
.catch（function（error）{console.log（error）}）;
//ok
上面代码中，Promise在resolve语句后面，再抛出错误，不会被捕获，等于没有抛出。
Promise对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止。
也就是说，错误总是会被下一个catch语句捕获。
getJSON（"/post/1.json"）.then（function（post）{
returngetJSON（mentURL）;
}）.then（function（comments）{
//somecode
}）.catch（function（error）{
//处理前面三个Promise产生的错误
}）;
上面代码中，一共有三个Promise对象：
一个由getJSON产生，两个由then产生。
它们之中任何一个抛出的错误，都会被最后一个catch捕获。
一般来说，不要在then方法里面定义Reject状态的回调函数（即then的第二个参数），总是使用catch方法。
//bad
promise
.then（function（data）{
//success
},function（err）{
//error
}）;
//good
promise
.then（function（data）{//cb
//success
}）
.catch（function（err）{
//error
}）;
上面代码中，第二种写法要好于第一种写法，理由是第二种写法可以捕获前面then方法执行中的错误，也更接近同步的写法（try/catch）。
因此，建议总是使用catch方法，而不使用then方法的第二个参数。
跟传统的try/catch代码块不同的是，如果没有使用catch方法指定错误处理的回调函数，Promise对象抛出的错误不会传递到外层代码，即不会有任何反应。
varsomeAsyncThing=function（）{
returnnewPromise（function（resolve,reject）{
//下面一行会报错，因为x没有声明
resolve（x+2）;
}）;
};
someAsyncThing（）.then（function（）{
console.log（'everythingisgreat'）;
}）;
上面代码中，someAsyncThing函数产生的Promise对象会报错，但是由于没有指定catch方法，这个错误不会被捕获，也不会传递到外层代码，导致运行后没有任何输出。
注意，Chrome浏览器不遵守这条规定，它会抛出错误“ReferenceError:
xisnotdefined”。
varpromise=newPromise（function（resolve,reject）{
resolve（"ok"）;
setTimeout（function（）{thrownewError（'test'）},0）
}）;
promise.then（function（value）{console.log（value）}）;
//ok
//UncaughtError:
test
上面代码中，Promise指定在下一轮“事件循环”再抛出错误，结果由于没有指定使用try...catch语句，就冒泡到最外层，成了未捕获的错误。
因为此时，Promise的函数体已经运行结束了，所以这个错误是在Promise函数体外抛出的。
Node.js有一个unhandledRejection事件，专门监听未捕获的reject错误。
process.on（'unhandledRejection',function（err,p）{
console.error（err.stack）
}）;
上面代码中，unhandledRejection事件的监听函数有两个参数，第一个是错误对象，第二个是报错的Promise实例，它可以用来了解发生错误的环境信息。
。
需要注意的是，catch方法返回的还是一个Promise对象，因此后面还可以接着调用then方法。
varsomeAsyncThing=function（）{
returnnewPromise（function（resolve,reject）{
//下面一行会报错，因为x没有声明
resolve（x+2）;
}）;
};
someAsyncThing（）
.catch（function（error）{
console.log（'ohno',error）;
}）
.then（function（）{
console.log（'carryon'）;
}）;
//ohno[ReferenceError:
xisnotdefined]
//carryon
上面代码运行完catch方法指定的回调函数，会接着运行后面那个then方法指定的回调函数。
如果没有报错，则会跳过catch方法。
Promise.resolve（）
.catch（function（error）{
console.log（'ohno',error）;
}）
.then（function（）{
console.log（'carryon'）;
}）;
//carryon
上面的代码因为没有报错，跳过了catch方法，直接执行后面的then方法。
此时，要是then方法里面报错，就与前面的catch无关了。
catch方法之中，还能再抛出错误。
varsomeAsyncThing=function（）{
returnnewPromise（function（resolve,reject）{
//下面一行会报错，因为x没有声明
resolve（x+2）;
}）;
};
someAsyncThing（）.then（function（）{
returnsomeOtherAsyncThing（）;
}）.catch（function（error）{
console.log（'ohno',error）;
//下面一行会报错，因为y没有声明
y+2;
}）.then（function（）{
console.log（'carryon'）;
}）;
//ohno[ReferenceError:
xisnotdefined]
上面代码中，catch方法抛出一个错误，因为后面没有别的catch方法了，导致这个错误不会被捕获，也不会传递到外层。
如果改写一下，结果就不一样了。
someAsyncThing（）.then（function（）{
returns
升级会员 