JavaScript-promise

时间 2019-12-17

原文原文链接

问题需求

封装读取文件的方法(读取文件为异步操做)，不用es6javascript

// 需求：你要封装一个方法，我给你一个要读取文件的路径，你这个方法能帮我读取文件，并把内容返回给我

const fs = require('fs')
const path = require('path')

// 这是普通读取文件的方式
/* fs.readFile(path.join(__dirname, './files/1.txt'), 'utf-8', (err, dataStr) => {
  if (err) throw err
  console.log(dataStr)
}) */

// 初衷： 给定文件路径，返回读取到的内容
// 咱们能够规定一下， callback 中，有两个参数，第一个参数，是 失败的结果；第二个参数是成功的结果；
// 同时，咱们规定了： 若是成功后，返回的结果，应该位于 callback 参数的第二个位置，此时， 第一个位置 因为没有出错，因此，放一个 null；  若是失败了，则 第一个位置放 Error对象，第二个位置防止一个 undefined
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)
  })
}

/* var result = getFileByPath(path.join(__dirname, './files/1.txt'))
console.log(result) */
getFileByPath(path.join(__dirname, './files/1.txt'), (err, dataStr) => {
  // console.log(dataStr + '-----')
  if (err) return console.log(err.message)
  console.log(dataStr)
})

回调地狱

对上面代码进行改进html

// 需求：你要封装一个方法，我给你一个要读取文件的路径，你这个方法能帮我读取文件，并把内容返回给我

const fs = require('fs')
const path = require('path')


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

// getFileByPath(path.join(__dirname, './files/11.txt'), function (data) {
//   console.log(data + '娃哈哈，成功了！！！')
// }, function (err) {
//   console.log('失败的结果，咱们使用失败的回调处理了一下：' + err.message)
// })

// 需求： 先读取文件1，再读取文件2，最后再读取文件3
// 回调地狱
// 使用 ES6 中的 Promise，来解决 回调地狱的问题；
// 问： Promise 的本质是要干什么的：就是单纯的为了解决回调地狱问题；并不能帮咱们减小代码量；
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)
    })
  })
})

promise概念

Promise 是一个构造函数，既然是构造函数，那么，咱们就能够 new Promise() 获得一个 Promise 的实例；
在 Promise 上，有两个函数，分别叫作 resolve（成功以后的回调函数）和 reject（失败以后的回调函数）
在 Promise 构造函数的 Prototype 属性上，有一个 .then() 方法，也就说，只要是 Promise 构造函数建立的实例，均可以访问到 .then() 方法
Promise 表示一个异步操做；每当咱们 new 一个 Promise 的实例，这个实例，就表示一个具体的异步操做；
既然 Promise 建立的实例，是一个异步操做，那么，这个异步操做的结果，只能有两种状态：
5.1 状态1：异步执行成功了，须要在内部调用成功的回调函数 resolve 把结果返回给调用者；
5.2 状态2：异步执行失败了，须要在内部调用失败的回调函数 reject 把结果返回给调用者；
5.3 因为 Promise 的实例，是一个异步操做，因此，内部拿到操做的结果后，没法使用 return 把操做的结果返回给调用者；这时候，只能使用回调函数的形式，来把成功或失败的结果，返回给调用者；
咱们能够在 new 出来的 Promise 实例上，调用 .then() 方法，【预先】为这个 Promise 异步操做，指定成功（resolve）和失败（reject）回调函数；

注意：这里 new 出来的 promise，只是表明【形式上】的一个异步操做；
什么是形式上的异步操做：就是说，咱们只知道它是一个异步操做，可是作什么具体的异步事情，目前还不清楚
var promise = new Promise()java

const fs = require('fs')

// 每当 new 一个 Promise 实例的时候，就会当即 执行这个 异步操做中的代码
// 也就是说，new 的时候，除了可以获得 一个 promise 实例以外，还会当即调用 咱们为 Promise 构造函数传递的那个 function，执行这个 function 中的 异步操做代码；
/* var promise = new Promise(function () {
  fs.readFile('./files/2.txt', 'utf-8', (err, dataStr) => {
    if (err) throw err
    console.log(dataStr)
  })
}) */


// 初衷： 给路径，返回读取到的内容
function getFileByPath(fpath) {
  return new Promise(function (resolve, reject) {
    fs.readFile(fpath, 'utf-8', (err, dataStr) => {

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

    })
  })
}

使用promise解决回调地狱

两种状况：node

会中断

const fs = require('fs')

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

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

    })
  })
}

// 读取文件1
// 在上一个 .then 中，返回一个新的 promise 实例，能够继续用下一个 .then 来处理


// 若是 ，前面的 Promise 执行失败，咱们不想让后续的Promise 操做被终止，能够为 每一个 promise 指定 失败的回调
 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)
  }).then(function (data) {
    console.log(data)
  })

不会中断

const fs = require('fs')

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

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

    })
  })
}

// 当 咱们有这样的需求： 哪怕前面的 Promise 执行失败了，可是，不要影响后续 promise 的正常执行，此时，咱们能够单独为 每一个 promise，经过 .then 指定一下失败的回调；

// 有时候，咱们有这样的需求，个上面的需求恰好相反：若是 后续的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中使用promise

想不到jQuery这个强大的库中居然支持promise，果真强大jquery

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>

  <input type="button" value="èŽ·å�–æ•°æ�®" id="btn">

  <script src="./node_modules/jquery/dist/jquery.min.js"></script>

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

</html>

{
  "name": "小强",
  "age": 18
}