es6 Promise

Posted 柠檬先生

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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;
          })
        };

以上是关于es6 Promise的主要内容,如果未能解决你的问题,请参考以下文章

ES6中的Promise

ES6的Promise详解

ES6 中Promise 使用

Web | ES6的异步编程

ES6异步操作Promise

ES6 - Promise 对象