js promise看这篇就够了

1、背景node

  你们都知道nodejs很快,为何会这么快呢,缘由就是node采用异步回调的方式来处理须要等待的事件,使得代码会继续往下执行不用在某个地方等待着。可是也有一个很差的地方,当咱们有不少回调的时候,好比这个回调执行完须要去执行下个回调,而后接着再执行下个回调,这样就会形成层层嵌套,代码不清晰,很容易进入“回调监狱”,就容易形成下边的例子:es6

async(1, function(value){
  async(value, function(value){
    async(value, function(value){
      async(value, function(value){
        async(value, function(value){
          async(value, final);
        });
      });
    });
  });
});

  这样的写法会让人崩溃,那么有什么办法能够解决这个问题呢,或者有其余别的写法吗?答案是有的,es6新出的promise对象已经es7的async await均可以解决这个问题,固然这里先介绍promise对象,es7的async await将在后边的文章中分享。下边未来介绍Promise对象。api

2、简介promise

  Promise,他是一个对象,是用来处理异步操做的,可让咱们写异步调用的时候写起来更加优雅,更加美观便于阅读。顾名思义为承诺、许诺的意思,意思是使用了Promise以后他确定会给咱们答复,不管成功或者失败都会给咱们一个答复,因此咱们就不用担忧他跑了哈哈。因此,Promise有三种状态:pending(进行中),resolved(完成),rejected(失败)。只有异步返回的结构能够改变其状态。因此,promise的过程通常只有两种:pending->resolved或者pending->rejected。异步

  promise对象还有一个比较经常使用的then方法,用来执行回调函数,then方法接受两个参数,第一个是成功的resolved的回调,另外一个是失败rejected的回调,第二个失败的回调参数可选。而且then方法里也能够返回promise对象,这样就能够链式调用了。接下来上代码:async

var Pro = function (time) {
            //返回一个Promise对象
            return new Promise(function (resolve, reject) {
                console.log('123');
                //模拟接口调用
                setTimeout(function () {
                    //这里告诉Promise 成功了,而后去执行then方法的第一个函数
                    resolve('成功返回');
                }, time);
            })
        };
        (function(){
            console.log('start');
            Pro(3000)
            .then(function(data){
                console.log(data);
                return Pro(5000);})
            .then(function(data){
                console.log(data);
                console.log('end');
            })
        })();

  上边代码中,定义了一个Pro变量,而后把一个匿名函数赋给他,函数返回一个Promise对象,而后对象里边接收一个函数,分别把resolve跟reject方法当参数传进去,用setTimeOut来模拟异步请求,当执行resolve方法后就会调用then方法的一个函数。结果以下:函数

3、Promise 的api spa

  一、Promise.resolve()
  二、Promise.reject()
  三、Promise.prototype.then()
  四、Promise.prototype.catch()
  五、Promise.all() // 全部的都有完成,至关于 且
  六、Promise.race() // 完成一个便可,至关于 或prototype

  一、Promise.resolve()的做用将现有对象转为Promise对象resolvedl;Promise.resolve('test')==new Promise(resolve=>resolve('test'))code

  二、Promise.reject()也是返回一个Promise对象,状态为rejected;

  三、then方法上边已经作介绍,这里就再也不介绍。

  四、catch():发生错误的回调函数。

  五、Promise.all()适合用于全部的结果都完成了才去执行then()成功的操做。举个例子:

let p1 =new Promise(function(resolve,reject){
            resolve(1);
        });
        let p2 = new Promise(function(resolve,reject){
            resolve(2);
        });
        let p3 = new Promise(function(resolve,reject){
            resolve(3);
        });
        Promise.all([p1, p2, p3]).then(function (results) {
            console.log('success:'+results);
        }).catch(function(r){
            console.log("error");
            console.log(r);
        });

最后输出:

  六、Promise.race()的做用也是同时执行多个实例,只要有一个实例改变状态,Promise就改成那个实例所改变的状态;

4、例子

        var Pro = function () {
            //返回一个Promise对象
            return new Promise(function (resolve, reject) {
                //模拟接口调用
                setTimeout(function () {
                    resolve(true);
                }, 1000);
            })
        };
        var Pro2 = function () {
            //返回一个Promise对象
            return new Promise(function (resolve, reject) {
                //模拟接口调用
                setTimeout(function () {
                    resolve('Pro2成功执行');
                }, 1000);
            })
        };
        
        Pro().then(function(data){
            var val = data;
            console.log(val)
            if (val) {
                console.log(1111)
                return Pro2()
            }
            
        }).then(function(data1){
            console.log(data1)
        })

输出:

这样就能够用then方法能够实现链式调用了。

相关文章
相关标签/搜索