Promise

介绍

Promise 是 JavaScript 中用于处理异步操作的一种机制， 它提供了一种更加优雅和可靠的方式来处理异步代码， 避免了传统的回调地狱（callback hell）问题。
Promise 对象可以有三种状态：

  • pending（进行中）
  • fulfilled（已成功）
  • rejected（已失败）

并且状态只能从 pending 转变为 fulfilled 或 rejected，转变后不可逆。

特点和优势

  1. 状态管理：
    • Promise 对象可以处于三种状态之一：pending、fulfilled 或 rejected。
    • 状态一旦改变，就不会再改变。已经 fulfilled 或 rejected 的 Promise 对象称为 settled（已定型）。
  2. 链式调用：
    • Promise 对象的 .then() 方法可以链式调用，依次处理异步操作的成功（fulfilled）和失败（rejected）情况，使代码更加清晰和易于理解。
    • .then() 方法返回一个新的 Promise 对象，因此可以方便地进行连续的异步操作。
  3. 错误处理：
    • 使用 .catch() 方法可以捕获链式调用中任何步骤的错误，类似于传统 try-catch 的功能，但更适用于异步操作。
    • 可以在 Promise 链的末尾添加一个 .catch() 处理未捕获的错误。
  4. 并行执行：
    • Promise.all() 方法接受一个包含多个 Promise 的可迭代对象，并在所有 Promise 都成功解决后才解决自身，提供了并行执行异步操作的能力。
  5. 竞态条件：
    • Promise.race() 方法接受一个包含多个 Promise 的可迭代对象，并返回第一个解决的 Promise 的值或拒绝的原因，可以用于处理竞态条件（race condition）。

示例用法

  1. 基本用法
    const promise = new Promise((resolve, reject) => {
    // 异步操作
    setTimeout(() => {
        const success = true;
        if (success) {
            resolve('Operation succeeded');
        } else {
            reject(new Error('Operation failed'));
        }
    }, 1000);
});

promise.then(
    result => {
        console.log('Promise resolved with:', result);
    },
    error => {
        console.error('Promise rejected with:', error);
    }
);
  2. Promise 链
    function fetchData(url) {
    return fetch(url)
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        });
}

fetchData('https://jsonplaceholder.typicode.com/posts/1')
    .then(data => {
        console.log('Data fetched successfully:', data);
        return data.id;
    })
    .then(id => {
        console.log('Fetched post ID:', id);
    })
    .catch(error => {
        console.error('Error fetching data:', error);
    });
  3. Promise.all()
    const promise1 = fetchData('https://jsonplaceholder.typicode.com/posts/1');
const promise2 = fetchData('https://jsonplaceholder.typicode.com/posts/2');

Promise.all([promise1, promise2])
    .then(values => {
        console.log('All promises resolved with:', values);
    })
    .catch(error => {
        console.error('Error fetching data:', error);
    });
  4. Promise.race()
const promise1 = new Promise(resolve => setTimeout(resolve, 500, 'one'));
const promise2 = new Promise(resolve => setTimeout(resolve, 100, 'two'));

Promise.race([promise1, promise2])
    .then(value => {
        console.log('First promise to resolve:', value); // 输出 'two'
    });

注意事项

  • Promise 是一种非常强大的异步编程工具，但过度使用可能导致 Promise 链条过长和复杂，建议根据具体情况进行合理使用。
  • 在使用 Promise 时，要确保正确处理错误（使用 .catch() 或在每个 .then() 中捕获错误），否则可能导致未捕获的异常。
  • 如果需要同时处理多个异步操作的结果，可以考虑使用 Promise.all()；如果需要快速响应第一个完成的异步操作，可以使用 Promise.race()。

总体而言，Promise 提供了一种优雅和可靠的方式来处理异步操作，尤其适用于复杂的异步场景和异步操作的组合。

Last Updated:
Contributors: BaronYan