ES6Promise的简易实现与应用

自从ES6引入Promise后，它已成为解决Javascript中异步编程问题的关键工具，有效避免了回调地狱现象。使用Promise，开发者可以通过链式调用来构建代码，使逻辑更为直观和简洁。

对于不支持Promise的老版本浏览器，可以通过引入第三方库来实现兼容性。实际上，实现一个基础的Promise并不复杂，只需要少量的代码即可达到类似的功能。

以下是一个简单的Promise实现示例：

// 简单实现Promise的函数
function SimplePromise(fn, _status_code) {
    this._status_code = _status_code || 'status';
    this.run = function () {
        this._result = fn.call(this);
        if (this._result) {
            return this.callback();
        }
    };
    this.callback = function (_result) {
        if (_result) {
            this._result = _result;
        }
        this._result = this._result || {};
        this._status = this._result[this._status_code] || 'fail';
        this._callback = this[this._status] || this._default || function () { throw new Error(`Undefined ${this._status}`); };
        return this._callback.call(this);
    };
    this.then = function (_status, callback) {
        if (typeof _status === 'function') {
            callback = _status;
            if (!('success' in this)) {
                _status = 'success';
            } else if (!('fail' in this)) {
                _status = 'fail';
            } else {
                _status = '_default';
            }
        }
        this[_status] = callback;
        return this;
    };
    return this;
}

上述代码展示了如何创建一个简单的Promise类。为了便于测试，我们进一步封装了一个测试函数：

function testPromise(fn, _status_code, _default) {
    if (typeof _status_code === 'function') {
        _default = _status_code;
        _status_code = undefined;
    }
    const pTest = new SimplePromise(fn, _status_code);
    pTest.then(function () {
        console.log('Success!');
        console.log(this._result);
    });
    pTest.then(function () {
        console.log('Fail!');
        console.log(this._result);
    });
    if (typeof _default === 'function') {
        pTest.then(_default);
    }
    return pTest;
}

接下来，我们将通过几个例子来测试这个简单的Promise实现：

• 成功状态：

  testPromise(() => ({ status: 'success' })).run();
  // 输出：
  // Success!
  // { status: 'success' }

• 失败状态：

  testPromise(() => ({ status: 'fail' })).run();
  // 输出：
  // Fail!
  // { status: 'fail' }

• 未定义状态，抛出错误：

  testPromise(() => ({ status: 'other' })).run();
  // 抛出错误：Uncaught Error: Undefined other

• 修改状态参数，成功状态：

  testPromise(() => ({ status: 'other', code: 'success' }), 'code').run();
  // 输出：
  // Success!
  // { status: 'other', code: 'success' }

• 添加默认回调函数：

  testPromise(() => ({ status: 'other' }), function () {
      console.log('Other');
  }).run();
  // 输出：
  // Other

• 自定义状态值：

  testPromise(() => ({ status: 'nicai' }))
      .then('wocai', () => console.log('Wocai'))
      .then('nicai', () => console.log('Nicai'))
      .run();
  // 输出：
  // Nicai

• 同步调用有返回值：

  const result = testPromise(() => ({ status: 'nicai', value: 'abc' }))
      .then('nicai', function () {
          console.log('Nicai');
          return this._result.value;
      })
      .run();
  console.log(result === 'abc'); // true

• 异步调用测试 - setTimeout：

  testPromise(function () {
      setTimeout(() => {
          this.callback({ status: 'success' });
      }, 1000);
  }).run();
  // 1秒后输出：
  // Success!
  // { status: 'success' }

• 异步调用测试 - Ajax：

  testPromise(function () {
      $.ajax({
          type: 'POST',
          url: '/services/PinYin',
          data: { input: '测试' },
          success: (result) => this.callback({ status: 'success', result }),
          error: () => this.callback()
      });
  }).run();
  // 成功时输出：
  // Success!
  // { status: 'success', result: 'Ceshi' }
  // 失败时输出：
  // Fail!
  // {}

• 异步调用测试 - 使用this访问jQuery的Ajax对象：

  testPromise(function () {
      const self = this;
      $.ajax({
          type: 'POST',
          url: '/services/PinYin',
          data: { input: '测试' },
          success: (result) => self.callback({ status: 'success', result }),
          error: () => self.callback()
      });
  }).run();