【ECMAScript 学习笔记】3.Promise 的使用

最新推荐文章于 2025-01-29 22:24:59 发布

原创最新推荐文章于 2025-01-29 22:24:59 发布 · 置顶 · 462 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Promise #es6 #ECMAScript6 #JavaScript

爱做大前端同时被 2 个专栏收录

14 篇文章

订阅专栏

【ECMAScript 6】

5 篇文章

订阅专栏

本文深入讲解了Promise的基本概念、状态转换、常用函数如then、catch、finally等，并介绍了Promise.all和Promise.race的使用场景。

Promise 的作用

Promise 用于异步计算，可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果。

可以在对象之间传递和操作 Promise,帮助我们处理队列。

Promise 的声明

  new Promise(function(resolve,reject){
      resolve(); // 数据处理完成
      reject(); //数据处理出错
  }).then(function(res){
      // 成功数据 res
  },function(error){
      // 处理错误 error
  });

Promise 是一个代理对象，它和原先要进行的操作并无关系。
Promise 将回调函数改为链式调用解决回调地狱问题。

Promise 的状态

一个 Promise 可能有三种状态:

等待(pending):初始化一个 Promise 对象时。
已完成(fulfilled):操作成功时。
已拒绝(rejected):操作失败时。

一个 Promise 状态只可能从“等待”转到“完成”或“拒绝”，不能逆向转换，同时“完成”和“拒绝”不能相互转换。

当 Promise 状态发生改变，就会触发 then 函数。

then函数接受两个参数，第一个参数是成功时的回调，在 Promise 由“等待“状态转换到”完成“状态时调用;第二个参数是失败时回调，在 Promise 由“等待”状态转换为“拒绝”状态时调用。

then可以接受另加一个 Promise 传入，也接受一个 “类then” 的对象或方法，即 thenable 对象。

同一个 Promise 的 then 可以调用多次，并且回调的执行顺序跟它们被定义的顺序一致。

Promise 常用的函数

Promise.then()

Promise.then() 接受两个函数作为参数，分别代表 fulfilled 状态下的响应函数和 rejected 状态下的响应函数。
Promise.then() 返回一个新的 Promise 实例，所以支持链式调用。
当 Promise 状态发生改变时，Promise.then() 会根据其返回的最终状态，调用相应的响应函数。
Promise.then() 中可以返回一个新的 Promise 或其他值。
如果返回值为新的 Promise 时，那么下一级 Promise.then() 会在新的 Promise 状态改变后执行。
如果返回值为其他值，那么下一级 Promise.then() 会立即执行。

在嵌套 Promise.then()时，由于 Promise.then() 返回的还是一个 Promise，所以下一级的 Promise.then() 会等到里面的 Promise.then() 执行完后再执行。

Promise.catch()

Promise.catch() 是 Promise.then(resolve,reject) 中 reject 的别名，用于指定发生错误的回调函数。用法如下：

    new Promise((resolve,reject)=>{

    }).then(res=>{

    }).catch(error=>{

    });

Promise.catch() 也会返回一个 Promise，并且其状态也为 pending。

reject 的作用等同于抛出一个异常。如果 Promise 状态已经变成 resolved ，再抛出错误是无效的

Promise.finally()

Promise.finally() 是用于指定无论 Promise 最终状态如何，都会执行的操作，是在 ES2018 中引入的。用法如下：

    new Promise((resolve,reject)=>{

    }).then(res=>{

    }).catch(error=>{

    }).finally(()=>{

    });

Promise.finally()方法的回调函数不接受任何参数，因此Promise.finally()方法里面的操作，与Promise的状态无关。

Promise.finally() 本质上是 Promise.then() 的特例，Promise.finally() 方法总是会返回原来的值。

Promise.all()

Promise.all 方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。使用方法如下：

    new Promise.all([p1,p2,p3]);

Promise.all 的参数可以不是数组，但参数必须具有 Iterator 接口，且返回的每个成员都是 Promise 实例。

Promise.all 的状态由传入的参数决定，分为两种情况：

当数组中所有 Promise 状态完成，该 Promise 才算完成，其返回结果为全部值的数组。
当其中任何一个失败，该 Promise 则失败，此时第一个被 reject 的实例的返回值。

Promise.race()

Promise.race 方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。使用方法如下：

    new Promise.race([p1,p2,p3]);

只要参数中的任何一个状态更改，其返回结果则为率先改变的 Promise 实例。

Promise.resolve()

Promise.resolve 方法可以将现有对象转为 Promise 对象，如下：

    const jsPromise = Promise.resolve($.ajax('/whatever.json'));

Promise.resolve 方法的参数分为四种结果：

参数是一个 Promise 实例
Promise.resolve将不做任何修改，原封不懂的返回。
参数是一个 thenable 对象

thenable 对象指的是具有 then 方法的对象，如下：

    const thenable = {
        then: function(resolve,reject){
            resolve();
        }
    };

Promise.resolve 会将这个方法转为 Promise 对象然后立即执行 thenable 对象中的 then 方法。

参数不是具有 then 方法的对象，或根本就不是对象
Promise.resolve 会返回一个新的 Promise 对象的实例，其状态为 fulfilled。
不带有任何参数
Promise.resolve 方法允许调用时不带参数，它回直接返回一个状态为 fulfilled 的 Promise 实例。

Promise.reject()

Promise.reject 也会返回一个 Promise 实例，状态为 rejected。

     const jsPromise = Promise.reject('Error');

Promise.try()

Promise.try就是模拟 try 代码块。