Promise Promise 的实现，Promise/A + 规范-FunTeaLearn Online Web Tutorials

Promise是一种用于处理异步操作的技术，让我们可以更优雅和可读性高地处理异步操作。在ES6之前，我们通常通过回调函数来进行异步操作。但是，回调地狱是非常常见的问题。这会让我们的代码难以维护、难以理解。Promise通过链式调用方式，解决了这个问题，让我们的代码变得更加简洁和优雅。在本文中，我们将深入剖析Promises，并介绍Promise的实现以及Promise/A+规范。

Promise的定义

Promise是一个对象，它代表了一个异步操作最终成功或失败，并且会返回一个值或一个抛出异常。Promise具有三种状态，分别为“等待”、“完成”和“拒绝”。当一个Promise对象处于等待状态时，说明这个异步操作正在进行中。当他处于状态“完成”时，说明异步操作成功，而当他处于“拒绝”状态时，说明异步操作失败了。

Promise的实现

Promise的实现可以分为三个步骤，分别是：

定义Promise对象
定义Promise对象的状态
定义Promise的执行函数

具体地实现过程如下：

定义Promise对象

我们可以使用构造函数来定义一个Promise对象：

// www.javascriptcn.com code example
function Promise(executor) {
  this.status = 'pending';
  this.value = undefined;
  this.reason = undefined;
  this.resolveCallbacks = [];
  this.rejectCallbacks = [];
  var self = this;

  function resolve(value) {
    if (self.status === 'pending') {
      self.value = value;
      self.status = 'fulfilled';
      self.resolveCallbacks.forEach(function (resolveCallback) {
        resolveCallback();
      });
    }
  }

  function reject(reason) {
    if (self.status === 'pending') {
      self.reason = reason;
      self.status = 'rejected';
      self.rejectCallbacks.forEach(function (rejectCallback) {
        rejectCallback();
      });
    }
  }

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

在上述代码中，我们定义了一个Promise构造函数，它包含了一些属性和方法用来处理异步操作和Promise对象的状态。

定义Promise对象的状态

Promise具有三种状态，分别为“等待”、“完成”和“拒绝”。我们需要定义一个状态为“等待”的Promise对象，当异步操作完成或者拒绝时，我们需要改变Promise对象的状态。

// www.javascriptcn.com code example
function Promise(executor) {
  this.status = 'pending'; // 初始化状态为pending
  this.value = undefined; // 定义value和reason，分别用来存储异步操作成功或者失败时返回的值
  this.reason = undefined;
  this.resolveCallbacks = []; // 定义resolveCallbacks和rejectCallbacks用来存储异步操作完成或者拒绝时的回调函数
  this.rejectCallbacks = [];

  var self = this;

  function resolve(value) {
    if (self.status === 'pending') {
      self.value = value;
      self.status = 'fulfilled'; // 当异步操作完成时，将Promise对象的状态修改为“完成”状态
      self.resolveCallbacks.forEach(function (resolveCallback) {
        resolveCallback();
      });
    }
  }

  function reject(reason) {
    if (self.status === 'pending') {
      self.reason = reason;
      self.status = 'rejected'; // 当异步操作拒绝时，将Promise对象的状态修改为“拒绝”状态
      self.rejectCallbacks.forEach(function (rejectCallback) {
        rejectCallback();
      });
    }
  }

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

在上述代码中，我们定义了两个函数resolve和reject，他们用来改变Promise对象的状态。

定义Promise的执行函数

我们可以使用一个类似于then的方法来处理异步操作的执行过程。

// www.javascriptcn.com code example
Promise.prototype.then = function (onFulfilled, onRejected) {
  var self = this;
  var promise2;

  onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : function (value) {
    return value;
  };

  onRejected = typeof onRejected === 'function' ? onRejected : function (reason) {
    throw reason;
  };

  if (self.status === 'fulfilled') {
    promise2 = new Promise(function (resolve, reject) {
      setTimeout(function () {
        try {
          var x = onFulfilled(self.value);
          resolvePromise(promise2, x, resolve, reject);
        } catch (e) {
          reject(e);
        }
      }, 0);
    });
  }

  if (self.status === 'rejected') {
    promise2 = new Promise(function (resolve, reject) {
      setTimeout(function () {
        try {
          var x = onRejected(self.reason);
          resolvePromise(promise2, x, resolve, reject);
        } catch (e) {
          reject(e);
        }
      }, 0);
    });
  }

  if (self.status === 'pending') {
    promise2 = new Promise(function (resolve, reject) {
      self.resolveCallbacks.push(function () {
        setTimeout(function () {
          try {
            var x = onFulfilled(self.value);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      });

      self.rejectCallbacks.push(function () {
        setTimeout(function () {
          try {
            var x = onRejected(self.reason);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      });
    });
  }

  return promise2;
};

在上述代码中，我们使用了setTimeout来处理异步操作的执行结果。

Promise/A+规范

Promise/A+规范是一种Promise的标准规范。它定义了Promises的行为和实现方式，使得我们可以在不同的实现上进行互操作。Promise/A+规范包含以下几个约定：

Promise具有then方法
Promise的状态一旦改变，就不会再次改变
then方法始终返回一个Promise对象
如果then方法中返回的是Promise对象，将会展开这个Promise对象，直到最终返回一个非Promise对象。

Promise/A+规范帮助我们在代码实现中遵循一些规范，从而使得我们的Promise代码具有更好的可移植性和互操作性。

结束语

Promise是一种非常有用的技术。在本文中，我们深入阐述了Promise的实现和Promise/A+规范。通过学习这些内容，我们可以更好地理解Promise，并且可以在我们的代码中使用Promise来处理异步操作，从而使得我们的代码更加优雅和可维护。下面是一些Promise的示例代码：

// www.javascriptcn.com code example
function getLocation() {
  return new Promise(function(resolve, reject) { 
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position){
        resolve(position);
      }, function(err){
        reject(err);
      });
    } else {
      reject('Geolocation is not supported by this browser.')
    }
  });
}

getLocation().then(function(position) {
  console.log('Latitude: ' + position.coords.latitude);
  console.log('Longitude: ' + position.coords.longitude);
}).catch(function(err) {
  console.log("Unable to get location: " + err);
});

在上述代码中，我们使用Promise来处理异步操作。getLocation函数返回一个Promise对象，我们可以使用then方法来访问异步操作成功时的值并使用catch方法来捕捉异步操作的失败情况。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67ca7fe9e46428fe9e2babd2

Promise Promise 的实现，Promise/A + 规范