Promise的api使用方法

•  Promise构造函数

    Promise构造函数: Promise (excutor) {}
    excutor函数: 同步执行  (resolve, reject) => {}
    resolve函数: 内部定义成功时我们调用的函数 value => {}
    reject函数: 内部定义失败时我们调用的函数 reason => {}
    说明: excutor会在Promise内部立即同步回调,异步操作在执行器中执行
         （executor 函数在Promise构造函数返回所建promise实例对象前被调用）
          resolve 和 reject 函数被调用时，分别将promise的状态改为fulfilled（完成）或rejected（失败）。
          executor 内部通常会执行一些异步操作，一旦异步操作执行完毕(可能成功/失败)，
          要么调用resolve函数来将promise状态改成fulfilled，
          要么调用reject 函数将promise的状态改为rejected。
          如果在executor函数中抛出一个错误，那么该promise 状态为rejected。
          executor函数的返回值被忽略。 

new Promise((resolve, reject) => {
    setTimeout(() => {
        // resolve('成功的数据')
        reject('失败的数据')
    }, 1000)
}).then(
    value => {
        console.log('onResolved()1', value)
    }
).catch(
    reason => {
        console.log('onRejected()1', reason)
    }
)

•  Promise.prototype.then()

  var p1 = new Promise((resolve, reject) => {
    resolve('成功！');
    // or
    // reject(new Error("出错了！"));
  });
  
  p1.then(value => {
    console.log(value); // 成功！
  }, reason => {
    console.error(reason); // 出错了！
  });

  then() 方法返回一个 Promise。它最多需要有两个参数：Promise 的成功和失败情况的回调函数。

• 返回值：当一个 Promise 完成（fulfilled）或者失败（rejected）时，返回函数将被异步调用（由当前的线程循环来调度完成）。具体的返回值依据以下规则返回。如果 then 中的回调函数：

• 返回了一个值，那么 then 返回的 Promise 将会成为接受状态，并且将返回的值作为接受状态的回调函数的参数值。
• 没有返回任何值，那么 then 返回的 Promise 将会成为接受状态，并且该接受状态的回调函数的参数值为 undefined。
• 抛出一个错误，那么 then 返回的 Promise 将会成为拒绝状态，并且将抛出的错误作为拒绝状态的回调函数的参数值。
• 返回一个已经是接受状态的 Promise，那么 then 返回的 Promise 也会成为接受状态，并且将那个 Promise 的接受状态的回调函数的参数值作为该被返回的Promise的接受状态回调函数的参数值。
• 返回一个已经是拒绝状态的 Promise，那么 then 返回的 Promise 也会成为拒绝状态，并且将那个 Promise 的拒绝状态的回调函数的参数值作为该被返回的Promise的拒绝状态回调函数的参数值。
• 返回一个未定状态（pending）的 Promise，那么 then 返回 Promise 的状态也是未定的，并且它的终态与那个 Promise 的终态相同；同时，它变为终态时调用的回调函数参数与那个 Promise 变为终态时的回调函数的参数是相同的。

 

• Promise.prototype.catch()

  var p1 = new Promise(function(resolve, reject) {
    resolve('Success');
  });
  
  p1.then(function(value) {
    console.log(value); // "Success!"
    throw 'oh, no!';
  }).catch(function(e) {
    console.log(e); // "oh, no!"
  })
  
  ==== 等价于
  
  p1.then(function(value) {
    console.log(value); // "Success!"
    return Promise.reject('oh, no!');
  }).catch(function(e) {
    console.log(e); // "oh, no!"
  })

  catch() 方法返回一个Promise，并且处理拒绝的情况。它的行为与调用Promise.prototype.then(undefined, onRejected) 相同

• 在异步函数中抛出的错误不会被catch捕获到

• var p2 = new Promise(function(resolve, reject) {
    setTimeout(function() {
      throw 'Uncaught Exception!';
    }, 1000);
  });
  
  p2.catch(function(e) {
    console.log(e); // 不会执行
  });

  在resolve()后面抛出的错误会被忽略

• var p3 = new Promise(function(resolve, reject) {
    resolve();
    throw 'Silenced Exception!';
  });
  
  p3.catch(function(e) {
     console.log(e); // 不会执行
  });

   

• Promise.resolve()

  Promise.resolve("Success").then(function(value) {
    console.log(value); // "Success"
  }, function(value) {
    // 不会被调用
  });

  resolve一个数组

  var p = Promise.resolve([1,2,3]);
  p.then(function(v) {
    console.log(v[0]); // 1
  });

  Resolve另一个promise

  var original = Promise.resolve(33);
  var cast = Promise.resolve(original);
  cast.then(function(value) {
    console.log('value: ' + value);
  });
  console.log('original === cast ? ' + (original === cast));
  
  /*
  *  打印顺序如下，这里有一个同步异步先后执行的区别
  *  original === cast ? true
  *  value: 33
  */

   

• Promise.reject()

• // Promise.reject(reason)方法返回一个带有拒绝原因reason参数的Promise对象。
  
  Promise.reject("Testing static reject").then(function(reason) {
    // 未被调用
  }, function(reason) {
    console.log(reason); // "Testing static reject"
  });
  
  Promise.reject(new Error("fail")).then(function(result) {
    // 未被调用
  }, function(error) {
    console.log(error); // stacktrace
  });

   

• Promise.all()

• 返回一个新的promise, 只有所有的promise都成功才成功, 只要有一个失败了就直接失败

• var p1 = Promise.resolve(3);
  var p2 = 1337;
  var p3 = new Promise((resolve, reject) => {
    setTimeout(resolve, 100, 'foo');
  }); 
  
  Promise.all([p1, p2, p3]).then(values => { 
    console.log(values); // [3, 1337, "foo"] 
  });

  var p1 = new Promise((resolve, reject) => { 
    setTimeout(resolve, 1000, 'one'); 
  }); 
  var p2 = new Promise((resolve, reject) => { 
    setTimeout(resolve, 2000, 'two'); 
  });
  var p3 = new Promise((resolve, reject) => {
    setTimeout(resolve, 3000, 'three');
  });
  var p4 = new Promise((resolve, reject) => {
    setTimeout(resolve, 4000, 'four');
  });
  var p5 = new Promise((resolve, reject) => {
    reject('reject');
  });
  
  Promise.all([p1, p2, p3, p4, p5]).then(values => { 
    console.log(values);
  }).catch(reason => { 
    console.log(reason)
  });
  
  //From console: 
  //"reject"

   

• Promise.race()

Promise.race(iterable) 方法返回一个 promise，一旦迭代器中的某个promise解决或拒绝，返回的 promise就会解决或拒             绝。 

• var promise1 = new Promise(function(resolve, reject) {
      setTimeout(resolve, 500, 'one');
  });
  
  var promise2 = new Promise(function(resolve, reject) {
      setTimeout(resolve, 100, 'two');
  });
  
  Promise.race([promise1, promise2]).then(function(value) {
    console.log(value);
    // Both resolve, but promise2 is faster
  });

Promise对象实现的 Ajax 操作的例子。

const getJSON = function(url) {
  const promise = new Promise(function(resolve, reject){
    const handler = function() {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    };
    const client = new XMLHttpRequest();
    client.open("GET", url);
    client.onreadystatechange = handler;
    client.responseType = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send();

  });

  return promise;
};

getJSON("/posts.json").then(function(json) {
  console.log('Contents: ' + json);
}, function(error) {
  console.error('出错了', error);
});