Promise初体验

ES6中推出了一种新的异步编程的方案，可以解决回调嵌套过深（俗称回调地狱）导致阅读性差，难以维护的问题，如下：

$.get(url, data1 => {
    console.log(data1)
    $.get(data1.url, data2 => {
        console.log(data1)
        $.get(data2.url, data3 => {
          console.log(data2)
          $.get(data3.url, data4 => {
            console.log(data3)
        })
      })
    })
})

先来简单介绍一下Promise：
Promise对象是一个构造函数，用来生成Promise实例。同时接受一个函数作为参数，该函数的两个参数分别是resolve和reject（规定）。它们是两个函数，一个是成功后执行的回调，一个是失败后执行的回调。

let promise = new Promise(function(resolve, reject) {
  // ...
  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

生成实例后，要用then方法分别指定resolved和rejected的回调函数。

promise.then(
  () => { // 成功的回调函数 },
  () => { // 失败的回调函数 }
)

说到这里，依旧没有说到Promise怎么解决回调嵌套过深的问题，那么在Promise中是怎么在回调中套回调的呢？
答案是：用 then 链式操作异步代码。

我们在控制台输入这么一段代码

let pro = new Promise(function(resolve, reject) {
  if (true){
    resolve('成功');
  } else {
    reject('失败');
  }
}).then(
  (value) => { console.log(value) },
  (error) => { console.log(error) }
)

打印出pro，看看是什么

image.png
可以看到，promise对象在 then 之后，返回的还是一个promise对象。这也就是说，我们可以链式调用then了！（但是这个promise对象和原来那个promise对象不是同一个）

让我们再"套一层"回调：

let pro = new Promise(function(resolve, reject) {
  if (true){
    resolve('成功');
  } else {
    reject('失败');
  }
}).then(
  (value) => { console.log(value); return '上一个then传来成功的消息'},  
// 这里 return 的值会被传为下一个then的参数
  (error) => { console.log(error) }
).then(
    (value) => { console.log(value) }
)

以上，写了Promise的基本用法，用 Promise 来实现异步代码，可读性得到了增强，也更好维护了。