开始的异步处理方式

getDataA(params, function(dataA){
      // ...
    getDataB(params, function(dataB){
        // ...
        getDatac(params, function(dataC){
          // ...
        })
    })
})

开始的异步处理方式是这种通过callback进行处理，一步步去处理，当需要处理N步时就要有N个回调函数，代码就会纵向发展，同时使阅读性大大降低。
这种方式有个名字叫：地狱回调！很好理解，就像地狱一样，一层一层的进行调用。

Promise

基本用法

// 创建一个Promise对象
const promise = new Promise(function(resolve, reject) {
  // 你可以在里面执行你的异步操作，例如请求数据
    getDataA(params, function(dataA) {
      if(dataA) {
        // 改变状态为成功并传入数据
        resolve(dataA)
      }
      // 改变状态为失败并传入错误信息
      reject(new Error(dataA))
    })
})

promise.then(function(dataA) {
  // 成功后的回调
}, function(err) {
  // 失败后的回调
})

Promise对象接收一个函数作为参数，这个函数拥有两个参数，代表成功（resolve）和代表失败（reject）的函数
这里暴躁老哥就要说了：这不还是要回调，只不过包了一层，完全是多此一举！
大佬您别急，请继续往下看~~

Promise执行

console.log('Hello')
const promise = new Promise(function(resolve, reject) {
  console.log('Hi Promise')
  setTimeout(function() {
    console.log(1)
    resolve('成功了')
  }, 1000)
  setTimeout(function() {
    console.log(2)
    reject('失败了')
  }, 2000)
})
promise.then(function(res) {
  console.log(res);
}, function(err) {
  console.log(err);
})
console.log('Bay')

// Hello
// Hi Promise
// Bay
// 1
// 成功了
// 2

可以看到promise在创建时就会调用，并且会告诉异步的操作：哎，你先处理着，完了告诉我结果，我先去忙别的了。
Promise的特点：
1.Promise创建时就会执行
2.Promise会有三个状态，处理中、成功、失败
3.即使出了结果，里面的异步操作并不会停止！
4.虽然出了结果依旧会执行完所有异步，但是以第一个结果为准
暴躁老哥一拍桌子！好家伙，拿到结果就跑，后面说啥不管了。

Promise.prototype.then

let num = 0;

function nextF(data) {
  num +=1;
  console.log(num, data)
  return data;
}

const promise = new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve('成功了')
    }, 1000)
})

promise
.then(nextF)
.then(nextF)
.then(nextF)

// 1 成功了
// 2 成功了
// 3 成功了

这里我定义了一个函数nextF，和一个变量num。nextF函数每次执行会使num+1并打印后把参数return。然后我把它传给promise.then，通过打印出的结果可以看出，then返回的是一个新的promise，并且默认是Fulfilled状态，所以then可以链式调用。

Promise.prototype.catch

let num = 0;

function nextF(data) {
  num +=1;
  console.log(num, data)
  return data;
}

const promise = new Promise(function(resolve, reject) {
    setTimeout(function() {
      reject('失败了')
    }, 1000)
})

promise
.catch(nextF)
.catch(nextF)
.catch(nextF)

// 1 失败了

这里改写了一下上面的例子，把promise的状态改为Rejected，发现catch方法只执行了一次，同样连续调用不会报错。所以catch方法和then方法一样会返回一个新的promise，并且间接证明了then和catch返回的新promise都是默认成功状态。

同时catch方法还有一个作用，捕获promise抛出的错误。
暴躁老哥：你这也证明不了返回的新promise默认是Fulfilled状态呀！那您接着往下看

let num = 0;

function nextF(data) {
  num +=1;
  console.log(num, data)
  return data;
}

const promise = new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve('成功了')
    }, 1000)
})

promise
.then(nextF)
.then(function(data) {
  num +=1;
  console.log(num, data)
  throw new Error('我喜欢红色')
})
.then(nextF)
.then(nextF)
.catch(nextF)
.then(nextF)

// 1 成功了
// 2 成功了
// 3 Error: 我喜欢红色
// 4 Error: 我喜欢红色

这里在第二个then方法中抛出一个错误，结果打印了两个成功了、两个失败了。为啥两个失败了，因为catch捕获了错误并返回，而返回的是一个新的promise，而这个新的promise默认Fulfilled状态，导致最后的then方法运行了，打印出了第二个失败了。

这里也证明了一个很神奇的功能，那就是当promise抛出错误时，会跳过后面的then直到被catch捕获。promise出现Rejected时也一样。
所以reject的作用是抛出一个异常！暴躁老哥先坐下，我知道你要说什么。当promise是Rejected状态时，并且后面没有进行捕获时，控制台会打印出一个Error！

Promise.prototype.finally

new Promise(function(resolve, reject) {
  resolve('成功了')
})
.then(function(res) {
  console.log(res)
  return res
})
.catch(function(err) {
  console.log(err);
  return err
})
.finally(function(data) {
  console.log('finally', data);
  return data
})
.then(function(res) {
  console.log(res)
  return res
})

// 成功了
// finally undefined
// 成功了

// 另一个例子

new Promise(function(resolve, reject) {
  throw new Error('红扑扑')
})
.then(function(res) {
  console.log(res)
  return res
})
.catch(function(err) {
  console.log(err);
  return err
})
.finally(function(data) {
  console.log('finally', data);
  return data
})
.then(function(res) {
  console.log(res)
  return res
})

// Error: 红扑扑
// finally undefined
// Error: 红扑扑

finally和then、catch方法一样返回一个新的promise并且默认Fulfilled状态。但是他接收的回调函数没有任何参数，同样返回值不会影响后面的行为，并且无论什么状态都会执行。所以一般只会用来在处理promise完毕后的善后工作

Promise.resolve

const p = Promise.resolve('a')

p.then(function(data) {
  console.log(data);
})

// a

// 打印p会得到一个Promise实例
// 所以

Promise.resolve('a')
// 等价于
new Promise(function(resolve) {
  resolve('a')
})

1.参数是一个 Promise 实例

const p = Promise.resolve(
  new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve('失败了')
    })
  })
)

p.then(function(data) {
  console.log(data);
})
.catch(function(err) {
  console.log(err)
})

// 失败了

会执行这个Promise，所以原本Promise.resolve代表Fulfilled本应会执行then，但是并未走then而是直接执行了catch

2.参数是一个thenable对象
什么是thenable对象？
thenable对象就是拥有then方法对象

let thenable = {
  a: 1,
  then: function(resolve, reject) {
    console.log(this.a)
    reject(42);
  }
};

let p1 = Promise.resolve(thenable);
p1.then(function (value) {
  console.log('then', value)
})
.catch(function(err) {
  console.log('catch', err)
});

// 1
// catch 42

会把这个thenable对象转换成Promise对象并执行then方法，所以跳过了p1.then执行了p1.catch。

3.不传参数

let p1 = Promise.resolve();
p1.then(function (value) {
  console.log('then', value)
})
.catch(function(err) {
  console.log('catch', err)
});

// then undefined

Promise.resolve允许不传参数，但是会直接返回一个Fulfilled状态的Promise

Promise.reject
Promise.reject的用法等同于Promise.resolve

let p1 = Promise.reject();
p1.then(function (value) {
  console.log('then', value)
})
.catch(function(err) {
  console.log('catch', err)
});

// catch undefined

区别是resolve传入的如果是一个promise对象或者thenable对象会执行，以得到的结果为准，如果不是则转换为Promise对象并执行resolve，参数就是传入的参数。而reject无论传入什么，都会返回一个rejected状态的Promise，而传入的参数就是失败或者说错误的理由

批量处理Promise对象

const p1 = new Promise(function(resolve, reject){
  setTimeout(function() {
    resolve('p1')
  }, 1000)
})
const p2 = new Promise(function(resolve, reject){
  setTimeout(function() {
    resolve('p2')
  }, 2000)
})

const p3 = new Promise(function(resolve, reject){
  setTimeout(function() {
    reject('p3')
  }, 500)
})

const p4 = new Promise(function(resolve, reject){
  setTimeout(function() {
    resolve('p4')
  }, 0)
})

这里创建p1、p2、p3、p4四个Promise实例

Promise.all

Promise.all([p1, p2, p4])
.then(res => {
  console.log('success', res)
})
.catch(err => {
  console.log('error', err)
})
// success ["p1", "p2", "p4"]

Promise.all([p1, p3, p4])
.then(res => {
  console.log('success', res)
})
.catch(err => {
  console.log('error', err)
})

// error p3

Promise.all接受一个数组作为参数，数组的项如果是Promise对象就会直接执行，如果不是就会默认执行上面说到的Promise.resolve进行转换，并返回一个新的Promise对象，新的Promise的状态取决于传入的一系列Promise对象：
1.p1、p2、p3的状态都为Fulfilled，这个Promise对象的状态就是Fulfilled，传入then方法是一个数组对应p1、p2、p3
2.p1、p2、p3在执行中有一个出现Rejected，就会直接调用catch，错误信息即最先Rejected的信息

Promise.race

Promise.race([p1, p2, p4])
.then(res => {
  console.log('success', res)
})
.catch(err => {
  console.log('error', err)
})
// success p4

Promise.race([p1, p3])
.then(res => {
  console.log('success', res)
})
.catch(err => {
  console.log('error', err)
})

// error p3

Promise.race的用法等同于Promise.all，区别于Promise.race的状态是赛跑原则。取决于得到的第一个状态

Promise.allSettled

Promise.allSettled([p1, p2, p3, p4])
.then(res => {
  console.log('success', res)
})
.catch(err => {
  console.log('error', err)
})
/* success [
  {
    status: "fulfilled",
    value: "p1"
  },
  {
    status: "fulfilled",
    value: "p2"
  },
  {
    status: "rejected",
    value: "p3"
  },
  {
    status: "fulfilled",
    value: "p4"
  }
]
*/

Promise.allSettled的用法等同于Promise.all，区别于Promise.allSettled不会出现rejected状态，它会等所有的Promise执行完之后一起返回

Promise.any

Promise.any([p1, p2, p3, p4])
.then(res => {
  console.log('success', res)
})
.catch(err => {
  console.log('error', err)
})

// success p4

Promise.any的用法和Promise.race一致，区别于正好相反，Promise.any是当参数实例全部rejected时才会是rejected，当参数实例中出现一个Fulfilled它的状态就会是fulfilled，传入then的参数就是这个参数实例的结果

Promise处理异步

最初的例子用Promise改写

new Promise(function(resolve, reject) {
  getDataA(params, function(data) {
    if(data){
      resolve(data)
    }else {
      reject(new Error(data))
    }
  })
})
.then(function(dataA) {
  return new Promise(function(resolve, reject) {
    getDataB(params, function(data) {
      if(data){
        resolve(data)
      }else {
        reject(new Error(data))
      }
    })
  })
})
.then(function(dataB) {
  return new Promise(function(resolve, reject) {
    getDataC(params, function(data) {
      if(data){
        resolve(data)
      }else {
        reject(new Error(data))
      }
    })
  })
})
// ...
.catch(function(err) {
  // ...
})

结论

1.Promise虽然未解决地狱回调，但是解决了代码纵向发展的趋势，使可读性更高
2.虽然解决了纵向发展的问题，但是在上面的例子请求数据时，最后的请求无法直接使用第一次请求的结果

参考

ECMAScript 6 入门中Promise章节