deferred实现原理 js

实现原理

Deferred 在 JavaScript 中是一种用于管理异步操作的模式，通常与 Promise 类似，但提供更灵活的控制。核心思想是通过对象封装异步操作的状态（pending、resolved、rejected），并允许通过回调函数处理结果或错误。

核心机制

1. 状态管理
   Deferred 对象内部维护三种状态：

   • pending：初始状态，表示操作未完成。
   • resolved：操作成功完成，触发成功回调。
   • rejected：操作失败，触发失败回调。

2. 回调注册
   通过 then、done、fail 等方法注册回调函数，这些函数会在状态改变时被调用。例如：

   deferred.then(successCallback, errorCallback);

3. 状态触发
   通过 resolve 和 reject 方法手动改变状态，并传递结果或错误信息：

   

   deferred.resolve(data); // 触发成功回调
   deferred.reject(error); // 触发失败回调

简单实现示例

以下是一个基础的 Deferred 实现：

function Deferred() {
  let status = 'pending';
  let callbacks = { success: [], fail: [] };
  let result;

  this.then = function(onSuccess, onFail) {
    if (status === 'resolved') onSuccess(result);
    else if (status === 'rejected') onFail(result);
    else {
      if (onSuccess) callbacks.success.push(onSuccess);
      if (onFail) callbacks.fail.push(onFail);
    }
    return this;
  };

  this.resolve = function(data) {
    if (status !== 'pending') return;
    status = 'resolved';
    result = data;
    callbacks.success.forEach(fn => fn(data));
  };

  this.reject = function(error) {
    if (status !== 'pending') return;
    status = 'rejected';
    result = error;
    callbacks.fail.forEach(fn => fn(error));
  };
}

使用场景

1. 封装异步操作
   例如 AJAX 请求：

   

   const deferred = new Deferred();
   fetch(url).then(
     response => deferred.resolve(response),
     error => deferred.reject(error)
   );
   return deferred;

2. 链式调用
   Deferred 的 then 方法支持链式调用，类似 Promise：

   deferred
     .then(handleSuccess)
     .then(handleNextStep);

与 Promise 的区别

1. 控制权
   Deferred 允许外部手动调用 resolve/reject，而 Promise 的状态由执行器函数内部控制。

2. 兼容性
   Deferred 是早期库（如 jQuery）的实现，现代 JavaScript 更推荐原生 Promise 或 async/await。