如何实现一个简单的Promise

什么是Promise

Promise是JavaScript中用于处理异步操作的对象，它代表了一个异步操作的最终完成（或失败）及其结果值。

Promise的基本用法

const promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    const success = true;
    if (success) {
      resolve('操作成功');
    } else {
      reject('操作失败');
    }
  }, 1000);
});

promise
  .then(result => {
    console.log(result); // 操作成功
  })
  .catch(error => {
    console.error(error); // 操作失败
  });

Promise的状态

Promise有三种状态：

• pending：初始状态，既不是成功也不是失败
• fulfilled：操作成功完成
• rejected：操作失败

实现一个简单的Promise

下面是一个简化版的Promise实现：

class MyPromise {
  constructor(executor) {
    this.state = 'pending';
    this.value = undefined;
    this.reason = undefined;
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks = [];

    const resolve = (value) => {
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
        this.onFulfilledCallbacks.forEach(fn => fn());
      }
    };

    const reject = (reason) => {
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.reason = reason;
        this.onRejectedCallbacks.forEach(fn => fn());
      }
    };

    try {
      executor(resolve, reject);
    } catch (error) {
      reject(error);
    }
  }

  then(onFulfilled, onRejected) {
    if (this.state === 'fulfilled') {
      onFulfilled(this.value);
    }
    
    if (this.state === 'rejected') {
      onRejected(this.reason);
    }
    
    if (this.state === 'pending') {
      this.onFulfilledCallbacks.push(() => {
        onFulfilled(this.value);
      });
      
      this.onRejectedCallbacks.push(() => {
        onRejected(this.reason);
      });
    }
  }
}

Promise的链式调用

Promise支持链式调用，这是它的重要特性之一：

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('数据获取成功');
    }, 1000);
  });
}

fetchData()
  .then(data => {
    console.log(data);
    return data + '，开始处理数据';
  })
  .then(processedData => {
    console.log(processedData);
    return processedData + '，处理完成';
  })
  .then(finalResult => {
    console.log(finalResult);
  })
  .catch(error => {
    console.error('发生错误:', error);
  });

Promise的静态方法

Promise.all()

等待所有Promise完成，或第一个Promise失败：

const promise1 = Promise.resolve(1);
const promise2 = Promise.resolve(2);
const promise3 = new Promise((resolve) => {
  setTimeout(() => resolve(3), 1000);
});

Promise.all([promise1, promise2, promise3])
  .then(values => {
    console.log(values); // [1, 2, 3]
  });

Promise.race()

返回第一个完成（无论成功或失败）的Promise：

const promise1 = new Promise((resolve) => {
  setTimeout(() => resolve('第一个完成'), 500);
});

const promise2 = new Promise((resolve) => {
  setTimeout(() => resolve('第二个完成'), 1000);
});

Promise.race([promise1, promise2])
  .then(value => {
    console.log(value); // "第一个完成"
  });

错误处理

Promise提供了多种错误处理方式：

// 方式1：使用catch
promise
  .then(result => {
    // 处理成功结果
  })
  .catch(error => {
    // 处理错误
  });

// 方式2：then的第二个参数
promise.then(
  result => {
    // 处理成功结果
  },
  error => {
    // 处理错误
  }
);

// 方式3：finally（无论成功失败都会执行）
promise
  .then(result => {
    // 处理成功结果
  })
  .catch(error => {
    // 处理错误
  })
  .finally(() => {
    // 清理工作
  });

实际应用示例

1. 文件读取

function readFileAsync(filePath) {
  return new Promise((resolve, reject) => {
    // 模拟文件读取
    setTimeout(() => {
      const fileContent = `这是${filePath}的内容`;
      resolve(fileContent);
    }, 500);
  });
}

readFileAsync('example.txt')
  .then(content => {
    console.log('文件内容:', content);
  })
  .catch(error => {
    console.error('读取文件失败:', error);
  });

2. 多个异步操作顺序执行

function step1() {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log('步骤1完成');
      resolve('步骤1结果');
    }, 1000);
  });
}

function step2(data) {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log('步骤2完成，使用数据:', data);
      resolve('步骤2结果');
    }, 1000);
  });
}

function step3(data) {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log('步骤3完成，使用数据:', data);
      resolve('所有步骤完成');
    }, 1000);
  });
}

step1()
  .then(step2)
  .then(step3)
  .then(finalResult => {
    console.log(finalResult);
  });

注意事项

1. 避免Promise嵌套：使用链式调用代替嵌套
2. 总是返回Promise：在then回调中返回新的Promise或值
3. 错误冒泡：错误会沿着Promise链向下传递
4. 状态不可变：Promise的状态一旦改变就不能再改变

总结

Promise是处理JavaScript异步操作的重要工具，它通过链式调用和统一的错误处理机制，使得异步代码更加清晰和易于维护。虽然现代JavaScript中有了async/await语法，但理解Promise的工作原理对于编写高质量的异步代码仍然至关重要。