JavaScript之Promise对象

来自:开源中国
时间:2019-08-25
阅读:

Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了 Promise 对象。

Promise 对象是一个代理对象(代理一个值),被代理的值在 Promise 对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法(handlers)。 这让异步方法可以像同步方法那样返回值,但并不是立即返回最终执行结果,而是一个能代表未来出现的结果的 Promise 对象。 Promise 对象有以下两个特点:

对象的状态不受外界影响。Promise 对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功) 和 rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是Promise这个名字的由来,它的英语意思就是“承诺”,表示其他手段无法改变。 Promise 对象的状态改变,只有两种可能:从 pending 变为 fulfilled 和 从 pending 变为 rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果,这时就称为 resolved(已定型)。如果改变已经发生了,你再对 Promise 对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。 基本用法

new Promise( function(resolve, reject) {...} /* executor */  );
  • Promise 对象的初始化接收一个执行函数 executor,executor 是带有 resolve 和 reject 两个参数的函数 。

  • Promise 构造函数执行时会立即调用 executor 函数, resolve 和 reject 两个函数作为参数传递给 executor(executor 函数在 Promise 构造函数返回新建对象前被调用)。

  • resolve 和 reject 函数被调用时,分别将 promise 的状态改为 fulfilled(完成) 或 rejected(失败)。executor 内部通常会执行一些异步操作,一旦完成,可以调用 resolve 函数来将 promise 状态改成 fulfilled,或者在发生错误时将它的状态改为 rejected。

如果在 executor 函数中抛出一个错误,那么该 promise 状态为 rejected。executor函数的返回值被忽略。

先看个示例:(注:后文的示例均使用 setTimeout 模拟异步操作)

// 从 pending 变为 fulfilled
var p = new Promise(function(resolve, reject) {
    setTimeout(function() {
        console.log('Hi,');
        resolve('promise fulfilled!');
    }, 500);
}).then(function(data) {
    console.log(data);
});
// Hi,
// promise fulfilled!

// 从 pending 变为 rejected
var p = new Promise(function(resolve, reject) {
    setTimeout(function() {
        console.log('Hi,');
        reject('promise rejected!');
    }, 500);
}).then(null, function(error) {
    console.log(error); //欢迎加入全栈开发交流圈一起学习交流:864305860 
});                              //面向1-3年前端人员
// Hi,                           //帮助突破技术瓶颈,提升思维能力  
// promise rejected!

从 pending 变为 fulfilled 这段代码,当执行 new Promise() 时,传入的执行函数就立即执行了,此时其内部有一个异步操作(过 500ms 之后执行),等过了 500ms 之后先执行 console.log('Hi,'); 输出 Hi,,此时 promise 的状态为 pending(进行中),而执行 resolve('Promise!'); 则修改 promise 的状态为 fulfilled(完成),然后我们调用 then() 接收 promise 在 fulfilled 状态下传递的值,此时输出 'Promise!'。

同理,从 pending 变为 rejected 这段代码基本差不多,不同的是异步操作调用了 reject 方法,then 方法使用第二个参数接收 rejected 状态下传递的值。

Promise.prototype.then()

then 的作用是为 Promise 实例添加状态改变时的回调函数。

then 方法的第一个参数是 resolved 状态的回调函数,第二个参数(可选)是 rejected 状态的回调函数。

var p = new Promise(function(resolve, reject) {
    setTimeout(function() {
        console.log('Hi,');

        // 模拟请求,请求状态为200代表成功,不是200代表失败
        if (status === 200) {
            resolve('promise fulfilled!');
        } else {
            reject('promise rejected!');
        }
    }, 500);
}).then(function(data) {
    console.log(data);
}, function(error) {                    
    console.log(error);           
});                                      
// 如果调用 resolve 方法,输出如下:
// Hi,
// promise fulfilled!

// 如果调用 reject 方法,输出如下:
// Hi,
// promise rejected!             

then 方法返回的是一个新的 Promise 实例(注意,不是原来那个Promise实例)。因此可以采用链式写法,即 then 方法后面再调用另一个 then 方法。采用链式的 then,可以指定一组按照次序调用的回调函数。这时,前一个回调函数,有可能返回的还是一个 Promise 对象(即有异步操作),这时后一个回调函数,就会等待该 Promise 对象的状态发生变化,才会被调用。

var p = new Promise(function(resolve, reject) {
    setTimeout(function() {
        console.log('Hi,');
        resolve();
    }, 500);
}).then(function() {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            // 模拟请求,请求状态为200代表成功,不是200代表失败
            if (status === 200) {
                resolve('promise fulfilled!');
            } else {
                reject('promise rejected!');
            }
        });
    })
}).then(function(data) {
    console.log(data); //欢迎加入全栈开发交流圈一起学习交流:864305860 
}, function(error) {       //面向1-3年前端人员
    console.log(error);  //帮助突破技术瓶颈,提升思维能力  
});
// 如果第一个 then 调用 resolve 方法,第二个 then 调用第一个回调函数,最终输出如下:
// Hi,
// promise fulfilled!

// 如果第一个 then 调用 reject 方法,第二个 then 调用第一个回调函数,最终输出如下:
// Hi,
// promise rejected!
Promise.prototype.catch()

catch 方法是.then(null, rejection)的别名,用于指定发生错误时的回调函数。

所以下面代码:

var p = new Promise(function(resolve, reject) {
    setTimeout(function() {
        console.log('Hi,');

        // 模拟请求,请求状态为200代表成功,不是200代表失败
        if (status === 200) {
            resolve('promise fulfilled!');
        } else {
            reject('promise rejected!');
        }
    }, 500);
}).then(function(data) {
    console.log(data);
}, function(error) {
    console.log(error);
});

等价于:

var p = new Promise(function(resolve, reject) {
    setTimeout(function() {
        console.log('Hi,');

        // 模拟请求,请求状态为200代表成功,不是200代表失败
        if (status === 200) {
            resolve('promise fulfilled!');
        } else {
            reject('promise rejected!');
        }
    }, 500);
}).then(function(data) {
    console.log(data);
}).catch(function(error) {
    console.log(error);
});

如果没有使用 catch 方法或者 then 第二个参数指定错误处理的回调函数,Promise 对象抛出的错误不会传递到外层代码,即不会有任何反应,这跟传统的 try/catch 代码块是不同。

catch 方法返回的还是一个 Promise 对象,因此后面还可以接着调用 then 方法。

catch 方法与 .then(null, rejection) 的不同:

如果异步操作抛出错误,状态就会变为 rejected,就会调用 catch 方法指定的回调函数,处理这个错误。 then 方法指定的回调函数,如果运行中抛出错误,也会被 catch 方法捕获。 catch 方法的写法更接近同步的写法(try/catch)。 因此,建议总是使用 catch 方法,而不使用 then 方法的第二个参数。

Promise.prototype.finally()

finally 方法用于指定不管 Promise 对象最后状态如何,都会执行的操作。该方法是 ES2018 引入标准的。

var p = new Promise(function(resolve, reject) {
    setTimeout(function() {
        console.log('Hi,');

        // 模拟请求,请求状态为200代表成功,不是200代表失败
        if (status === 200) {
            resolve('promise fulfilled!');
        } else {
            reject('promise rejected!');
        }
    }, 500);
}).then(function(data) {
    console.log(data);
}).catch(function(error) {
    console.log(error);
}).finally(function() {
    console.log('I am finally!');
});

上面代码中,不管 promise 最后的状态,在执行完 then 或 catch 指定的回调函数以后,都会执行 finally 方法指定的回调函数。

返回顶部
顶部