一、什么是Promise
Promise作为异步编程的一种解决方案,里面保存一个异步操作的结果(resolve/reject),根据该异步操作的结果,进行后面的操作(then/catch)。
- 特点1:对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败),仅有异步操作的结果可以(resolve/reject)可以改变该状态。
- 特点2:一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:从pending变为fulfilled和从pending变为rejected。
二、Promise的方法
- then方法,Promise.prototype.then可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用,第二个回调函数(可选)是Promise对象的状态变为rejected时调用。这两个函数都接受Promise对象传出的值作为参数。
注:Promise对象通过resolve(x)或reject(x)传出x值,catch方法是then(null, rejection)的别名,用于指定发生错误时的回调函数。
function loadImageAsync(url) {
return new Promise(function(resolve, reject) {
const image = new Image();
image.onload = function() {
resolve(image);
};
image.onerror = function() {
reject(new Error('Could not load image at ' + url));
};
image.src = url;
});
}
loadImageAsync().then((x)=>console.log(x), (y)=>console.log(y));
//等同于
function loadImageAsync(url) {
return new Promise(function(resolve, reject) {
const image = new Image();
image.onload = function() {
resolve(image);
};
image.onerror = function() {
reject(new Error('Could not load image at ' + url));
};
image.src = url;
});
}
loadImageAsync().then((x)=>console.log(x)).catch((y)=>console.log(y));
上文为图片加载函数,异步操作的结果为resolve则调用第一个函数(x)=>console.log(x),reject则调用第二个函数(y)=>console.log(y)
then方法返回一个Promise对象,当then方法的回调函数也返回一个Promise对象A时,该对象A的异步状态结果将控制后续的链式操作
new Promise(function(resolve, reject) {
resolve('original Promise')}
).then((x)=>{console.log(x); return Promise.reject('new Promise')})
.catch((x)=>console.log(x))
- catch方法,Promise.prototype.catch方法会抓获未处理的reject或未处理的throw(error)。
//catch抓获未处理的reject异步处理结果
var p = new Promise(function(resolve, reject) {
reject('reject');
});
p.then((x)=>console.log(x))
.catch((y)=>console.log(y)); //reject
//catch抓获未处理的error;
var p = new Promise(function(resolve, reject) {
throw new Error('error');
});
p.then((x)=>console.log(x))
.catch((y)=>console.log(y)); //error
// ok
若该reject/throw已经被处理。则catch不会抓获,下文第二个catch不会输出内容(因为被第一个catch处理了)
var p = new Promise(function(resolve, reject) {
reject('reject');
});
p.then((x)=>console.log(x))
.catch((y)=>console.log(y)) //reject
.catch(()=>console.log('second catch')); //不捕捉错误
若resolve、reject已经发生,则后续的reject或throw不会被抓获。
var p = new Promise(function(resolve, reject) {
resolve('resolve')
reject('reject');
});
p.then((x)=>console.log(x)) //resolve
.catch((y)=>console.log(y));