ES6:promise基本使用讲解

一、Promis简介

1.是什么

Promise 是异步编程的一种解决方案。在ES6中,promise对象是一个构造函数,用来生成promise实例。

2.为什么需要promise

在出现promise之前,JS没有一个统一的、标准的异步编程模式,各种库和框架各自采用不同的模式进行异步操作,十分混乱。

常见的异步操作方式例如回调函数,会随着异步操作的复杂度变高而出现"回调地狱",指的是过度使用嵌套回调函数来处理异步操作导致代码的可读性、维护性差。例如

javascript 复制代码
asyncFunction1(function(result1) {
    asyncFunction2(result1, function(result2) {
        asyncFunction3(result2, function(result3) {
            // 更多嵌套的回调函数...
        });
    });
});

3.promise的三种状态

pending (理解成准备中/进行中/未完成都行)、fulfilled (已成功)和rejected(已失败)

promise只能从pending=>fulfilled或者是pending=>rejected,状态一但改变就不可逆转

4.基本使用

Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject。它们是两个函数,由 JavaScript 引擎提供,不用自己部署。下面是一个基于promise的请求:

javascript 复制代码
    <script>
      // 创建一个基于Promise的异步请求函数
      function makeAsyncRequest(url) {
        // 返回一个Promise对象
        return new Promise((resolve, reject) => {
          // 使用fetch发送请求
          fetch(url)
            .then((response) => {
              // 检查响应状态码
              if (!response.ok) {
                // 如果状态码不是200-299之间,则抛出错误
                throw new Error("错误");
              }
              // 否则解析响应体
              return response.json();
            })
            .then((data) => {
              // 请求成功,解析出数据后,通过resolve返回数据
              resolve(data);
            })
            .catch((error) => {
              // 请求失败或处理响应出错时,通过reject返回错误
              reject(error);
            });
        });
      }

      // 使用异步请求函数
      makeAsyncRequest("https://demo.com/data")
        .then((data) => {
          // 请求成功,处理返回的数据
          console.log("成功:", data);
        })
        .catch((error) => {
          // 请求失败,处理错误
          console.error("失败:", error);
        });
    </script>

resolve函数:将Promise对象的状态从"未完成"变为"成功"(即从 pending 变为 resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去

reject函数:将Promise对象的状态从"未完成"变为"失败"(即从 pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。

then方法:可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用,第二个回调函数是Promise对象的状态变为rejected时调用。这两个函数都是可选的,不一定要提供。它们都接受Promise对象传出的值作为参数。

二、promise的方法

1.promise.then()

.then()方法用于指定Promise在fulfilled(已成功)状态下的回调函数,它可以链接多个.then()来形成执行链。如果Promise被reject,后续的.catch()或者.then()中的错误处理函数会被调用。

javascript 复制代码
<script>
promise.then((result) => {
  // 当前Promise成功后的处理逻辑
}, (error) => {
  // 或者直接链式写法处理错误情况(现在推荐分开使用catch处理错误)
});

// ES6建议的写法,将成功的处理和错误的处理分离
promise.then((result) => {
  // 成功处理
}).catch((error) => {
  // 失败处理
});
</script>

2.promise.catch()

.catch()方法用来处理Promise在rejected状态时的回调函数,它是.then(null, rejectionHandler)的简写形式,专门用于捕获前面链中任何.then()的错误。

javascript 复制代码
promise.catch((error) => {
  // 处理Promise的rejected状态,即异常或错误情况
});

3.promise.finally()

promise.finally()方法无论Promise最后的状态如何,都会执行提供的回调函数,常用于资源清理或UI恢复等场景。

javascript 复制代码
promise.finally(() => {
  // 不管Promise最终是fulfilled还是rejected都会执行的代码
});

4.promise.resolve() 和 promise.reject()

这两个方法实际上是全局静态方法,而非实例方法:

创建并返回一个已经resolved的Promise,通常用于将非Promise值转换为Promise,或者快速返回一个成功的Promise。

javascript 复制代码
Promise.resolve(reason);

创建并返回一个已经被rejected的Promise,用于快速抛出错误。

javascript 复制代码
Promise.reject(reason);

5.promise.all()

.all()方法接收一个Promise数组作为参数,当所有Promise都fulfilled时,返回的新的Promise才会fulfilled,并带有所有Promise的结果组成的数组。只要其中一个Promise rejected,则返回的Promise立即rejected。

javascript 复制代码
Promise.all(promisesArray).then(values => {
  // 所有Promise都fulfilled时执行
}).catch(error => {
  // 只要有一个Promise rejected就执行
});

6.promise.race()

.race()方法同样接收Promise数组,当其中任意一个Promise fulfilled或rejected时,返回的新Promise就会采用相同的状态,并返回那个率先改变状态的Promise的结果或错误原因。

javascript 复制代码
Promise.race(promisesArray).then(value => {
  // 只要有一个Promise fulfilled就执行
}).catch(error => {
  // 第一个rejected的Promise的错误原因
});

7.promise.allSettled()

.allSettled()方法接收一个Promise数组,当所有Promise都settled(即完成,无论是fulfilled还是rejected)时,返回的新的Promise会fulfilled,并带有所有Promise的结果对象组成的数组,每个结果对象包含status("fulfilled"或"rejected")和value(如果是fulfilled时的结果值)或reason(如果是rejected时的错误原因)属性。

javascript 复制代码
Promise.allSettled(promisesArray).then(results => {
  // 所有Promise都settled(无论是fulfilled还是rejected)时执行
});

8.promise.any()(ES2021引入)

.any()方法也是接收一个Promise数组,只要其中任何一个Promise fulfilled,返回的Promise就会以该Promise的结果fulfilled;但如果所有Promise都rejected,则返回的Promise将以AggregateError rejected(AggregateError是一种内置错误类型,它表示一组错误的集合,通常用于一次性报告多个错误的情况)。

javascript 复制代码
Promise.any(promisesArray).then(value => {
  // 只要有一个Promise fulfilled就执行
}).catch(error => {
  // 如果所有Promise都rejected,则返回AggregateError
});
相关推荐
dy171712 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
2501_9159184116 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂16 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技16 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip17 小时前
JavaScript二叉树相关概念
前端
一朵梨花压海棠go17 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
attitude.x17 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java17 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)18 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5