【八股】介绍Promise(ES6引入)

Promise 是 JavaScript 中用于异步编程的一种非常重要的对象。它代表了一个异步操作的最终完成(或失败)及其结果值。以下是 Promise 的一些核心特性和应用:

出现--改进异步编程:

  • 早期avaScript 的异步编程主要依赖于回调函数,容易导致"回调地狱"问题,代码难以阅读和维护。
  • Promise(ES6引入) 允许我们以近乎同步的方式编写异步代码,通过链式调用 .then() 和 .catch() 方法,显著提高了代码的可读性和可维护性。

状态和执行器函数

  • Promise 有三种状态:
    • Pending(进行中):异步操作未完成。
    • Fulfilled(已成功):异步操作成功完成,并且结果值就是成功的值。
    • Rejected(已失败):异步操作失败,并且原因已被抛出。
  • 这些状态反映了异步操作的当前状态,并且状态的改变是单向的:从 Pending 到 Resolved 或 Rejected,并且一旦状态改变,就不可再次更改。
  • 用new Promise构造函数,提供执行器函数:
    • resolve 在异步操作成功时调用,并且返回操作的结果。
    • **reject**在异步操作失败时调用,并且返回操作失败的原因。

应用场景

  • 在前端开发中,Promise 被广泛应用于各种场景,如 Axios、fetch API 等网络请求处理,以及文件上传、定时器等异步操作。

链式调用

  • 当存在多个依赖的异步操作时,Promise 允许我们以链式的方式进行异步操作,这样我们可以顺序执行多个异步操作,并且每个操作的结果可以作为下一个操作的输入。

静态方法

  • Promise.all(iterable):等待多个 Promise 实例的完成。
  • Promise.race(iterable):只要有一个实例率先完成,就返回该实例的结果。
  • Promise.resolve(value):将一个成功的值包装成 Promise 对象。
  • Promise.reject(reason):将一个失败的原因包装成 Promise 对象。
  • 注意方法不能滥用,例如,使用 Promise.all 时,如果其中一个 Promise 失败,整个 Promise.all 调用都会失败。这可能导致一些数据加载失败,影响到整个流程的执行。

promise示例代码

javascript 复制代码
//创建Promise对象
const myPromise = new Promise((resolve, resolve) => {
    // 异步操作
    if (/* 操作成功 */) {
        resolve(value); // 正常完成
    } else {
        reject(error); // 失败
    }
});
  
//调用Promise实例的两个方法
  myPromise.then(value => {
    // 处理成功的值
}).catch(error => {
    // 处理错误
});

//链式调用--每个then可以返回一个新的Promise对象,被下一个then()接收
  myPromise
    .then(result => {
        // 第一个异步操作的结果
        return anotherAsyncOperation(result);
    })
    .then(newResult => {
        // 第二个异步操作的结果
        console.log(newResult);
    })
    .catch(error => {
        // 链式调用中任何地方出现的错误都会走到这里
        console.error(error);
    });

欢迎指正!

相关推荐
骑着蜗牛撵大象32728 分钟前
LangChain 工具调用从声明到闭环:给智能体接上真实的手脚
前端
数据掘金39 分钟前
百度统计后台页面数据异常?从手动调用时机开始排查
前端
hunteritself40 分钟前
10 层 4K 实时剪辑,国产工作站进入广电制作核心
大数据·前端·人工智能·深度学习·transformer
踩着两条虫41 分钟前
我在浏览器里“盖”了一个村:Vue + Three.js 大屏开发踩坑记
前端·vue.js·three.js
mbshqqb1 小时前
TypeScript基础教程之同步生成器
前端·javascript·typescript
嘟嘟同学和妮妮同学1 小时前
【升级】一个中国历史可视化站:皇帝时间线梳理、古代思想流派、诗词鉴赏 (2)
前端·html
暗夜行者之光1 小时前
LangGraph + MCP 实战:构建"自然语言查数据"的 ChatBI Agent
前端·后端
一tiao咸鱼1 小时前
还在手动海投?我做了个 AI 求职助手,自动筛选 BOSS 职位再精准投递
前端·后端·面试
尤水就下2 小时前
🔥预热:在线文档的 block 架构是如何实现的(未完待续...)
前端·javascript·架构
全栈项目管理程序猿2 小时前
ArcGIS JS 基础教程(29):CSVLayer 表格点位图层
前端·javascript