【ES6】ES6的重要的13种新特性之Promise

promise最大的目的在于可以让异步代码变得井然有序。

在JavaScript的实际开发中需要使用到很多的异步开发。如浏览器中的动画效果、服务器或桌面端的IO操作。

ES2015之前，为了实现动画效果的顺序展示，需要把这些动画效果的方法通过回调函数“串”起来。

animate1(()=>{
  animate2(()=>{
    animate3(()=>{
      animate4(()=>{
        //...
      })
    })
  })
})

Promise在设计上具有原子性：等待、成功、失败。

1.创建Promise对象

创建一个Promise对象，并将其作为函数值返回。

Promise构造函数要求传入一个函数，并带有resolve和reject参数，这两个参数用于结束Promise等待的函数，对应成功和失败。

将新创建的Promise对象作为异步方法的返回值，所有的状态就可以使用它所提供的方法进行控制。

function asyncMethod(...agrs){
  return new Promise(resolve,reject) => {
    //...
  }
}

2.进行异步操作

通过resolve(value)和reject(reason)方法控制Promise的原子状态。

resolve(value)：控制当前Promise对象是否进入成功状态，一旦执行该方法有且只有一个返回值，Promise对象会从等待状态进入成功状态且不再改变状态。

reject(reason)：控制当前Promise对象是否进入失败状态，一旦进入失败状态就不再改变。

new Promise((resolve,reject) => {
  api.call('fetch-data',(err,data) => {
    if(err) return reject(err)
    resolve(data);
  })
})

当在Promise对象的首层函数作用域中一旦出现throw语句，Promise对象便会直接进入失败状态，且以throw语句的抛出值作为错误值进行错误处理。

return值使Promise停留在等待状态。

3.处理Promise的状态

promise.then(onFulfilled,[onRejected])处理Promise对象的成功状态并接收返回值。

promise.catch(onRejected)处理Promise对象的失败状态并处理失败的原因

这两个方法都会返回一个Promise对象，Promise对象会组合成一个呈流水线的Promise对象链

asyncMethod()
	.then((...args) => args /*...*/)
	.catch(err => console.error(err))

如果onFulfilled/onRejected中所返回的值是一个Promise对象，该对象会被加入到Promise的处理链中。

如果onFulfilled/onRejected中所返回的值不是一个Promise对象，则会返回一个已经进入成功状态的Promise对象。

如果onFulfilled/onRejected中因throw语句抛出一个错误err，则会返回一个已经进入失败状态的Promise对象。

只有当Promise对象链中的上一个Promise对象进入成功或失败阶段，下一个Promise对象才会被激活。

animate1()
	.then(() => animate2())
	.then(() => animate3())
	.then(() => animate4())
	.then(() => {
      //...
	})

Promise对象的状态是具有传递性的。

4.高级使用方法

①Promise.all(iterable)

该方法可传入一个可迭代对象（如数组）并返回一个Promise对象，该Promise对象会在可迭代对象中所有的Promise对象全部进入完成状态（成功或失败）后被激活。

如果可迭代对象中的所有Promise对象都进入了成功状态，那么该方法返回的Promise对象也会进入成功状态，并以一个可迭代对象来承载其中的所有返回值。

如果可迭代对象中Promise对象的其中一个进入了失败状态，那么该方法返回的Promise对象也会进入失败状态。

const promises = [async(1),async(2),async(3),async(4)];

Promise.all(promises)
	.then(values => {
      //...
	})
	.catch(err => console.error(err));

②Promise.race(iterable)

该方法接收包含一个或多个Promise对象的可迭代对象，并监听所有的Promise对象，并等待第一个进入完成状态的Promise对象。这个方法返回的Promise对象以第一个完成的Promise对象的状态为准。

const promises = [async(1),async(2),async(3),async(4)];

Promise.arace(promises)
	.then(values => {
      //...
	})
	.catch(err => console.error(err));

附代码地址：https://github.com/JoseyDon/ES6-demo