【JavaScript】Promise详解

Promise 是 JavaScript 中处理异步操作的一种强大机制。它提供了一种更清晰、更可控的方式来处理异步代码,避免了回调地狱(callback hell)和复杂的错误处理。

基本概念

  1. 状态

    • Pending:初始状态,既不是成功也不是失败。
    • Fulfilled:操作成功完成。
    • Rejected:操作失败。
  2. 方法

    • then:处理 fulfilled 状态。
    • catch:处理 rejected 状态。
    • finally:无论成功还是失败都会执行。

创建 Promise

你可以使用 new Promise 构造函数来创建一个 Promise 对象:

javascript 复制代码
const myPromise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    const success = Math.random() > 0.5;
    if (success) {
      resolve('Operation succeeded');
    } else {
      reject(new Error('Operation failed'));
    }
  }, 1000);
});

处理 Promise

你可以使用 .then.catch 方法来处理 Promise 的结果:

javascript 复制代码
myPromise
  .then(result => {
    console.log('Success:', result);
  })
  .catch(error => {
    console.error('Error:', error.message);
  });

链式调用

Promise 支持链式调用,可以依次处理多个异步操作:

javascript 复制代码
myPromise
  .then(result => {
    console.log('First success:', result);
    return 'Second operation';
  })
  .then(secondResult => {
    console.log('Second success:', secondResult);
  })
  .catch(error => {
    console.error('Error:', error.message);
  });

使用 async/await

async/await 是处理 Promise 的语法糖,使异步代码看起来像同步代码:

javascript 复制代码
async function handleMyPromise() {
  try {
    const result = await myPromise;
    console.log('Success:', result);
  } catch (error) {
    console.error('Error:', error.message);
  }
}

handleMyPromise();

常见的 Promise 方法

  • Promise.all:等待所有 Promise 完成。
  • Promise.race:等待第一个 Promise 完成。
  • Promise.resolve:立即解析的 Promise。
  • Promise.reject:立即拒绝的 Promise。

示例

javascript 复制代码
// 使用 Promise.all
const promise1 = Promise.resolve('First');
const promise2 = new Promise(resolve => setTimeout(() => resolve('Second'), 1000));
const promise3 = Promise.reject(new Error('Third'));

Promise.all([promise1, promise2, promise3])
  .then(values => {
    console.log('All promises resolved:', values);
  })
  .catch(error => {
    console.error('One of the promises was rejected:', error.message);
  });

// 使用 Promise.race
Promise.race([promise1, promise2, promise3])
  .then(value => {
    console.log('First resolved promise:', value);
  })
  .catch(error => {
    console.error('First rejected promise:', error.message);
  });
相关推荐
Mintopia23 分钟前
计算机图形学学习指南
前端·javascript·计算机图形学
Mintopia24 分钟前
three.js 中的动画(animation)
前端·javascript·three.js
AI大模型顾潇26 分钟前
[特殊字符] Prompt如何驱动大模型对本地文件实现自主变更:Cline技术深度解析
前端·人工智能·llm·微调·prompt·编程·ai大模型
一颗不甘坠落的流星33 分钟前
【JS】计算任意字符串的像素宽度(px)
javascript·react.js·ecmascript
z_mazin34 分钟前
JavaScript 渲染内容爬取:Puppeteer 入门
开发语言·javascript·ecmascript
小小小小宇37 分钟前
React中 useEffect和useLayoutEffect源码原理
前端
AlexJee39 分钟前
在vue3中使用vue-cropper完成头像裁剪上传图片功能
前端
清晨細雨40 分钟前
uniapp微信小程序:WIFI设备配网之TCP/UDP开发AP配网
前端·物联网·小程序·uni-app
阿廖沙102441 分钟前
Rust核心概念
前端
昭昭日月明42 分钟前
现代前端开发中,类还有不可替代性吗
javascript