ES6中的Promise介绍

最新推荐文章于 2024-05-24 18:15:02 发布

夏风0511

最新推荐文章于 2024-05-24 18:15:02 发布

阅读量245

点赞数

分类专栏： ES6 js 前端文章标签： ES6 js 前端

本文链接：https://blog.csdn.net/zeng_zhao0511/article/details/99288959

版权

前端同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

ES6

1 篇文章 0 订阅

订阅专栏

回调地狱概念引入

什么是回调地狱呢？通俗的讲就是一层回调套一层回调，然后结果就是都是嵌套回调。如下：读取多个文件

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)
    })
  })
})

调用流程是：
先读取文件1，再读取文件2，最后再读取文件3

再插上一张图：
哈哈，这代码是不是看起来很恶心。。。
在这里插入图片描述
于是乎我们引入了es6的Promise这个构造函数来解决回调地狱这个问题
问： Promise 的本质是要干什么的
答：就是单纯的为了解决回调地狱问题；并不能帮我们减少代码量

Promise 概念

首先我们要理解以下几点：

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



**注意点**

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


2. 这是一个具体的异步操作，其中，使用 function 指定一个具体的异步操作
var promise = new Promise(function(){
  //这个 function 内部写的就是具体的异步操作！！！
}) 


3. 每当 new 一个 Promise 实例的时候，就会立即 执行这个 异步操作中的代码
   也就是说，new 的时候，除了能够得到 一个 promise 实例之外，还会立即调用 我们为 Promise 构造函数传递的那个 function，执行这个 function 中的 异步操作代码；

写个读取文件的小demo

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)

    })
  })
}

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

接下来用promise来解决回调地狱问题

需求：有3个文件，先读取文件1，在读取2，最后读取3

用类似回调地狱的Promise方法：

const fs = require('fs')

//错误的示范，千万不要这么用； 硬是把 法拉利，开成了 拖拉机；
getFileByPath('./files/1.txt')
  .then(function (data) {
    console.log(data)

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

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

正确的Promise方法

const fs = require('fs')

1.如果 ，前面的 Promise 执行失败，我们不想让后续的Promise 操作被终止，可以为 每个 promise 指定 失败的回调
2.在上一个 .then 中，返回一个新的 promise 实例，可以继续用下一个 .then 来处理

a.需求一：
哪怕前面的 Promise 执行失败了，但是，不要影响后续 promise 的正常执行，此时，我们可以单独为 每个 promise，通过 .then 指定一下失败的回调；
getFileByPath('./files/1.txt')
  .then(function (data) {//data为1.txt的内容
    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) {//data为2.txt的内容
    console.log(data)

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


b.需求二
和上面的需求刚好相反：如果 后续的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语法，没有兼容性问题。

<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)
          })
          .catch(function(err){
            console.log(err);
          })
      })
    });
  </script>
</body>