promise里面接收一个参数,参数是函数。这个函数里面传入两个参数:resolve和reject,resolve是异步操作执行成功的回调函数,reject是异步操作执行失败的回调函数,resolve是将Promise的状态置为fullfiled,reject是将Promise的状态置为rejected。
then方法是一个链式操作,用来分别指定成功和失败的回调函数,then方法可以接受两个参数,第一个对应resolve状态的回调,第二个对应reject状态的回调。Promise对象除了then方法,还有一个catch方法,用于指定发生错误时的回调函数,其实它和then的第二个参数一样,用来指定reject的回调。
区别:then 的第一个函数出错了,后面的catch可以捕获,写到then的第二个函数则捕获不到。
es6文档笔记:
promise代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。
状态一旦改变,就不会再变。pending 变为 fulfilled 和从 pending 变为 rejected。这两种状态发生,会称为resolved(已定型)。
为了行文方便,本章后面的resolved统一只指fulfilled状态,不包含rejected状态。
resolve 和 reject 由 JavaScript 引擎提供,不用自己部署。
const promise=new Promise(function(resolve,reject){
if(异步操作成功){
resolve(value);
}else{
reject(error);
}
});
resolve在异步操作成功时调用,并将异步操作的结果,作为参数传递出去。reject在异步操作失败的时候调用,并将异步操作报出的错误,作为参数传递出去。
Promise实例生成以后,可以用then方法分别指定resolved状态和rejected状态的回调函数。
promise.then(function(value){
//success
},function(error){
//failure
});
举个例子:
function timeout(){
return new Promise((resolve,reject) => {
setTimeout(resolve, ms, 'done');
})
}
timeout(100).then((value) => {
console.log(value);
});
上面代码中,timeout方法返回一个Promise实例,表示一段时间以后才会发生的结果。过了指定的时间(ms参数)以后,Promise实例的状态变为resolved,就会触发then方法绑定的回调函数。
Promise新建后就会立即执行。
let promise = new Promise(function(resolve, reject) {
console.log('Promise');
resolve();
});
promise.then(function() {
console.log('resolved.');
});
console.log('Hi!');
// Promise
// Hi!
// resolved
上面代码中,Promise 新建后立即执行,所以首先输出的是Promise。然后,then方法指定的回调函数,将在当前脚本所有同步任务执行完才会执行,所以resolved最后输出。
let promise = new Promise(function(resolve, reject) {
console.log('Promise');
reject();
});
promise.then(function() {
console.log('resolved.');
});
console.log('Hi!');
//Promise
//Hi!
用promise实现一个Ajax
const getJSON = function(url) {
const promise = new Promise(function(resolve, reject){
const handler = function() {
if (this.readyState !== 4) {
return;
}
if (this.status === 200) {
resolve(this.response);
} else {
reject(new Error(this.statusText));
}
};
const client = new XMLHttpRequest();
client.open("GET", url);
client.onreadystatechange = handler;
client.responseType = "json";
client.setRequestHeader("Accept", "application/json");
client.send();
});
return promise;
};
getJSON("/posts.json").then(function(json) {
console.log('Contents: ' + json);
}, function(error) {
console.error('出错了', error);
});
resolve函数的参数除了正常的值以外,还可能是另一个 Promise 实例,比如像下面这样。
const p1 = new Promise(function (resolve, reject) {
// ...
});
const p2 = new Promise(function (resolve, reject) {
// ...
resolve(p1);
})
then方法返回的是一个新的Promise实例(注意,不是原来那个Promise实例)。因此可以采用链式写法,即then方法后面再调用另一个then方法。
应用:
图片加载:
const preLoadImage=function(path){
return new Promise(function(resolve,reject){
const image=new Image();
image.onload=resolve;
image.onerror=reject;
image.src=path;
});
};
promise.all()
我们需要从两个不同的URL分别获得用户的个人信息和好友列表,这两个任务是可以并行执行的,用Promise.all()
实现。
promise.race()
比如,同时向两个URL读取用户的个人信息,只需要获得先返回的结果即可。这种情况下,用Promise.race()
实现。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。