Promise对象

在这里插入图片描述

Promise 是异步编程的一种解决方案。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件的结果。Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。

特点

对象的状态不受外界影响。Promise有三个状态：Pending（进行中）、Resolved（已完成）和Rejected（已失败），只有异步操作的结果，可以决定当前是哪一种状态。
一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态只有两种改变：从Pending变为Resolved和从Pending变为Rejected。只要其中一个情况发生，状态就会一直保持这个结果。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果
无法取消Promise，一旦新建它就会立即执行；如果不设置回调函数，Promise内部抛出的错误，不会反应到外部；当处于Pending状态时，无法得知目前进展到哪一个阶段

基本用法

ES6规定，Promise对象是一个构造函数，用来生成Promise实例

//promise构建函数接受一个函数作为参数，
//函数内有两个参数：resolve和reject，它们是两个函数，由js引擎提供
var promise = new Promise(function(resolve, reject) { 
  // ... some code
  if (/* 异步操作成功 */){ 
    resolve(value);    //状态从“未完成”到“成功”、异步操作成功时调用，并将结果作为参数抛出
  } else { 
    reject(error);    //状态从“未完成”变为“失败”、异步操作失败时调用，并将错误作为参数抛出
  }
});

Promise实例生成以后，可以用then方法分别指定Resolved状态和Reject状态的回调函数

//接受两个回调函数作为参数：一个状态变为Resolved时调用，一个是状态变为Reject时调用。其中，第二个函数是可选的。这两个函数都接受Promise对象传出的值作为参数
promise.then(function(value) { 
  // success
}, function(error) { 
  // failure
});

一个例子

//一个返回Promise实例的方法
function timeout(ms) { 
  return new Promise((resolve, reject) => { 
    setTimeout(resolve, ms, 'done');
  });
}
//调用方法，当promise的状态变成Resolved时，就会触发then绑定的回调函数
timeout(100).then((value) => {         //then后面状态变为Resolved时的回调，
  console.log(value);
});

异步加载图片的例子

function loadImageAsync(url) { 
  return new Promise(function(resolve, reject) { 
    var image = new Image();
    image.onload = function() { 
      resolve(image);
    };
    image.onerror = function() { 
      reject(new Error('Could not load image at ' + url));
    };
    image.src = url;
  });
}

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

//getJSON是对XMLHttpRequest对象的封装，用于发出一个针对JSON数据的HTTP请求
var getJSON = function(url) { 
  var promise = new Promise(function(resolve, reject){ 
    var client = new XMLHttpRequest();
    client.open("GET", url);
    client.onreadystatechange = handler;
    client.responseType = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send();
    function handler() { 
      if (this.readyState !== 4) { 
        return;
      }
      if (this.status === 200) { 
        resolve(this.response);
      } else { 
        reject(new Error(this.statusText));
      }
    };
  });
  return promise;
};
getJSON("/posts.json").then(function(json) { 
  console.log('Contents: ' + json);
}, function(error) { 
  console.error('出错了', error);
});

状态传递：p1的状态就会传递给p2，也就是说，p1的状态决定了p2的状态

var p1 = new Promise(function (resolve, reject) { 
  // ...
});
var p2 = new Promise(function (resolve, reject) { 
  // ...
  resolve(p1);
})
//一个例子
var p1 = new Promise(function (resolve, reject) { 
  setTimeout(() => reject(new Error('fail')), 3000)    
   //2. 再2秒后，状态变成reject，传递给了p2，进而触发catch
})
var p2 = new Promise(function (resolve, reject) { 
  setTimeout(() => resolve(p1), 1000)    //1. 由于这里返回的是另一个Promise，所以自身的状态无效
})
p2
  .then(result => console.log(result))
  .catch(error => console.log(error))
// 3. Error: fail

方法

Promise.prototype.then()

(1) then的第一个参数是Resolved状态的回调函数，第二个参数（可选）是Rejected状态的回调函数

(2) then方法返回的是一个新的Promise实例，因此可以采用链式写法。后面的回调会等待前一个的Promise状态发生变化后才调用
```
//这里用then依次指定了两个回调函数。第一个回调函数完成后，会将返回结果作为参数，传入第二个回调函数
getJSON("/posts.json").then(function(json) { 
  return json.post;
}).then(function(post) { 
  // ...
});
```

Promise.prototype.catch()

(1) 用于指定发生错误时的回调函数。

getJSON('/posts.json').then(function(posts) { 
  // ...
}).catch(function(error) { 
  //(1)如果异步操作抛出错误，状态就会变为Rejected，就会调用catch方法指定的回调函数，处理这个错误
  //(2)then方法指定的回调函数，如果运行中抛出错误，也会被catch方法捕获。
  console.log('发生错误！', error);    
});

(2) 相当于.then(null, rejection)

p.then((val) => console.log('fulfilled:', val))
  .catch((err) => console.log('rejected', err));
    // 等同于
p.then((val) => console.log('fulfilled:', val))
  .then(null, (err) => console.log("rejected:", err));

(3) Promise 对象的错误会一直向后传递，直到被捕获为止。错误总是会被下一个catch语句捕获，如果catch内发生错误而后面没有catch来捕获，那么这个错误就无法被捕获到

var promise = new Promise(function(resolve, reject) { 
reject(new Error('test'));
});
promise.catch(function(error) { 
  console.log(error);
});
// Error: test

(4) 两种写法对比

//写法1:不能捕获前面then方法执行中的错误
promise
.then(function(data) { 
    // success
  }, function(err) { 
    // error
  });
//写法2:可以捕获前面then方法执行中的错误（推荐）
promise
  .then(function(data) {  //cb
    // success
  })
  .catch(function(err) { 
    // error
  });

(5) catch方法返回的还是一个 Promise 对象，因此后面还可以接着调用then方法。但当没有报错时，会跳过catch

Promise.all()

(1) 用于将多个Promise实例，包装成一个新的Promise实例
```
var p = Promise.all([p1, p2, p3]);
```
(2) 最终p的状态由p1、p2、p3决定；只有p1、p2、p3状态都为Resolved，p的状态才会变成Resolved；如果p1、p2、p3有一个状态为rejected，p的状态就会变成rejected
Promise.race()

(1) 用于将多个Promise实例，包装成一个新的Promise实例
```
var p = Promise.race([p1, p2, p3]);
```
(2) 只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变

Promise.resolve()

(1) 将现有对象转化为Promise对象

Promise.resolve('foo')
// 等价于
new Promise(resolve => resolve('foo'))

Promise.reject()

返回一个新的 Promise 实例，该实例的状态为rejected

var p = Promise.reject('出错了');
// 等同于
var p = new Promise((resolve, reject) => reject('出错了'))
p.then(null, function (s) { 
  console.log(s)
});
// 出错了

done()：总是处于回调链的尾端，保证抛出任何可能出现的错误
```
asyncFunc()
  .then(f1)
  .catch(r1)
  .then(f2)
  .done();
```

finally()：指定不管Promise对象最后状态如何，都会执行的操作，它接受一个普通的回调函数作为参数

Promise.prototype.finally = function (callback) { 
  let P = this.constructor;
  return this.then(
    value  => P.resolve(callback()).then(() => value),
    reason => P.resolve(callback()).then(() => {  throw reason })
  );
};