14-ES6-Promise

1、 Promise 对象

所谓 Promise , 就是一个容器, 里面保存着某个未来事件才会结束的事情( 通常是一个异步操作 )的结果。

2、 Promise 对象有以下两个特点:

1. 对象的状态不受外界影响。 Promise 有 3 种状态。只有异步操作才能决定当前是哪一种状态,任何时候其他操作都无法改变这个状态。
   · Pending( 进行中 )
   · Fulfilled( 已成功 )
   · Rejected( 已失败 )

2. 一旦状态改变就不会再变, 任何时候都可以得到这个结果。 Promise 对象的状态改变只有2中可能。只要这两种情况发生, 状态就凝固了, 不会再变, 而是一直保持这个结果, 这时就称为 Resolved(已定型)。
   · 从 Pending( 进行中 )变为 Fulfilled( 已成功 )
   · 从 Pending( 进行中 )变为 Rejected( 已失败 )
   就算改变已经发生, 在对 Promise 对象添加回调函数, 也会立即得到这个结果。这与事件(Event)完全不同。事件的特点是, 如果错过了它, 再去监听是得不到结果的。

3)Promise 的有缺点
· 无法取消 Promise, 一旦新建它就会立刻执行, 无法途中取消。
· 如果不设置回调函数, Promise 内部抛出的错误不会反应到外部。
· 当处于 Pending( 进行中 )状态时, 无法得知进展到哪一步(刚刚开始还是即将完成)

2、基本用法

· ES6规定, Promise 对象是一个构造函数, 用来生成 Promise 实例。
· Promise 构造函数接受一个函数作为参数, 该函数的两个参数分别是 resolved 和 reject。resolved 函数的作用是, 将 Promise 对象的状态从 “未完成” 变为 "成功"即( Pending 变为 Resolved )。reject 函数的作用是, 将 Promise 对象的状态从 “未完成” 变为 "失败"即( Pending 变为 Rejected ),在异步操作失败时调用, 并将异步操作报出的错误作为参数传递出去。

      let promise = new Promise( function( resolved, reject ){
        /* 异步操作成功 */ ? resolved( data ) : reject( error );
      });

Promise 实例生成以后, 可以用 then() 分别指定 Resolved 状态和 Rejected 状态的回调函数。then() 可以接受两个回调函数作为参数。第一个回调函数是 Promise 对象的状态变为 Resolved时调用( Pending 变成 Fulfilled )。第二个回调函数是 Promise 对象的状态变为 Rejected 时调用( 可选 )

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

    timeout() 方法返回一个 Promise 实例, 表示一段时间后才会发生的结果。
    过了指定的时间( ms参数 )以后,Promise 实例的状态变为 Resolved, 就会
    触发 then() 绑定的回调函数

Promise 新建后就会立即执行

  let promise = new Promise( function( resolved, reject ){
    console.log( 'Promis' );
    resolved();
  });
  promise.then( function(){
    console.log( 'Resolved' );
  } );
  console.log( 'Hi' );
  // Promise
  // hi
  // Resolved
  
  Promise 新建后会立即执行, 所以首先输出的是 Promise。然后, then() 指定的回调函数将在
  当前脚本所有同步任务执行完成以后才会执行, 所以 Resolved 最后输出。

Promise 延时执行

    let promise_1 = new Promise( function( resolve, reject ){
      setTimeout( () => reject( new Error( 'fail' ) ), 3000 );
    } );

    let promise_2 = new Promise( function( resolve, reject ){
      setTimeout( () => resolve( promise_1 ), 1000 );
    } );

    promise_2
    .then( result => console.log( result ) )
    .catch( error => console.log( error ) );

    promise_2 的状态是由 promise_1 决定的。因为 promise_2 返回的是一个 Promise 实例,
    导致 promise_2 的状态无效。所以 then() 语句针对的是 promise_1 这个实例。

调用 resolved 或 reject 并不会终结 Promise 的参数函数的执行

new Promise( function( resolve, reject ){
  resolve( 'hi' );
  console.log( 2 );
} ).then( ()=>{
  console.log( 'reject' );
});

调用 resolve( 'hi' ) 以后, 后面的 console.log(2) 会先执行。这时因为 resolved 的
Promise 是在本轮时间循环的末尾执行, 总是晚于本轮循环的同步任务。

调用 resolve 或 reject 以后, Promise 的使命就完成了, 后续操作应该放到 then() 方法
里面, 而不是直接写在 resolve 或 reject 的后面。在它们前面加上 return 语句, 不会产生意外

 new Promise( ( resolve, reject )=>{
   return resolve( 'hi' );
   console.log( 'world' );   // return 后面代码不执行
 } );

3、 Promise.prototype.then()

· then() 方法是定义在原型对象 Promise.prototype 上的。作用是为 Promise 实例添加状态改变时的回调函数。
· then() 方法返回的是一个新的 Promise 实例( 不是原来那个 Promise 实例)。因此可以采用链式写法, 即 then() 方法后面再调用 then() 方法。

getJSON('/posts.jsoon').then( function(){
  return json.post;
} ).then( function(data){
  return data;
})

4、 Promise.prototype.catch()

· 用于指定发生错误的回调函数

  getJSON('/posts.jsoon')
  .then( function(){
    return json.post;
  } )
  .catch( function(error){
    // 处理 getJSON 和 前一个回调函数运行时发生的错误
    console.log(error)
  });

  getJSON 方法返回一个 Promise 对象, 如果该对象状态变为 Resolved , 则会调用	then()方法指定的回调函数。
  如果异步操作抛出错误,状态就会变为 Rejected , 然后调用 catch() 方法指定的回调函数处理这个错误

then()方法指定的回调函数如果在运行中抛出错误, 也会被 catch() 方法捕获

  let promise = new Promise( function( resolve, reject ){
    reject( new Error( 'test' ) );
  });

  promise.cahch( function( error ){
    console.log( error )
  } );
  // Error: test

Promise 对象的错误具有 “冒泡” 性质, 会一直向后传递, 直到被捕获位置。也就是说,
错误总是被下一个 catch() 语句捕获。

     getJSON( '/post/1.json' )
     .then( function( post ){
       return getJson( post.commentUrl );
     } )
     .then( function( comments ){
       // some code
     } )
     .catch( function( error ){
       // 处理前面 3 个 Promise 产生的错误
     } );

不要在 then() 方法中定义 Resolved 状态的回调函数( 即 then() 的第二个参数 ),而应该总是使用 catch() 方法

   promise
     .then( ( data ) => {
       return data;
     })
     .catch( ( err ) => {
       console.log( err )
     } );

如果没有使用 catch() 方法指定错误处理的回调函数, Promise 对象抛出的错误不会传递到
外层代码, 不会有任何反应

 let someAsyncThing = function(){
   return new Promise( ( res, rej ) => {
     res( x + 2 );  // 变量 x 没有声明  x is not defined
   } )
 };
someAsyncThing().then( () => {
  console.log( 'everything is great' );
} );

catch() 返回的还是一个 Promise 对象, 因此后面还可以接着调用 then() 方法

  let someAsyncThing = function(){
    return new Promise( ( res, rej ) => {
      res( x + 2 );  // 变量 x 没有声明  x is not defined
    } )
  };
 someAsyncThing()
 .catch( ( err ) => {
   console.log( err );
 })
 .then( () => {
   console.log( 'everything is great' );
 } );