Js核心知识点 - 关于 promise 详解

已于 2024-03-18 11:20:56 修改
阅读量985 收藏 21
点赞数 30
文章标签： 前端 javascript vue.js
于 2024-03-01 11:44:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_61723274/article/details/136337243
版权

一、为什么需要 promise?

        1、回调地狱（Callback Hell）：在传统的 JavaScript 中，为了处理异步操作，通常会通过回调函数来实现。当多个异步操作依赖于上一个操作的结果时，就会出现多层嵌套的回调，导致代码可读性差、难以维护。

        2、缺乏错误处理机制：在回调函数中，错误处理不够方便和统一。每个回调函数都需要单独处理可能发生的错误，容易出现遗漏或者混乱。

        3、难以实现并行和串行执行：在传统的异步编程模式中，要实现并行执行多个异步操作或者按特定顺序执行异步操作较为复杂。

二、什么是 promise？

1、基本概念

Promises/A+规范网址:   Promises/A+

        Promise 是 JavaScript 中用于处理异步操作的一种解决方案。它是一个对象，代表了一个异步操作的最终完成（或失败）及其结果的表示。Promise 可以让我们更容易地进行异步编程，并避免了回调地狱的情况。

具体来说，Promise 有以下几个重要特点：

  1. 状态（State）：一个 Promise 可以处于三种状态之一：进行中（pending）、已成功（fulfilled）和已失败（rejected）。当一个 Promise 转为 fulfilled 或 rejected 状态时，就称为 settled 状态，此后状态不会再改变。

  2. 值（Value）：在 fulfilled 状态时，Promise 对象会保存一个值，表示异步操作的结果。在 rejected 状态时，会保存一个原因，表示异步操作失败的原因。

  3. then() 方法：Promise 对象提供了 then() 方法，用于指定当异步操作成功（fulfilled）或失败（rejected）时的回调函数。then() 方法接受两个回调函数作为参数，第一个参数用于处理成功的情况，第二个参数用于处理失败的情况。then() 方法返回一个新的 Promise 对象，可以链式调用多个 then() 方法。

  4. catch() 方法：Promise 对象提供了 catch() 方法，用于捕获异步操作中的错误。相当于 then(null, onRejected) 的简便写法。

  5. finally() 方法：Promise 对象提供了 finally() 方法，无论 Promise 最终状态如何，都会执行 finally() 中的回调函数。通常用于清理工作或资源释放等操作。

  6. 静态方法：Promise 还提供了一些静态方法，如 Promise.resolve()、Promise.reject()、Promise.all()、Promise.race() 等，用于快速创建和处理多个 Promise 对象的情况。

        总的来说，Promise 是一种处理异步操作的优雅方式，通过其简洁的 API 和链式调用的特性，使得异步代码更易于理解和维护。在实际开发中，Promise 是非常常用且强大的工具，有助于提高代码的可读性和可维护性。

2、实际应用

// 模拟异步操作函数，返回一个 Promise 对象
function asyncOperation(value, delay) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(`Async operation completed: ${value}`);
      resolve(value);
    }, delay);
  });
}

// 解决回调地狱：使用 Promise 链式调用来依次执行异步操作
asyncOperation(1, 1000)
  .then((result1) => {
    return asyncOperation(result1 + 1, 1500);
  })
  .then((result2) => {
    return asyncOperation(result2 + 1, 2000);
  })
  .then((result3) => {
    console.log('Final result:', result3);
  })
  .catch((error) => {
    console.error('An error occurred:', error);
  });

// 并行执行异步操作：使用 Promise.all() 实现多个异步操作并行执行
Promise.all([
  asyncOperation('A', 1500),
  asyncOperation('B', 1000),
  asyncOperation('C', 2000)
]).then((results) => {
  console.log('All operations completed in parallel:', results);
}).catch((error) => {
  console.error('An error occurred in parallel operations:', error);
});

// 串行执行异步操作：使用 Promise.then() 实现多个异步操作依次执行
asyncOperation('X', 1000)
  .then(() => asyncOperation('Y', 1500))
  .then(() => asyncOperation('Z', 2000))
  .then(() => {
    console.log('Sequential operations completed');
  })
  .catch((error) => {
    console.error('An error occurred in sequential operations:', error);
});

三、手写一个promise以及实际应用

1、手写一个promise

class MyPromise {
  constructor(executor) {
    // 初始状态为 pending
    this.state = 'pending';
    // 存储成功结果和失败原因
    this.value = undefined;
    this.reason = undefined;
    // 存储成功和失败的回调函数
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks = [];

    // resolve 函数用于将 Promise 状态设为 fulfilled，并执行成功回调函数
    const resolve = (value) => {
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
        // 依次执行成功回调函数
        this.onFulfilledCallbacks.forEach((callback) => callback(this.value));
      }
    };

    // reject 函数用于将 Promise 状态设为 rejected，并执行失败回调函数
    const reject = (reason) => {
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.reason = reason;
        // 依次执行失败回调函数
        this.onRejectedCallbacks.forEach((callback) => callback(this.reason));
      }
    };

    try {
      // 执行用户传入的 executor 函数，并传入 resolve 和 reject 函数作为参数
      executor(resolve, reject);
    } catch (error) {
      // 如果在执行过程中抛出异常，则将 Promise 状态设为 rejected
      reject(error);
    }
  }

  then(onFulfilled, onRejected) {
    // 创建一个新的 Promise 对象
    const newPromise = new MyPromise((resolve, reject) => {
      // 用于处理成功状态的回调函数
      const handleFulfilled = (value) => {
        try {
          // 执行用户传入的 onFulfilled 回调函数，并将返回值传递给下一个 Promise
          const result = onFulfilled(value);
          resolve(result);
        } catch (error) {
          // 如果执行过程中抛出异常，则将 Promise 状态设为 rejected
          reject(error);
        }
      };

      // 用于处理失败状态的回调函数
      const handleRejected = (reason) => {
        try {
          // 执行用户传入的 onRejected 回调函数，并将返回值传递给下一个 Promise
          const result = onRejected(reason);
          resolve(result);
        } catch (error) {
          // 如果执行过程中抛出异常，则将 Promise 状态设为 rejected
          reject(error);
        }
      };

      if (this.state === 'pending') {
        // 如果当前 Promise 还处于 pending 状态，则将回调函数存储起来
        this.onFulfilledCallbacks.push(handleFulfilled);
        this.onRejectedCallbacks.push(handleRejected);
      } else if (this.state === 'fulfilled') {
        // 如果当前 Promise 已经处于 fulfilled 状态，则使用 setTimeout 异步执行成功回调函数
        setTimeout(() => {
          handleFulfilled(this.value);
        });
      } else if (this.state === 'rejected') {
        // 如果当前 Promise 已经处于 rejected 状态，则使用 setTimeout 异步执行失败回调函数
        setTimeout(() => {
          handleRejected(this.reason);
        });
      }
    });

    return newPromise;
  }

  catch(onRejected) {
    // catch 方法实际上是 then 方法的一个特殊情况，只传入了失败回调函数
    return this.then(undefined, onRejected);
  }

  static resolve(value) {
    // 静态方法 resolve 创建一个已经被解决的 Promise 对象，并返回它
    return new MyPromise((resolve) => {
      resolve(value);
    });
  }

  static reject(reason) {
    // 静态方法 reject 创建一个已经被拒绝的 Promise 对象，并返回它
    return new MyPromise((resolve, reject) => {
      reject(reason);
    });
  }

  static all(promises) {
    // 静态方法 all 接收一个 Promise 对象数组，并在所有 Promise 对象都变为 fulfilled 状态后返回一个新的 Promise 对象
    return new MyPromise((resolve, reject) => {
      const results = [];
      let fulfilledCount = 0;

      promises.forEach((promise, index) => {
        promise.then((value) => {
          // 将每个 Promise 的结果存储起来
          results[index] = value;
          fulfilledCount++;

          if (fulfilledCount === promises.length) {
            // 如果所有 Promise 都已经完成，则将新的 Promise 对象设为 fulfilled 状态，并将结果返回
            resolve(results);
          }
        }).catch(reject);
      });
    });
  }

  static race(promises) {
    // 静态方法 race 接收一个 Promise 对象数组，并返回其中最先变为 fulfilled 或 rejected 状态的 Promise 对象
    return new MyPromise((resolve, reject) => {
      promises.forEach((promise) => {
        // 只处理第一个完成的 Promise 对象，无论是 fulfilled 还是 rejected
        promise.then(resolve).catch(reject);
      });
    });
  }
}

2、实际应用

// 创建一个新的 Promise 对象并执行异步操作
const myPromise = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    const randomNumber = Math.random();
    if (randomNumber > 0.5) {
      resolve(randomNumber);
    } else {
      reject('Random number is less than 0.5');
    }
  }, 1000);
});

// 使用 then 方法处理 Promise 的成功和失败情况
myPromise.then(
  (value) => {
    console.log('Resolved:', value);
  },
  (reason) => {
    console.error('Rejected:', reason);
  }
);

// 使用 catch 方法捕获 Promise 的失败情况
myPromise.catch((reason) => {
  console.error('Caught:', reason);
});

// 使用 finally 方法在 Promise 执行结束后执行特定的操作
myPromise.finally(() => {
  console.log('Finally block executed');
});

// 使用静态方法 all 来处理多个 Promise 实例并等待它们全部完成
const promises = [promise1, promise2, promise3];
MyPromise.all(promises).then((results) => {
  console.log('All promises resolved:', results);
}).catch((reason) => {
  console.error('One or more promises rejected:', reason);
});

// 使用静态方法 race 来处理多个 Promise 实例，并只处理第一个完成的 Promise
const promises = [promise1, promise2, promise3];
MyPromise.race(promises).then((value) => {
  console.log('First promise resolved:', value);
}).catch((reason) => {
  console.error('First promise rejected:', reason);
});

四、async 和 await

1、定义

        async 函数用于声明一个异步函数，函数内部可以包含异步操作，并且会隐式地返回一个 Promise 对象。

        await 关键字用于暂停当前 async 函数的执行，等待 Promise 对象的状态变为 resolved 后继续执行，并且可以获取 Promise 返回的值。

2、使用场景

        （1）当需要处理异步操作时，例如网络请求、文件读写、定时器等，可以使用 async/await 来简化异步代码的书写。

async function fetchUserData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    if (!response.ok) {
      throw new Error('Failed to fetch user data');
    }
    
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

fetchUserData();

        (2)在处理多个异步操作时，使用 async/await 可以更清晰地表达代码逻辑，避免回调地狱（callback hell）的情况。

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function performMultipleAsyncOperations() {
  try {
    console.log('Starting multiple async operations...');
    
    // 第一个异步操作
    await delay(1000);
    console.log('First async operation completed');
    
    // 第二个异步操作
    await delay(1500);
    console.log('Second async operation completed');
    
    // 第三个异步操作
    await delay(2000);
    console.log('Third async operation completed');
    
    console.log('All async operations completed');
  } catch (error) {
    console.error(error);
  }
}

performMultipleAsyncOperations();

3、与promise之间的关系

        async/await 是基于 Promise 的封装，可以认为 async 函数是 Promise 的一种更高级的语法糖，使异步代码更加易读和易写。

        在 async 函数内部，可以使用 await 关键字来等待一个 Promise 对象的状态变化，相比于使用 then() 方法处理 Promise，async/await 更加直观和简洁。

Hush755
关注
  • 30
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
js代码-ES6 Promise
07-16
以上就是关于 ES6 Promise 的核心知识点，理解并熟练运用 Promise 可以极大地提高 JavaScript 异步编程的效率和可读性。在实际开发中，Promise 结合 async/await 语法，使得异步控制流更加清晰，降低了代码的复杂度...
JS高级 之 Promise 详解
玄鱼殇
08-08 4195
JS高级 之 Promise 详解
js中的promise详解
热门推荐
zyf971020的博客
09-23 6万+
js中的promise详解
前端 JS 经典：Promise 详解
最新发布
weixin_64684095的博客
06-10 2118
在以前我们实现异步是用的回调函数，当一个异步请求需要依赖上一个异步请求返回的结果的时候，就会形成如下这种的调用结构。这种结构看着很杂乱且不易维护，被我们亲切的叫做。为了解决回调地狱的问题，Promise 就诞生了。。
JS中的Promise（秒懂如何使用promise进行异步操作）
百赢出品，必属精品
04-09 7305
JavaScript中的Promise是一种用于处理异步操作的对象，它代表了一个尚未完成但最终会完成或失败的操作，目的是更加优雅地书写复杂的异步任务。Promise 是一种用于处理异步操作的 JavaScript 对象，它提供了一种更清晰、更可靠的方式来管理异步代码。简化异步操作：Promise 可以帮助我们更轻松地处理异步操作，以及在操作完成后执行相应的逻辑。链式调用：通过使用 .then() 方法，我们可以将多个异步操作链接在一起，形成一个链式调用，使代码更加清晰易读。明确的状态变化。
js之promise
我心坚持
03-02 4万+
promise promise是一个对异步操作进行封装并返回其结果的构造函数， promise是浏览器引擎自带的（但不是所有浏览器都支持promise） 当你new 一个promise时，就已经开始执行函数。
js基础之Promise（全面+手写实现）
m0_49159526的博客
04-14 3627
Promise是处理异步操作的优秀方案，可以使代码更加简洁、易读、易维护，避免回调地狱和嵌套过深的问题。掌握Promise可以提高开发效率、减少代码错误和提高代码质量。本文介绍了Promise的概念、用法和手写实现方法，对于前端开发，了解并学会手写实现Promise，会让你的js基础更上一层楼。
JavaScript——Promise
Corn___的博客
09-29 1464
JavaScript——Promise
bagu:前端八股知识点-速记脑图
04-06
【前端八股知识点详解】 在前端开发领域，"八股文"是指一些常见的、基础但重要的知识点，它们是每个前端开发者必备的技能。这个名为"bagu"的资源，可能是为了帮助开发者快速记忆和理解这些关键概念而创建的一个脑图...
以v-model与promise两种方式实现vue弹窗组件
08-27
五、相关知识点 * Vue 组件的生命周期 * Vue 组件的 props 和 $emit * Promise 的使用 * Vue 组件的模板语法 * CSS 实现弹窗组件的样式 六、扩展阅读 * Vue 官方文档：https://cn.vuejs.org/ * Vue 组件生命周期...
js代码-promise.all
07-14
在JavaScript的世界里，Promise.all是异步编程的一个关键工具，尤其在处理多...以上就是关于"js代码-promise.all"的知识点详解。在实际开发中，熟练掌握Promise.all的使用能帮助我们更好地编写异步代码，提升代码质量。
ES6中的Promise代码详解
08-29
在JavaScript的世界里，ES6（ECMAScript 2015）引入了许多新特性，其中Promise是解决异步编程复杂性的一个重要工具。...Promise是现代JavaScript异步编程的基础，对于任何JavaScript开发者来说都是必须掌握的知识点。
javaScript中Promise简单介绍和理解
qq_42446479的博客
01-16 4713
文章，大概描述Promise的一些概念，和相关的方法，（pending、fulfillen、rejected三种状态）.then()、.catch()、.finally()、.all()、.race()方法介绍区别等，以及实例可供查看，以及后面有部分事件循环、宏任务、微任务的相关介绍和例子
JS中的Promise
gghhb12的博客
08-12 1567
Promise是异步编程的一种解决方案，他是一个对象，可以获取异步操作的消息，避免了回调地狱所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。Pending（进行中）Resolved（已完成）Rejected（已拒绝）
JavaScript——promise(一）基础篇
Rice_w的博客
10-07 2544
什么是promise呢？Promise是一个对象，他代表了一个异步操作的最终完成或者失败。本质上Promise是一个函数返回的对象，我们可以在它上面绑定回调函数，这样我们就不需要一开始把回调函数作为参数传入这个函数了实际上Promise与现实生活中的承诺非常相似。在现实生活中呢，我们通常是这样理解Promise的：承诺（保证）某人会做某事或者某事的发生。也就是要给将来多要发生的事一个承诺，但是谁都不能保证这件事一定会能够按照理想状态发生。
JavaScript中Promise详解
whtis666的博客
06-06 3426
Promise
JS基础之promise详解
极客伍六七 的博客
03-20 884
接着我们在新的Promise对象上继续调用then方法，第二个then方法会在第一个then方法返回的Promise对象resolve后执行，打印出World，并返回一个新的Promise对象，该Promise对象在1秒钟后resolve(’!一个 Promise 可以有一个或多个 then 方法，用于处理异步操作完成后的结果。简单来说，Promise的链式调用就是指在一个Promise对象上调用then方法，然后返回一个新的Promise对象，可以继续在其上调用then方法，依次链式调用下去。
JS中promise是什么？
m0_61581223的博客
01-28 5514
Promise是异步编程的一中解决方案，最早是由社区提出的，es6中正式的将其纳入，他是一个对象，可以获取到异步的操作，他相比传统的回调函数，更加的强大和合理，避免了回调地狱。 所谓的Promise，简单的来说就是一个可以存放未来才能结束的任务或者事件。 1. Promise实列有三个状态： - pending （进行中） - resolved （成功） - rejected（失败） 当要处理某个任务的时候，promise的状态是pending，任务完成是状态就变成了resolved，任务失败状
js中的Promise详解
11-30 4320
一 概述 Promise是异步编程的一种解决方案，可以替代传统的解决方案–回调函数和事件。ES6统一了用法，并原生提供了Promise对象。作为对象，Promise有一下两个特点： * （1）对象的状态不受外界影响。 * （2）一旦状态改变了就不会在变，也就是说任何时候Promise都只有一种状态。 二 Promise的状态 Promise有三种状态，分别是：**Pending **（进行中）， ** Resolved (已完成)， Rejected ** (已失败)。Promise从Pending状态开始

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值