JavaScript中的Promise
1. promise定义
Promise是异步编程的⼀种解决⽅案，⽐传统的解决⽅案（函数回调和事件）更合理，更强⼤。ES6中将Promise写进了语⾔标准，统⼀了⽤法，提供原⽣的Promise对象。
Promise是⼀个容器，容器中保存着某个未来才会结束的事件，通常是⼀个异步操作。从语法上看，Promise是⼀个对象，从它可以获取异步操作的消息。Promise提供统⼀的API，各种异步操作可以⽤同样的⽅法来处理。
Promise对象有以下两个特点：
1. 对象状态不受外界影响。Promise对象代表⼀个异步操作，有以下三个状态：
pending：进⾏中
fulfilled：已成功
reject：已失败
只有异步操作的结果，可以决定当前是哪⼀种状态，任何其他操作都⽆法改变这个状态。这也是Promise名字的由来，它意思是“⼀个承诺”，表⽰其他⼿段⽆法改变。
2. ⼀旦改变状态，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只能有两种可能：从pending变成fulfilled和从pending变成rejected。只要这两种情况发⽣，状态就凝固了，不会再变了，会⼀直保持这个结果，这时就称为resolved（已定型）。如果改变已经发⽣，再对Promise对象添加回调函数，也⼀样会⽴即得到这个结果。这和事件完全不同，事件的特点是，如果错过了它，再去监听，是得不到任何结果的。
注意我们这⾥说resolved，后⾯如果没有特别说明，都是指fulfilled状态，不包含rejected状态。
有了Promise对象，我们就可以将异步操作以同步操作的流程表达出来，从⽽避免层层嵌套的回调函数。此外，Promise对象提供统⼀的接⼝，使得控制异步操作更加容易。
Promise也有⼀些缺点。⾸先⽆法取消Promise，⼀旦新建它就要⽴即执⾏，⽆法中途取消。其次，如果不设置回调函数，Promise内部抛出的错误，不会反映到外部。第三，当处于pending状态时，⽆法得知⽬前进展到哪⼀个状态，是刚刚开始还是即将完成。
2. ⽤法
在ES6中，Promise是⼀个构造函数，⽤来⽣成Promise实例。如下代码：
let promise = new Promise((resolve, reject) => {
if (/** 异步操作成功 */) {
resolve (value)
} else {
reject (error)
}
})
Promise构造函数接受⼀个函数作为参数，这个函数的两个参数分别是resolve和reject。resolve，reject是两个函数，是JavaScript引擎提供的，不⽤⾃⼰部署。resolve函数的作⽤是，将Promise对象的状态从pending改为resolved，在异步函数操作成功的时候调⽤给，并将异步操作的结果作为参数传递出去。reject函数的作⽤是将Promise对象的状态从pending改为rejected，在异步操作失败的时候调⽤，并将异步操作报出的错误作为参数传递出去。
Promise实例⽣成之后，可以⽤then⽅法来分别指定resolved状态和rejected状态的回调函数，下⾯是⼀个简单的例⼦：
function timeout (ms) {
return new Promise((resolve, reject) => {
/*setTimeout⽅法可以接受三个参数，第⼀个是要执⾏的代码或者函数，第⼆个是毫秒数，后⾯所有的参数都是给第⼀个参数（函数）传递的参数*/
setTimeout(resolve, ms, 'done')
})
};
timeout(1000).then(value => {
console.log(value);
});
1. timeout⽅法返回⼀个Promise实例，表⽰⼀段时间后才会发⽣的结果
2. 过了指定ms指定的时间后，Promise实例的状态就会变为resolved，然后触发then⽅法指定的回调函数
3. then⽅法指定的回调函数中输出setTimeout⽅法传递的第三个参数“done”
通过下⾯的代码看看Promise对象的执⾏顺序：
let promise = new Promise((resolve, reject) => {
console.log('Promise');
resolve();
});
promise.then(() => {
console.log('Resolved');
});
console.log('Hi');
1. 实例化⼀个Promise对象，调⽤构造函数，⾸先执⾏console.log('Promise')；输出“Promise”，resolve()函数将Promise对象的状态从pending改为resolved
2. 使⽤then⽅法指定resolved状态回调函数
3. 输出“Hi”
4. 当期脚本所有同步任务执⾏完成后，执⾏then⽅法指定的回调函数，输出“resolved”
下⾯代码是使⽤Promise包装⼀个异步加载图⽚的⽅法：
function loadImageAsync (url) {
return new Promise((resolve, reject) => {
let image = new Image();
console.log(image)
resolve(image);
resolved是什么状态
};
reject(new Error('Could not load image at ' + url))
};
image.src = url;
})
}
loadImageAsync('avatar.csdn/2/1/1/3_m0_37682004.jpg').then(image => {
document.body.appendChild(image);
});
1. 定义loadImageAsync⽅法，在⽅法内部返回Promise对象
2. Promise函数内先定义⼀个image对象，image加载成功的时候调⽤resolve函数，将状态从pending改为resolved，加载失败的时候将调⽤reject函数，将状态从pending改为rejected。注意image对象有onload，onerror这两个回调函数。
3. 设置image对象的url
4. 调⽤loadImageAsync⽅法并⽤then⽅法指定Promise对象状态变为resolved时的回调函数，将image对象放在当前页⾯的body中
执⾏结果如下：
下⾯代码是⼀个⽤Promise实现Ajax操作的例⼦。getJSON是针对XMLHttpRequest对象的封装，⽤于发出⼀个针对JSON数据的HTTP请求，并返回⼀个Promise对象。注意在getJSON内部，resolve和rejecte函数调⽤时都带有参数，这个参数会传给then⽅法指定的函数。
let getJSON = function (url) {
let promise = new Promise((resolve, reject) => {
let client = new XMLHttpRequest();
client.open('GET', url);
client.setRequestHeader('Accpt', 'application/json');
client.send();
function handler () {
if (adyState !== 4) {
return;
}
if (this.status === 200) {
sponse);
} else {
reject(new Error(this.statusText));
}
}
});
return promise;
}
getJson('posts.json').then(json => {
console.log(json);
}, error => {
console.log(`出错了`, error);
})
如果调⽤resolve函数和reject函数时带有参数，那么他们的参数会传递给回调函数。reject函数的参数通常是⼀个Error对象实例，表⽰抛出的错误。resolve函数的参数除了正常的值，还有可能是另外⼀个Promise实例，如下：
let p1 = new Promise(function (resolve, reject) {
});
let p2 = new Promise(function (resolve, reject) {
resolve(p1)
})
上⾯代码中，p1和p2都是Promise的实例，p2的resolve⽅法将p1作为参数，即⼀个异步操作的返回结果是另外⼀个异步操作。注意这是p1的状态会传递给p2，就是说p1的状态决定了p2的状态。如果p1的状
态是pending，那么p2的回调函数就会等待p1的状态改变；如果p1的状态已经是resolved，那么p2的回调函数就会等待p1的状态改变；如果p1的状态是resolved或者rejected，那么p2的回调函数将会⽴即执⾏。
var p1 = new Promise((resolve, reject) => {
setTimeout(() => reject(new Error('fail')), 3000)
});
var p2 = new Promise((resolve, reject) => {
setTimeout(() => resolve(p1), 1000);
});
p2.then(result => console.log(result)).catch(error => console.log(error));
1. 定义Promise对象p1，3秒钟之后修改p1的状态为rejected
2. 定义Promise对象p2，1秒钟之后修改p2的状态为resolved，执⾏resolve函数的时候传递参数是对象p
1，p1也是⼀个Promise对象，导致p2⾃⼰的状态⽆效，p2的状态由p1决定，这样p2回调函数不再有效，then⽅法指定resolve函数不再执⾏，⽽是执⾏p1的reject⽅法
3. 执⾏p2的then⽅法，p2的resolve⽅法不执⾏，3秒钟后捕捉到p1的Error，触发catch⽅法指定的回调函数，输出fail
调⽤resolve或者reject并不会终结Promise的参数函数的执⾏，如下代码：
new Promise((resolve, reject) => {
resolve(1);
console.log(2);
}).then(r => {
console.log(r);
});
执⾏结果如下：
1. 定义Promise对象，先把promise对象的状态修改为resolve，输出2，由于resolved的Promise是在本轮事件循环的末尾执⾏，总是晚于本轮循环的同步任务，因此先输出2
2. 使⽤then⽅法指定Promise对象的的resolve⽅法输出1
3.Promise.prototype.then()
Promise实例有then⽅法，then⽅法定义在原型对象Promise.prototype上。它的作⽤是为Promise实例添加状态改变时的回调函数。then⽅法的第⼀个参数是resolved状态的回调函数，第⼆个参数是可选的，是rejected状态的回调函数。
then⽅法返回的是⼀个新的Promise实例，这个实例不是原来的那个Promise实例，因此可以使⽤链式写法，即then⽅法后⾯再调⽤另外⼀个then⽅法。
let getJson = function (url) {
let promise = new Promise((resolve, reject) => {
let client = new XMLHttpRequest();
client.open('GET', url);
client.setRequestHeader('Accpt', 'application/json');
client.send();
function handler () {
if (adyState !== 4) {
return;
}
if (this.status === 200) {
sponse);
} else {
reject(new Error(this.statusText));
}
}
});
return promise;
}
getJson('posts.json').then(function (post) {
return getJson(postmentURL);
}).then(function funcA (comments) {
console.log("Resolved: ", comments);
}, function funcB (err) {
console.log("Rejected: ", err);
});
上⾯代码中⽤的posts.json⽂件内容如下：
{
"commentURL": "posts.json"
}
输出结果如下：
代码分析如下：
1.  定义getJson⽅法
2.  调⽤getJson⽅法，resolve回调函数中⼜调⽤getJson⽅法（传递的参数是posts.json中的commentURL属性值），并返回这个Promise对象
3. 第⼆个then⽅法中会等待第⼀个then⽅法返回的Promise对象状态变化，如果变为resolved就调⽤funcA，如果状态变为rejected，就调⽤funcB
上⾯的代码可以使⽤箭头函数，这样看起来更简洁，如下：
getJson('posts.json').then(
post => getJson(postmentURL)
).then(
comments => console.log('resolved', comments),
err => console.log('rejected', err)
);
注意：
1. 箭头函数表达式笔函数表达式更加简洁，没有⾃⼰的this，arguments，auper，常⽤来那些本来需要匿名函数的地⽅，并且不能⽤作构造函数。
2. (参数1, 参数2, …, 参数N) => 表达式（单⼀）相当于 (参数1, 参数2, …, 参数N) =>{ return 表达式; }
4. Promise.property.catch()
Promise.property.catch()⽅法是Promise.property.then(null, rejection)的别名，⽤于指定Promise对象从pending变成reject时的回调函数。    getJson('posts.json').then(function (posts) {
}).catch(error => {
console.log('发⽣了错误', error)
})
上⾯代码中给，getJson⽅法返回的是⼀个Promise对象，如果该对象状态改变为resolved，则会调⽤then⽅法指定的回调函数；如果抛出错误，状态会变为rejected，就会调⽤catch⽅法指定的回调函数。另外then指定的回调函数中抛出错误，也会被catch捕获。看下⾯的代码：
var p = new Promise((resolve, reject) => {
if (true) {
resolve('fufilled')
} else {
reject()
}
});
p.then(val => console.log('fulfilled:', val))
.then(null, err => console.log('rejected:', err))
// 等同于
p.then(val => console.log('fulfilled:', val))
.catch(err => console.log('rejected', err));
输出结果如下：
上⾯代码中，promise抛出⼀个错误，就被catch⽅法指定的回调函数捕获。注意着两种写法是等价的。再看下⾯两种写法
const promise1 = new Promise((resolve, reject) => {
try {
throw new Error('test');
} catch (e) {
reject(e)
}
});
promise1.catch(error => {
console.log(error);
});
const promise2 = new Promise((resolve, reject) => {
reject(new Error('text'));
})
promise2.catch(error => console.log(error));
输出结果如下：
1. 定义Promise对象promise1，抛出Error，在catch语句中将当前对象状态从pending修改为rejected，并传递错误对象
2. 执⾏catch⽅法，输出错误对象
3. 定义Promise对象promise1，直接将当前状态从pending修改为rejected并将错误对象作为参数传递
4. 执⾏catch⽅法，输出错误对象
⽐较上⾯两种写法，可以说reject⽅法的作⽤等同于冒出错误。
如果Promise状态已经修改为resolved，则再抛出错误是⽆效的，看下⾯代码：
const promise = new Promise((resolve, reject) => {
resolve('ok')
throw new Error('test')
})
promise.then(value => console.log(value))
.catch(error => console.log(error))
输出结果如下：
1. 定义Promise对象，在⽅法中先调⽤resolve⽅法将状态从pending修改为resolved，并传递参数“ok”，再抛出错误。注意抛出错误的语句写在resolve后⾯，不会被捕获，等于没有抛出。因为Promise的状态⼀旦改变就永远不会再变了。
2. 在then⽅法中，添加状态变为resolved的回调⽅法，输出参数值“ok”
3. 在catch⽅法中，添加状态变为rejected的回调⽅法，输出错误。定义Promise对象的⽅法中没有调⽤r
eject⽅法，这⾥不会被调⽤
那如果在定义Promise对象的⽅法中既没有调⽤resolve⽅法，也没有调⽤reject⽅法，只抛出错误会怎么样呢？看看下⾯的代码：
const promise = new Promise((resolve, reject) => {
throw new Error('test')
})
promise.catch(error => console.log(error))
// 等同于
promise.then(null, error => console.log(error))
结果如下：
看来不仅仅是reject⽅法会把状态修改为rejected，抛出错误也可以。
Promise对象的错误具有冒泡性质，会⼀直向后传递，知道捕获为⽌，就是说，错误会被下⼀个catch语句捕获。
getJson('/post/1.json').then(function(post) {
return getJSON(postmentURL);
}).then(function(comments) {
// some code
}).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对象抛出的错误不会传递到外层代码，即不会有任何反应。看下⾯的代码：
const someAsyncThing = function() {
return new Promise(function(resolve, reject) {
// 下⾯⼀⾏会报错，因为x没有声明
resolve(x + 2);
});
};
someAsyncThing().then(function() {
console.log('everything is great');
});
setTimeout(() => { console.log(123) }, 2000);
输出结果如下：
1. 定义someAsyncThing⽅法，返回⼀个Promise对象
2. 调⽤resolve⽅法，传递参数中报错，浏览器执⾏到这⾥会报错并打印错误提⽰：Uncaught (in promise) ReferenceError: x is not defined，但是不会退出进程，最终脚本停⽌执⾏
3. 使⽤then⽅法定义resolved状态回调函数，输出“everything is great”
4. 3秒钟之后输出：123，Promise内部的错误不会影响到后⾯代码的执⾏，通俗的说是Promise会吃掉错误

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。