promise 学习笔记

promise 是什么

Promise 对象用于一个异步操作的最终完成（或失败）及其结果值的表示。（简单说就是处理异步请求。一个诺言，一个成功，一个失败。）

看个例子

var promise = new Promise(function(resolve){
    resolve(42);
});
promise.then(function(value){
    console.log(value);
}).catch(function(error){
    console.error(error);
});

运行后，打印出42，为什么会是42呢？带着这个疑惑继续放下看

promise 状态

一个Promise必须处在其中之一的状态：pending, fulfilled 或 rejected.

pending 状态：可以转换到 fulfilled 或 rejected 状态。
fulfilled 状态：不能转换成任何其它状态；必须有一个值，且这个值不能被改变。
rejected 状态：不能转换成任何其它状态；必须有一个值，且这个值不能被改变。

promise 对象

创建 promise 对象

1.new Promise(fn) 返回一个 promise 对象。

2.fn是个函数，fn有两个参数

resolve：处理结果成功的时候调用resolve(处理结果值)。
reject：处理结果错误的时候调用reject(Error对象)。

then 方法

一个 Promise 必须提供一个 then 方法来获取其值。

Promise 的 then 方法接受两个参数：

promise.then(onFulfilled,onRejected)

1.onFulfilled 和 onRejected 都是函数，如果不是函数，则忽略之。
2.onFulfilled ：resolve(成功)时调用 onFulfilled，必须在promise fulfilled后调用，且promise的value为其第一个参数，不能多次调用。
3.onRejected：reject(失败)时调用 onRejected，必须在promise rejected后调用，且promise的reason为其第一个参数，不能被多次调用。

.catch只是 promise.then(undefined, onRejected) 的别名而已。

Promise.reject(new Error("BOOM!")).catch(function(error){
    console.error(error);  // Error: BOOM!
});

开始那个例子就变成简单明了，relove(42) 成功是调用function(value){console.log(value)}，所以打印出 42 。

对于一个 promise，它的 then 方法可以调用多次。

promise.then(onFulfilled,onRejected).then(onFulfilled,onRejected);
promise.then(onFulfilled,onRejected); promise.then(onFulfilled,onRejected);

then 必须返回一个 promise

promise2 = promise1.then(onFulfilled, onRejected);

创建 XHR 的promise 对象

function ajax(options){
  return new Promise(function(resolve,reject){
    let {method,url} = options;
    let xhr = new XMLHttpRequest();
    xhr.open(method,url);
    xhr.onload = function(){
      if(xhr.status === 200){
        resolve(xhr.responseText)
      }else{
        reject(new Error(xhr.statusText))
      }
    };
    xhr.onerror = function(){
      reject(new Error(xhr.statusText))
    };
    xhr.send()
  })
}
// 运行
var promise = ajax({method:'GET',url:'xxx.json'});
promise.then(function(value){
  console.log(value)
},function(reason){
  console.error(reason)
})
// xxx.json
{
  "name":"jack",
  "nationality":"china"
}

ajax 只有在通过XHR取得结果状态为200时才会调用 resolve 。而其他情况（取得失败）时则会调用 reject 方法。

当调用成功时，打印出

{
  "name":"jack",
  "nationality":"china"
}

我们把 url 地址故意写错，调用失败，将会报错，显示如下

Error: Not Found

Promise 是同步还是异步执行

再看个例子

console.log(1)
setTimeout(function(){
  console.log(2)
},0)
var promise =new Promise(function(resolve){
  resolve(3)
}).then(function(value){
  console.log(value)
})
console.log(4)

打印出1 4 3 2。

Promise 是异步执行的。有个问题，为什么 setTimeout 模拟异步会比 promise 晚出现呢?

这就涉及到 microtask 和 macrotask 问题。简单说，promise 排在了异步下批执行的第一梯队，而setTimeout 则排在第二梯队。

Promise API

Promise.all 接收一个 promise对象的数组作为参数，当这个数组里的所有promise对象全部变为resolve或reject状态的时候，它才会去调用 .then 方法。

var p1 = Promise.resolve(3);
var p2 = 1337;
var p3 = new Promise(function(resolve) {
  setTimeout(resolve, 500, "foo");
});
Promise.all([p1, p2, p3]).then(function(value) {
  console.log(value); // [3, 1337, "foo"] 
});

Promise.race 接收一个 promise对象的数组作为参数，只要有一个promise对象进入 FulFilled 或者 Rejected 状态的话，就会继续进行后面的处理。

var p5 = new Promise(function(resolve, reject) {
  setTimeout(resolve, 500, "five");
});
var p6 = new Promise(function(resolve, reject) {
  setTimeout(reject, 100, "six");
});
Promise.race([p5, p6]).then(function(value) {
  console.log(value)
}, function(reason) {
  console.log(reason); // "six"
  // p6 更快，所以它失败了
});