浅谈Promise

前言

我们常说Promise是用来解决回调地狱的,但是问到Promise是什么?这个问题一时还真不一定能答出来,所以为了更加了解它,我们一起初步分析下.

1.在控制台打印Promise

console.dir(Promise)输出如下:

2.什么是Promise对象

由控制台打印的结果可以看出Promise其实是一个构造函数，它有resolve，reject等静态方法;它的原型对象(prototype)上有then，catch方法，因此只要是Promise的实例对象，都可以通过原型链使用then,catch方法.

Promise 对象用于一个异步操作的最终完成（或失败）及其结果值的表示。简单点说，它就是用于处理异步操作的，异步处理成功了就执行成功的操作，异步处理失败了就捕获错误或者停止后续操作。

3.Promise的一般表示形式

new Promise(
    /* executor */
    function(resolve, reject) {
        if (/* success */) {
            // ...执行代码
            resolve();
        } else { /* fail */
            // ...执行代码
            reject();
        }
    }
)

Promise中的参数executor是一个执行器函数，它有两个参数resolve和reject。它内部通常有一些异步操作，如果异步操作成功，就调用resolve()来将该实例的状态置为fulfilled(已完成的)，如果失败，就调用reject()来将该实例的状态置为rejected(失败的).

Promise对象有三种状态：

(1)pending:初始状态,也称为未定状态，就是初始化Promise时，调用executor执行器函数后的状态(成功或失败状态)

(2)fulfilled:已完成状态，代表异步操作成功

(3)rejected:失败状态，代表异步操作失败

4.promise实例对象调用then方法

then(onfulfilled,onrejected)中有两个参数,当调用resolve方法后,Promise变为操作成功状态（fulfilled),就会调用then方法里面的onfulfilled回调函数;当调用reject方法后，Promise变为操作失败状态(rejected)就会调用then方法里面的onrejected回调函数.

var typ = new Promise(function (resolve, reject) {
          var flag = true;
          if(flag){
            resolve('这是数据1');
          }else{
            reject('这是数据2');
          }
        });
        typ.then(function(res){//状态为onfulfilled时执行
            console.log(res);
            console.log('这是成功操作');
        },function(err){ //状态为onrejected时执行
            console.log(err);
            console.log('这是失败的操作');
        });

当flag=true,执行结果为 // 这是数据1 这是成功操作

当flag=false,执行结果为 // 这是数据2 这是失败操作

5.promise实例对象调用catch方法

catch方法跟then方法中的第二个参数(onrejected)相同，当调用reject方法后，Promise变为操作失败状态(rejected)，就会执行catch方法里面的操作.

var typ = new Promise(function (resolve, reject) {
          var flag = false;
          if(flag){
            resolve('这是数据1');
          }else{
            reject('这是数据2');
          }
        });
        typ.then(function(res){//状态为onfulfilled时执行
            console.log(res);
            console.log('这是成功操作');
        }).catch(function(err){ //状态为onrejected时执行
            console.log(err);
            console.log('这是失败的操作');
        })

当flag=true,执行结果为 // 这是数据1 这是成功操作

当flag=false,执行结果为 // 这是数据2 这是失败操作

最后

希望整理的信息对您有所帮助,喜欢的话请帮忙点赞

如果有什么建议,欢迎在评论区留言

不足之处还请批评指教,谢谢!