Promise 是 JavaScript 中用于处理异步操作的对象。new Promise((resolve, reject) => { ... }) 是创建 Promise 的基本语法。下面详细介绍其使用方法:

基本语法

const myPromise = new Promise((resolve, reject) => {
  // 异步操作代码
  
  if (/* 操作成功 */) {
    resolve(value); // 成功时调用,传递结果值
  } else {
    reject(error);  // 失败时调用,传递错误信息
  }
});

使用方法

1. 创建 Promise

const promise = new Promise((resolve, reject) => {
  // 模拟异步操作
  setTimeout(() => {
    const randomNumber = Math.random();
    if (randomNumber > 0.5) {
      resolve(`成功,数字是: ${randomNumber}`);
    } else {
      reject(`失败,数字太小: ${randomNumber}`);
    }
  }, 1000);
});

2. 使用 Promise

promise
  .then(result => {
    console.log(result); // 成功时执行
  })
  .catch(error => {
    console.error(error); // 失败时执行
  })
  .finally(() => {
    console.log('操作完成'); // 无论成功失败都会执行
  });

实际应用示例

示例1: 加载图片

function loadImage(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = () => reject(new Error(`无法加载图片: ${url}`));
    img.src = url;
  });
}

loadImage('https://example.com/image.jpg')
  .then(img => document.body.appendChild(img))
  .catch(err => console.error(err));

示例2: AJAX 请求

function fetchData(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.response);
      } else {
        reject(new Error(`请求失败: ${xhr.statusText}`));
      }
    };
    xhr.onerror = () => reject(new Error('网络错误'));
    xhr.send();
  });
}

fetchData('https://api.example.com/data')
  .then(data => console.log(data))
  .catch(error => console.error(error));

Promise 链式调用

new Promise((resolve, reject) => {
  setTimeout(() => resolve(1), 1000);
})
.then(result => {
  console.log(result); // 1
  return result * 2;
})
.then(result => {
  console.log(result); // 2
  return result * 3;
})
.then(result => {
  console.log(result); // 6
})
.catch(error => {
  console.error(error);
});

注意事项

  1. Promise 一旦状态改变(从 pending 变为 fulfilled 或 rejected),就不能再改变

  2. 如果不处理 reject(即没有 catch),会导致未捕获的 Promise 错误

  3. resolve 和 reject 只能传递一个参数,多个值需要用对象或数组包装

  4. Promise 构造函数中的代码是同步执行的,只有 then/catch/finally 是异步的

Promise 是现代 JavaScript 异步编程的基础,后续的 async/await 语法也是基于 Promise 实现的。