您的位置:时时app平台注册网站 > web前端 > es6 Promise【彩世界网址】

es6 Promise【彩世界网址】

2019-10-18 23:55

      注释:当回调函数里面调用resolve()时,.then会调用第一个函数;当回调函数里面调用reject()时,.then会调用第二个函数

成功的回调函数的参数。

    const promise = new Promise(function(resolve,reject){

                  也可以如下面这样写

异步处理中定义异步方法(如ajax),在.then方法中处理结果,使得

        2.参数一个thenable 对象。

  

Promise提供了all方法来处理多个异步程序全部调用完成后返回结果,

      })

  首先我们需要知道啥叫promise,我问了问大佬,他说这个东西是 异步操作的同步代码(but有兼容问题).

/**

* 实现一个Promise

*/

function Promise(task) {

    //接收一个处理函数

    let that = this;//缓存this

    //promise有三种状态  默认为pending

    that.status = 'pending';

    that.onFulfilledFns = [];//所有成功的回调

    that.onRejectedFns = [];//所有失败的回调

    that.value = undefined;

    function resolve(value) {

        //成功函数

        if(that.status == 'pending'){

            that.status = 'fulfilled';

            that.value = value;

            //执行所有成功的回调

            that.onFulfilledFns.forEach(item=>item(value));

}

};

    function reject(reason) {

        //失败函数

        if(that.status == 'pending'){

            that.status = 'rejected';

            that.value = reason;

            //执行所有失败的回到

            that.onRejectedFns.forEach(item=>item(reason));

}

};

    //立即执行传入的处理函数

    try{

        task(resolve,reject);

    }catch (err){

        reject(err)

}

};

function resolvePromise(promise2,x,resolve,reject) {

    let then;

    if(promise2 === x){

        return reject(new Error('循环引用'));

}

    if(x instanceof Promise){

        //判断x的prototype所指向的对象是否存在Promise的原型链上

        if(x.status= 'pending'){

            x.then(function (y) {

                //递归 调用

                resolvePromise(promise2,y,resolve,reject);

            },reject)

        }else if(x.status == 'fulfilled'){

            resolve(x.value);

        }else if(x.status == 'rejected'){

            reject(x.value);

}

    }else if(x != null && typeof x == 'object' || typeof x == 'function'){

        try{

            then = x.then;

            if(typeof then == 'function'){

                then.call(x,function (y) {

                  resolvePromise(promise2,y,resolve,reject);

                },function (y) {

                    reject(y)

});

}

        }catch (e){

            reject(e);

}

    }else{

        resolve(x);

}

}

//then方法

Promise.prototype.then = function (onFulfilled, onRejected) {

    //假如没有传入异步处理程序则直接返回结果

    onFulfilled = typeof onFulfilled == 'function'?onFulfilled:function (value) {

        return value;

};

    onRejected = typeof onRejected == 'function'?onRejected:function (reason) {

        return reason;

};

    var promise2;//用来实现链式调用

    let that = this;

    if(that.status == 'fulfilled'){

        promise2 = new Promise(function (resolve,reject) {

            let x = onFulfilled(that.value);

            resolvePromise(promise2,x,resolve,reject);

});

    }else if(that.status == 'rejected'){

        promise2 = new Promise(function (resolve,reject) {

            let x = onRejected(that.value);

            reject(x);

});

    }else if(that.status == 'pending'){

        promise2 = new Promise(function (resolve,reject) {

            that.onFulfilledFns.push(function(){

                let x = onFulfilled(that.value);

                resolve(x);

});

            that.onRejectedFns.push(function () {

                let x = onRejected(that.value);

                reject(x);

});

});

    }else{

        promise2 = new Promise(function (resolve,reject) {

            reject('Promise内部状态错误');

});

}

    return promise2;

};

Promise.resolve = function (val) {

    return new Promise(function (resolve,reject) {

        resolve(val);

});

};

Promise.reject = function (val) {

    return new Promise(function (resolve,reject) {

        reject(val);

});

};

Promise.all = function (arrs) {

    //all方法接收一个promise数组,数组中所有异步操作结束后返回一个新的promise

    if(typeof arrs == 'object' && arrs.length > 0){

        return new Promise(function (resolve,reject) {

            let result = [];//新的promise返回结果

            let indexNum = 0;//当前完成几个

            let resolved = function (index) {

                return function (data) {

                    result[index] = data;

                    indexNum ;

                    if(indexNum == arrs.length){

                        resolve(result);

}

}

};

            for(let i=0;i

                arrs[i].then(resolved(i),function (reason) {

                    reject(reason);

});

};

});

    }else{

        return new Promise(function (resolve,reject) {

            reject(new Error('all方法传入参数错误'));

});

}

};

Promise.race = function (arrs) {

    if(typeof arrs == 'object' && arrs.length > 0){

        return new Promise(function (resolve,reject) {

            for(let i=0;i

                arrs[i].then(function (data) {

                    resolve(data);

                },function (err) {

                    reject(err);

});

};

});

    }else{

      return new Promise(function (resolve,reject) {

          reject(new Error('race方法传入参数错误'));

})

};

};

        });

    new Promise(function(resolve,reject) {

promise链式调用:会将前一个then的返回值(return)作为下一次

          throw new Error('test');

      new Promise(function(resolve,reject) {

逻辑更清晰,更易于维护,而不是使用函数嵌套函数的方式。

  构造函数接受一个函数作为参数,该函数的两个参数分别是resolve 和reject。

       

在实际项目中可以用来处理异步函数,以及多个异步操作的处理,在

    Promise 实例具有then 方法,也就是说,then方式定义在原型对象Promise.prototype上的。

          接下来我们来说一说Promise的另一个方法  race方法,这个方法作用:当race里面数组里的异步操作只要有一个执行完毕后就会去执行.then();

它是把异步处理规范起来,采用统一的接口来编写,使得更规范化。

        const preloadImge = function(path){

             resolve()

Promise主要用于异步处理,用来解决传统的回调地狱问题。

  Promise.all()

************************************************又在成为最会说相声的程序员的路上迈出了具有历史性的一步*******************************************************************

还提供了与之相对的race方法.

        // resolved

  老铁们,我又满血复活了,今天我准备来吹一波我对promise,如有错吴请直接指出,明白了吗?话不多说开始吧

 

    Promise作用:    1.解决回调地狱(关于这个地狱问题,我会在随后的随笔中介绍一下)

 

        这个小东西吧还是挺可爱的,来,我们了解了解他

    的时候调用,并将异步操作报出错误,作为参数传递出去。

       下面我来说说我自己对他的理解:

        console.log(error);

            2.将Ajax获取来的数据和业务逻辑分开

    Promise.race 方法同样是将多个Promise实例,包装成一个新的Promise实例。

                 注释:这种写法,当回调函数里面调用resolve()时,.then会执行;当回调函数里面调用reject()时,.catch会执行

  状态时,无法得子目前进展到哪一个阶段。

               resolve()

    触发catch 方法指定的回调函数。

          }).then(function(){}).cath(function(){})    

      console.log(error);

                 2.Promise.all()方法可以解决多个Ajax传回的信息再次组合进行查询

 

  4.Promise.race(arr).then(function(){})       arr为数组

            setTimeout(()=>{throw reason},0)

       }).then(function(){},function(){})

      promise.then(function() {

        1.它是一个构造函数,使用的时候需要用new实例化

用法

        2.他有一个参数,这个参数是一个回调函数,这个回调函数里面又有两个参数,第一个为resolve  第二个为 reject   (这里先放一下,我们来上一段代码要不然太抽象了)

            image.onload = resolve;

  

    (进行中),fulfilled(已成功)和rejected(已失败)。

   3.Promise.all(arr).then(function(){})         arr为数组

        4. 不带任何参数。

       告辞,告辞

      funcion timeout(ms){

                    大佬们可能发现了,那我的resolve和reject是形参啊,可不可以用别的名字,当然可以的啦,不过要注意和回调函数内部的调用名字统一起来

 

  5.我自己体会的作用,如有缺失,请立刻联系我,你给我补充,我给你打钱

    例如: promise.then(function(value){

           Now,我们来说一说Promise的非常有用的方法之一  all方法,这个方法作用:当all里面数组里的所有异步操作都执行完毕后再去执行.then();

            const image = new Image();

  Promise.prototype.then()

        3.参数不是具有then方法的对象,或根本就不是对象。

      应用加载图片

        return new Promise((resolve,reject)=>{

      let promise = new Promise(function(resolve,reject){

          return new Promise(function(resolve,reject){

        1.参数一个Promise实例,将不做任何修改,原封不动地返回这个实例。

 

Promise 实例陈仓以后,可以使用then 方法分别指定resolved状态和rejected状态回调函数。

      第二个回调函数是Promise对象的状态变为rejected时调用。

      });

          }

    Promise.all 方法用于将多个Promise 实例,包装成一个新的Promise实例。

      console.log('Hi');

            reject(e);

        console.log('resolved.');

          this.then(onFulfilled,onRejected).catch(function(reason){

    then 方法返回的是一个新的Promise实例。 第一个参数是resolved状态的回调函数,

    Promise.all 方法接受一个数组作为参数,p1,p2,p3都是Promise实例,如果不是,就会

Promise 对象有以下两个特点。

  只有两种可能: 从pending 变为fulfilled 和pending 变为rejected.如果改变已经发生 了,你在

    promise.catch(function(error){

      const promise = new Promise(function(resolve,reject){

        }

Promise 是异步编程的一种方案,简单说就是一个容器,里面保存着某个未来才会结束的事件的

      Promise对象的回调链,不管以then方法或是catch 方法结尾,要是最后一个方法抛出

      p.then(response => console.log(response));

      Promise.resolve('foo') 等价于

      });

    resolve 函数的作用是,将Promise 对象的状态从“未完成”变为“成功”,在异步操作成功

        });

    Promise.reject();

      ]);

       },function(error){

  对Promise对象添加回调函数,也会立即得到这个结果。

    })

    上面例子中,只要p1,p2,p3之中有一个实例率先改变状态,p的状态就跟着改变。

    reject 函数的作用是,将Promise对象的状态从“未完成”变为“失败”,在异步操作失败

    上面代码中,如果5秒内fetch 方法无法返回结果,变量p的状态就会变为rejected,从而

          });

      Promise.resolve 方法的参数非常四种情况

      }

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

        console.log(value);

        fatch('/resource-that-may-take-a-while'),

    // 写法二

    写法一:

      Promise.reject(reason) 方法会返回一个新的Promise实例,该实例的状态为rejected

    将现有对象转为Promise对象。

      第一个回调函数是状态变为resolved时调用,

      错误,都有可能无法捕捉到。提供一个done方法,总是处于回调链的尾端,保证抛出

  (1)对象的状态不受外界影响。Promise 对象代表一个异步操作,有是三种状态。pendding

    第二个参数是rejected状态的回调函数。

      });

  Promise.race()

        new Promise(function(resolve,reject){

      })

      const p = Promise.all([p1,p2,p3]);

      调用下面讲到的Promise.resolve方法,将参数转为Promise实例。

        // Hi!

    Promise对象的简单例子。

        })

      timeout(100).then((value)=>{

        try {

    done()

    的时候调用,并将异步操作的结果,作为参数参数传递。

      promise.catch(function(error){

      

      那么率先改变的Promise实例的返回值,就传给p的回调函数。

  如果不设置回调函数,Promise内部抛出的错误,不会立即反应到外部。当处于pending

            image.src = path;

          setTimeout(()=> reject(new Error('request timeout')),5000)

 

      reject(new Error('test'));

        };

      任何有可能出现的错误。

    Promise 建立后就会立即执行

        Promise.prototype.done = function (onFulfilled,onRejected){

        console.log('Promise');

          setTimeout(resolve,ms,'done');

    Promise.resolve()

  Promise 有一些缺点,首先无法取消Promise ,一旦新建它就会立即执行,中途无法取消。

        }catch(e){

  Promise.prototype.catch()

            // 抛出一个全局错误

结果,Promise 是一个对象,从它,可以获取异步操作的消息。

      p.catch(error => console.log(error));

      const p = Promise.race([

        resolve();

  (2)一旦状态改变,就不会在变,任何时候都可以得到这个结果,Promise 对象的状态改变

          // success

            image.onerror = regect;

  Promise 对象是一个构造函数,用来生成Promise实例。

    });

          })

        // Promise

          // failure

    const p = Promise.race([p1,p2,p3]);

      new Promise(resolve =>resolve('foo'))

本文由时时app平台注册网站发布于web前端,转载请注明出处:es6 Promise【彩世界网址】

关键词: