es6 Promise

时间:2022-04-23
本文章向大家介绍es6 Promise,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

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

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

Promise 对象有以下两个特点。

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

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

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

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

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

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

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

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

用法

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

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

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

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

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

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

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

    例如:

  promise.then(function(value){
          // success
       },function(error){
          // failure
      });

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

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

    Promise对象的简单例子。

      funcion timeout(ms){
        return new Promise((resolve,reject)=>{
          setTimeout(resolve,ms,'done');
        });
      }
      timeout(100).then((value)=>{
        console.log(value);
      })

    Promise 建立后就会立即执行

      let promise = new Promise(function(resolve,reject){
        console.log('Promise');
        resolve();
      });
      promise.then(function() {
        console.log('resolved.');
      });
      console.log('Hi');
        // Promise
        // Hi!
        // resolved
  Promise.prototype.then()

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

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

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

  Promise.prototype.catch()

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

    写法一:

      const promise = new Promise(function(resolve,reject){
        try {
          throw new Error('test');
        }catch(e){
            reject(e);
          }
        });
      promise.catch(function(error){
        console.log(error);
      })
    // 写法二
    const promise = new Promise(function(resolve,reject){
      reject(new Error('test'));
    });
    promise.catch(function(error){
      console.log(error);
    })
  Promise.all()

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

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

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

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

  Promise.race()

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

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

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

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

      const p = Promise.race([
        fatch('/resource-that-may-take-a-while'),
        new Promise(function(resolve,reject){
          setTimeout(()=> reject(new Error('request timeout')),5000)
        })
      ]);
      p.then(response => console.log(response));
      p.catch(error => console.log(error));

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

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

    Promise.resolve()

    将现有对象转为Promise对象。

      Promise.resolve('foo') 等价于

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

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

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

        2.参数一个thenable 对象。

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

        4. 不带任何参数。

    Promise.reject();

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

    done()

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

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

      任何有可能出现的错误。

        Promise.prototype.done = function (onFulfilled,onRejected){
          this.then(onFulfilled,onRejected).catch(function(reason){
            // 抛出一个全局错误
            setTimeout(()=>{throw reason},0)
          });
        }

      应用加载图片

        const preloadImge = function(path){
          return new Promise(function(resolve,reject){
            const image = new Image();
            image.onload = resolve;
            image.onerror = regect;
            image.src = path;
          })
        };