Javascript：Promise对象基础 _Javascript

兼容性

文章插图
promise兼容性
一、Promise 的状态Promise有3种状态：

Pending：进行中
Resolved(Fulfilled)：已完成
Rejected：已失败

Promise状态的改变只有两种：

Pending --> Resolved
Pending --> Rejected

这意味着，一个Promise对象resolve之后，状态就一直停留在Resolved那里了，反过来reject也一样。
这种特点的结果是， Promise对象的状态改变之后，你再给它添加回调函数，这个函数也会执行。
这跟事件监听器很不一样 —— 你一旦错过某个事件，就没办法再捕获他了，除非这个事件再次发生。
二、 .then() 和 .catch()Promise构造器接受一个函数作为参数，这个函数有两个参数：resolve ， reject ，分别代表这个Promise实例成功之后的回调函数和失败之后的回调函数。
举个例子：
var promise = new Promise(function (resolve, reject) { var a = 1 if (a == 1) { resolve(a) } else { reject(error) }})promise.then(function (value) { console.log(value);}).catch(function (error) { console.log(error);})// 输出：// 1不管是then方法还是catch方法返回的都是一个新的Promise实例，这意味着Promise可以链式调用then和catch ，每一个方法的返回值作为下一个方法的参数：
var promise = new Promise(function (resolve, reject) { var a = 1 if (a === 1) { resolve(a) } else { reject(error) }})promise.then(function (value) { console.log(value++) return value}).catch(function (error) { console.log(error)}).then(function (value) { console.log(value++)})// 输出：// 1// 2如果其中一个then失败了，它后面第一个catch方法就会接受这个错误并执行，然后继续执行后面的方法，比如：

文章插图

三、 Promise.resolve() 和 Promise.reject()两者都是是new promise（）的快捷方式。
【Javascript：Promise对象基础】Promise.resolve(value)是下面代码的语法糖：
new Promise(function (resolve) { resolve(value) })所以
Promise.resolve(42).then(function(value){ console.log(value); });// 等同于var promise = new Promise(function (resolve) { resolve(42) }) promise.then(function (value) { console.log(value) })Promise.reject(value)是下面代码的语法糖：
new Promise(function(resolve,reject){ reject(new Error("出错了")); });四、 Promise.all() 和 Promise.race()1. Promise.all()
接收一个Promise对象的数组作为参数，当这个数组里的所有Promise对象全部变为resolve的时候，该方法才resolve 。
如果其中一个Promise对象为reject的话，则该方法为reject 。
比如：

文章插图

2. Promise.race()
使用方法和Promise.all一样，接收一个Promise对象数组为参数。
只要其中一个Promise对象变为Resolved或者Rejected状态，该方法返回，进行后面的处理。
看例子：

文章插图

五、用Promise封装AJAX代码原生的AJAX代码真的是又臭又长了，可以用Promise把它们封装起来，每次使用只需要调用一下封装好的函数就可以了：

文章插图

之后想要使用AJAX ，只需要一个简单的get()函数就可以搞定啦！
有一个地方需要注意的是，在get()函数里面调用了req.onload ，之前为什么这里不使用req.onreadystatechange呢?
上面已经说过， Promise的状态的改变是单向的，一次性的，一旦改变，状态就会凝固了，而我们代码中判断状态的片段是这样的：
if (req.readyState == 4 && req.status == 200) { resolve(req.response)} else { reject(Error(req.statusText)) }我们在if...else语句中改变了Promise的状态，也就是req.onreadystatechange只会被调用一次。那么如果用req.onreadystatechange的话，会出现什么结果呢？
我们永远只能得到error～因为req的state一旦改变， req.onreadystatechange就会被调用，所以我们永远只能捕捉到req的state为2的时候！
不得不说Promise真的很有趣！