es6学习七：Promise

Promise出现的原因：

封装一个方法，给一个要读取文件的路径，这个方法要能读取文件，并将内容返回

普通读取文件的方式：

fs.readFile(path.join(__dirname, './files/1.txt'), 'utf-8', (err, dataStr) => {
  if (err) throw err
  console.log(dataStr)
})

自己封装一个方法：

function getFileByPath(fpath) {
  fs.readFile(fpath, 'utf-8', (err, dataStr) => {
    if (err) throw err
    console.log("datastr: "+dataStr)
    return dataStr
  })
}
var result = getFileByPath(path.join(__dirname, './files/1.txt'))
console.log("result: "+result)

发现result为undefined，也就是说封装的方法得不到文件的内容，原因在于readFile()是一个异步方法，加入队列后有子程序去执行，主程序不会管了，然后会发现封装的方法根本就没有返回值，因此需要对这个方法继续改进

新封装的方法：

function getFileByPath(fpath, callback) {
  fs.readFile(fpath, 'utf-8', (err, dataStr) => {
    // 如果报错了，进入if分支后，if后面的代码就没有必要执行了
    if (err) return callback(err)
    // console.log(dataStr)
    // return dataStr
    callback(null, dataStr)
  })
}
getFileByPath(path.join(__dirname, './files/1.txt'), (err, dataStr) => {
  // console.log(dataStr + '-----')
  if (err) return console.log(err.message)
  console.log(dataStr)
})

把上面新封装的方法改成能够简单理解一点的方法：

function getFileByPath(fpath, succCb, errCb) {
  fs.readFile(fpath, 'utf-8', (err, dataStr) => {
    if (err) return errCb(err)
    succCb(dataStr)
  })
}

getFileByPath(path.join(__dirname, './files/1.txt'), function (data) {
  console.log(data + '成功了')
}, function (err) {
  console.log('获取文件失败了：' + err.message)
})
getFileByPath(path.join(__dirname, './files/11.txt'), function (data) {
  console.log(data + '成功了')
}, function (err) {
  console.log('获取文件失败了：' + err.message )
})

新需求：先读取文件1，再读取文件2，最后再读取文件3

function getFileByPath(fpath, succCb, errCb) {
  fs.readFile(fpath, 'utf-8', (err, dataStr) => {
    if (err) return errCb(err)
    succCb(dataStr)
  })
}
getFileByPath(path.join(__dirname, './files/1.txt'), function (data) {
  console.log(data)

  getFileByPath(path.join(__dirname, './files/2.txt'), function (data) {
    console.log(data)

    getFileByPath(path.join(__dirname, './files/3.txt'), function (data) {
      console.log(data)
    })
  })
})

虽然成功的获取到了三个文件的内容，但是也发现回调嵌套太多，造成了回调地狱，为了解决这种问题，可以使用ES6中的Promise，来解决回调地狱的问题，把多层的回调嵌套改成串联式的函数调用

Promise的基本概念：

Promise 是一个 构造函数，既然是构造函数， 那么，我们就可以 new Promise() 得到一个 Promise 的实例；

在 Promise 上，有两个函数，分别叫做 resolve（成功之后的回调函数） 和 reject（失败之后的回调函数）

在 Promise 构造函数的 Prototype 属性上，有一个 .then() 方法，也就说，只要是 Promise 构造函数创建的实例，都可以访问到 .then() 方法

Promise 表示一个 异步操作；每当我们 new 一个 Promise 的实例，这个实例，就表示一个具体的异步操作；

既然 Promise 创建的实例，是一个异步操作，那么，这个 异步操作的结果，只能有两种状态：

状态1： 异步执行成功了，需要在内部调用 成功的回调函数 resolve 把结果返回给调用者；

状态2： 异步执行失败了，需要在内部调用 失败的回调函数 reject 把结果返回给调用者；

由于 Promise 的实例，是一个异步操作，所以，内部拿到 操作的结果后，无法使用 return 把操作的结果返回给调用者； 这时候，只能使用回调函数的形式，来把 成功 或 失败的结果，返回给调用者；

我们可以在 new 出来的 Promise 实例上，调用 .then() 方法，预先为 这个 Promise 异步操作，指定 成功（resolve） 和 失败（reject） 回调函数；

function getFileByPath(fpath) {
  return new Promise(function (resolve, reject) {
    fs.readFile(fpath, 'utf-8', (err, dataStr) => {

      if (err) return reject(err)
      resolve(dataStr)

    })
  })
}
  getFileByPath('./files/2.txt')
  .then(function (data) {
    console.log(data + '-------')
  }, function (err) {
    console.log(err.message)
  })

使用Promise解决回调地狱

function getFileByPath(fpath) {
  return new Promise(function (resolve, reject) {
    fs.readFile(fpath, 'utf-8', (err, dataStr) => {

      if (err) return reject(err)
      resolve(dataStr)

    })
  })
}
getFileByPath('./files/1.txt')
  .then(function (data) {
    console.log(data)

    // 读取文件2
    return getFileByPath('./files/2.txt')
  })
  .then(function (data) {
    console.log(data)

    return getFileByPath('./files/3.txt')
  })
  .then(function (data) {
    console.log(data)
  })
  .catch(function (err) { // catch 的作用： 如果前面有任何的 Promise 执行失败，则立即终止所有 promise 的执行，并 马上进入 catch 去处理 Promise中 抛出的异常；
    console.log('这是自己的处理方式：' + err.message)
  })

新增需求： 前面的 Promise 执行失败了，但是不能影响后续 promise 的正常执行，我们可以单独为 每个 promise，通过 .then 指定一下失败的回调

getFileByPath('./files/11.txt')
  .then(function (data) {
    console.log(data)

    // 读取文件2
    return getFileByPath('./files/2.txt')
  }, function (err) {
    console.log('这是失败的结果：' + err.message)
    // return 一个 新的 Promise
    return getFileByPath('./files/2.txt')
  })
  .then(function (data) {
    console.log(data)

    return getFileByPath('./files/3.txt')
  })
  .then(function (data) {
    console.log(data)
  })

新增需求和上面的需求刚好相反：如果 后续的Promise 执行，依赖于 前面 Promise 执行的结果，如果前面的失败了，则后面的就没有继续执行下去的意义了，此时，我们想要实现，一旦有报错，则立即终止所有 Promise的执行

getFileByPath('./files/1.txt')
  .then(function (data) {
    console.log(data)

    // 读取文件2
    return getFileByPath('./files/22.txt')
  })
  .then(function (data) {
    console.log(data)

    return getFileByPath('./files/3.txt')
  })
  .then(function (data) {
    console.log(data)
  })
  .catch(function (err) { // catch 的作用： 如果前面有任何的 Promise 执行失败，则立即终止所有 promise 的执行，并 马上进入 catch 去处理 Promise中 抛出的异常；
    console.log('这是自己的处理方式：' + err.message)
  })

Jquery中Ajax使用Promise：

$(function () {
      $('#btn').on('click', function () {
        $.ajax({
          url: './data.json',
          type: 'get',
          dataType: 'json',
          // success: function(data){
          //   console.log(data)
          // }
        })
          .then(function (data) {
            console.log(data)
          })
      })
    });