ES6 中 Promise
在说Promise之前我们先简单说一下什么是同步异步？
同步（Sync）：所谓同步，就是发出一个功能调用时，在没有得到结果之前，该调用就不返回或继续执行后续操作。
异步（Async）：异步与同步相对，当一个异步过程调用发出后，调用者在没有得到结果之前，就可以继续执行后续操作。当这个调用完成后，一般通过状态、通知和回调来通知调用者。
Promise是什么？
Promise是JS异步编程中的重要概念，异步抽象处理对象，是目前比较流行Javascript异步编程解决方案之一。这句话说的很明白了，Promise是一种用于解决异步问题的思路、方案或者对象方式。
在js中，经常使用异步的地方是Ajax交互。比如在es5时代，jQuery的ajax的使用success来完成异步的：
$.ajax({ url:'/xxx', success:()=>{}, error: ()=>{} })
这种方法可以清楚的让读代码的人明白那一部分是Ajax请求成功的回调函数和失败的回调函数。但是问题来了，当一次请求需要连续请求多个接口时，这段代码仿佛进入了一团乱麻中：
// 第一次 $.ajax({ url:'/xxx', success:()=>{ // 第二次 $.ajax({ url:'/xxx', success:()=>{ // 第三次 $.ajax({ url:'/xxx', success:()=>{ // 可能还会有 }, error: ()=>{} }) }, error: ()=>{} }) }, error: ()=>{} })
也许因为success和error这两个函数的存在，理解这段代码会很简单，但是当我们更改需求的时候，这将成为一个棘手的问题。这就是回调地狱。
当然，这是es5时代。当js这门语言发展到es6时代时，Promise的出现给异步带来了变革。Promise提供一个then，来为异步提供回调函数：
$.ajax({ url:'/xxx', }).then( ()=>{ // 成功的回调 }, ()=>{ // 失败的回调 })
而其先进之处则是，可以在then方法中继续写Promise对象并返回，然后继续调用then来进行回调操作。
Promise的特点？
- 对象的状态不会受到外界的影响。Promise代表的是一个异步的操作。一共有三种状态pending(进行中)，resolved(已做完)和rejected(已失败)，异步操作的结果，决定这Promise最终的状态。成功的则会使用resolved作为回调，如果失败则会使用rejected作为回调，任何的操作都无法改变其中的状态。
- Promise的状态一旦改变，就永远不会再改变。Promise的改变只有两种情况,Pending –> rejected或者Pending-> resolved，Promise的最大特点也就是在此，如果你错过了他的返回结果，如果再想通过某种方法，去获得Promise的返回结果是获取不到的。
简单来说，Promise 就是用同步的方式写异步的代码，用来解决回调问题
then()方法
then 方法就是把原来的回调写法分离出来，在异步操作执行完后，用链式调用的方式执行回调函数。
而 Promise 的优势就在于这个链式调用。我们可以在 then 方法中继续写 Promise 对象并返回，然后继续调用 then 来进行回调操作。
下面做一个吃早饭的演示，它们是层层依赖的关系，下一步的的操作需要使用上一部操作的结果。（这里使用 setTimeout 模拟异步操作），正式开发可以用 ajax 异步
function cake() {
console.log('排队买早饭')
let breakfast = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('买了手抓饼')
resolve('手抓饼')
}, 100)
})
return breakfast
}
function eat(data) {
console.log('开始吃早饭：' + data)
let eatbreakfast = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('吃完早饭')
resolve('去上班')
}, 100)
});
return eatbreakfast
}
cake().then((res) => {
return eat(res)
}).then((res) => {
console.log(res)
})
打印结果：
catch()方法：
catch在链式写法中可以捕获前面then中发送的异常。
function cake() {
console.log('排队买早饭')
let breakfast = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('没买到饼')
reject('饼买光了')
}, 100)
})
return breakfast
}
function eat(data) {
console.log('开始吃早饭：' + data)
let eatbreakfast = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('吃完早饭')
resolve('去上班')
}, 100)
});
return eatbreakfast
}
cake().then((res) => {
return eat(res)
}).catch((res) => {
console.log(res)
})
打印结果：
它的另一个作用是，当执行 resolve 的回调（也就是上面 then 中的第一个参数）时，如果抛出异常了（代码出错了），那么也不会报错卡死 js，而是会进到这个 catch 方法中。
function cake() {
console.log('排队买早饭')
let breakfast = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('买了豆浆')
resolve('豆浆')
}, 100)
})
return breakfast
}
function eat(data) {
console.log('开始吃早饭：' + data)
let eatbreakfast = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('吃完早饭')
resolve('去上班')
}, 100)
});
return eatbreakfast
}
cake().then((res) => {
throw new Error("买了坏的豆浆");
return eat(res)
}).catch((res) => {
console.log(res)
})
打印结果：
all()方法：
Promise 的 all 方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。
比如下面代码，两个个异步操作是并行执行的，等到它们都执行完后才会进到 then 里面。同时 all 会把所有异步操作的结果放进一个数组中传给 then。
function eat() {
console.log('排队买手抓饼')
let breakfast = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('刚做好的手抓饼')
resolve('热乎的手抓饼')
}, 100)
})
return breakfast
}
function drink() {
console.log('排队买豆浆')
let soybean = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('刚打磨的豆浆')
resolve('热乎的豆浆')
}, 100)
})
return soybean
}
Promise.all([eat(), drink()]).then((results) =>{
console.log("早饭都买好了")
console.log(results)
})
打印结果：
race()方法：
race 按字面解释，就是赛跑的意思。race 的用法与 all 一样，只不过 all 是等所有异步操作都执行完毕后才执行 then 回调。而 race 的话只要有一个异步操作执行完毕，就立刻执行 then 回调。
注意：其它没有执行完毕的异步操作仍然会继续执行，而不是停止。
这里我们将上面样例的 all 改成 race
function eat() {
console.log('排队买手抓饼')
let breakfast = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('刚做好的手抓饼')
resolve('热乎的手抓饼')
}, 100)
})
return breakfast
}
function drink() {
console.log('排队买豆浆')
let soybean = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('刚打磨的豆浆')
resolve('热乎的豆浆')
}, 100)
})
return soybean
}
Promise.race([eat(), drink()]).then((results) =>{
console.log("哈哈，早饭都买好了")
console.log(results)
})
打印结果：
