Восьмой день изготовления колес каждый день - Обещание - Пользовательский вклад

Отправьте сообщение из сети сегодняЭто должна быть красивая мисс Ченг Юань. Всем👏👏👏👏👏👏👏

Добро пожаловать в пиар

Пожалуйста, обратитесь к следующей статье для метода:

Как участвовать в проектах с открытым исходным кодом - как подать PR на Vue3.0nuggets.capable/post/684490…

программа по сборке колес

Планы меняются каждый день

Рамка
Основы JS
- Compose
- Promise
- Promise.all/race
- маршрутизация
- new
- call/apply/bind
- Object.create
- глубокая копия, мелкая копия
Алгоритмы, шаблоны проектирования
- бинарный поиск
- Быстрый ряд
- бинарный поиск
- Пузырьковая сортировка
- сортировка выбором
- Подпишитесь, чтобы опубликовать
- Алгоритм Фибоначчи
- дедупликация

Promise

Промисы — это решение для асинхронного программирования: синтаксически промис — это объект, из которого можно получить асинхронную операцию.
сообщение; в своем первоначальном смысле это обещание, что оно даст вам результат с течением времени. обещание имеет три состояния: ожидание
(состояние ожидания), выполнено (состояние успеха), отклонено (состояние отказа); как только состояние изменится, оно изменится снова. Создавайте обещания
После того, как экземпляр будет выполнен, он будет выполнен немедленно. Promise в основном используется для решения обратного вызова ада; Promise поддерживает несколько одновременных запросов и получает одновременные запросы.
запрошенные данные.

нужно

Вызов обещания возвращает объект обещания

Базовая функция Promise возвращает успешный тестовый пример

it('基本功能Promise返回成功测试', (done) => {
  const promise = new BasePromise((resolve, reject) => {
    setTimeout(() => {
      resolve('success');
    }, 50);
  })

  promise.then(data => {    
    expect(data).toBe('success');
    done();
  })
})

Базовая функция Promise возвращает неудачный тестовый пример

it('基本功能Promise返回失败测试', (done) => {
  const promise = new BasePromise((resolve, reject) => {
    setTimeout(() => {
      reject('fail');
    }, 50);
  })

  promise.then(data => {    
    console.log('resolve data: ', data)
  }, error => {
    expect(error).toBe('fail');
    done();
  })
})

Полная версия Promise успешно возвращается к тестовому набору

it('完整版Promise成功返回测试', (done) => {
  const promise = new FullPromise((resolve, reject) => {
    resolve('success');
  });

  promise.then().then().then(data => {
    expect(data).toBe('success');
    done();
  })
})

Полная версия Promise дает сбой и возвращается к тестовому сценарию

it('完整版Promise失败返回测试', (done) => {
  const promise = new FullPromise((resolve, reject) => {
    reject('fail');
  });

  promise.then().then().then(data => {
    console.log('resolve data: ', data);
  }, err => {
    expect(err).toBe('fail');
    done();
  })
})

Реализация функции

Основные обещания

инструкции

Во-первых, когда мы вызываем Promise, мы возвращаем объект Promise.
При построении объекта Promise вам необходимо передать функцию-исполнитель, а основные бизнес-процессы Promise выполняются в функции-исполнителе.
Если выполнение дела, запущенного в функции excutor, будет успешным, будет вызвана функция разрешения; если выполнение завершится ошибкой, будет вызвана функция отклонения.
Состояние обещания необратимо, а функция разрешения и функция отклонения вызывается одновременно, и результат первого вызова будет принят по умолчанию.

Согласно некоторым основным методам использования Promise в сочетании со спецификацией Promise/A+, мы можем проанализировать основные характеристики Promise:

Обещание имеет три состояния: ожидание, выполнено и отклонено.
При создании нового промиса вам нужно передать исполнителю executor(), и исполнитель немедленно выполнится.
executor принимает два параметра: разрешение и отклонение.
Состояние обещания по умолчанию — ожидание.
обещание успешно сохранило значение состояния значения, может быть неопределенным/затемаемым/обещанием.
Обещание имеет значение причины, которое содержит ошибочное состояние.
Обещание может переходить только из состояния ожидания в отклонение или из состояния ожидания в состояние выполнено, но после подтверждения оно не изменится.
Обещание должно иметь метод then, а затем получает два параметра: обратный вызов onFulfilled для успешного выполнения обещания и обратный вызов onRejected для невыполнения обещания.
Если обещание успешно выполнено при вызове, то выполняется onFulfilled, и параметр является значением обещания.
Если обещание не удалось выполнить при вызове, то выполняется onRejected, и параметр является причиной обещания.
Если возникает исключение, то оно передается в качестве параметра неудачному обратному вызову onRejected следующего then.

Исходный код:

// promise 的状态值
const PENDING = 'PENDING',
      FULFILLED = 'FULFILLED',
      REJECTED = 'REJECTED';

/*
* 基础版Promise，提供最基础的功能
*/
class BasePromise {
  constructor( executor ) {
    this.status = PENDING;              // 默认状态为PENDING
    this.value = undefined;             // 保存成功状态的值，默认为undefined
    this.reason = undefined;            // 保存失败状态的值
    this.onResolvedCallbacks = [];      // 保存成功的回调
    this.onRejectedCallbacks = [];      // 保存失败的回调

    // 成功时调用的方法
    const resolve = ( value ) => {
      // 状态为PENDING时才可以更新状态，防止executor中调用两次resolve/reject方法
      if ( this.status === PENDING ) {
        this.status = FULFILLED;
        this.value = value;

        // 依次执行对应的函数
        this.onResolvedCallbacks.forEach(fn => fn());
      }
    }

    // 失败时调用的方法
    const reject = ( reason ) => {
      // 状态为PENDING时才可以更新状态，防止executor中调用两次resolve/reject方法
      if ( this.status === PENDING ) {
        this.status = REJECTED;
        this.reason = reason;

        this.onRejectedCallbacks.forEach(fn => fn());
      }
    }

    try {
      // 立即执行, 将resolve和reject函数传给使用者
      executor( resolve, reject);
    }
    catch ( error ) {
      // 发生异常是执行逻辑
      reject( error )
    }
  }

  // 包含一个then方法,并接收两个参数onFulfilled, onRejected
  then( onFulfilled, onRejected ) {
    if ( this.status === FULFILLED ) {
      onFulfilled(this.value);
    }
    else if ( this.status === REJECTED ){
      onRejected(this.reason);
    }
    else if ( this.status === PENDING ) {
      // 如果promise的状态是PENDING，需要将onFulfilled和onRejected函数存放起来，等待状态确定后，再依次执行对应的函数
      this.onResolvedCallbacks.push(() => { onFulfilled(this.value); });
      this.onRejectedCallbacks.push(() => { onRejected(this.reason); });
    }
  }
}

Полная версия Promsie унаследует базовую версию класса Promise.

Обеспечьте функции цепного вызова и проникновения значения: цепной вызов, когда мы используем Promise, когда значение возвращается в функции then, независимо от того, какое значение, мы можем вызвать его в следующем
Получено в then, это связанный вызов then; функция проникновения значения, когда мы не помещаем в then параметры, такие как: promise.then().then(), затем следующее then
Значение, возвращенное к тому времени, все еще может быть получено, что является так называемым проникновением значения.
Принцип реализации: если мы воссоздаем объект промиса каждый раз, когда вызываем then, и передаем результат возврата предыдущего then на сторону then нового промиса
метод, так что вы можете продолжать идти.

исходный код

function resolvePromise( promise2, x, resolve, reject ) {
  // 如果自己等待自己完成则是错误的实现，用一个类型错误，结束掉promise
  if ( promise2 === x ) {
    return reject( new TypeError('Chaining cycle detected for promise #<Promise>') );
  }

  let called;                              // 是否已调用，只调用一次

  if ( (typeof x === 'object' && x !== null) || typeof x === 'function' ) {
    try {
      // 为了判断resolve过就不再reject了(如reject与resolve同时调用的时候)
      let then = x.then;
      if ( typeof then === 'function') {
        // 不要写成x.then，直接then.call就可以了, 因为x.then会再次取值。
        then.call(x, y => {
          // 如果执行过，则不再执行
          if ( called ) { return; }

          called = true;
          // 递归解析(因为可能promise中还有promise)
          resolvePromise(promise2, y, resolve, reject);
        }, r => {
          // 只要失败就reject
          if ( called ) { return; }
          called = true;
          reject(r)
        })
      }
      else {
        // 如果x.then是一个普通值就直接返回resolve作为结果
        resolve(x);
      }
    }
    catch ( error ) {
      if ( called ) { return; }

      called = true;
      reject( error );
    }
  }
  else {
    // 如果x.then是一个普通值就直接返回resolve作为结果
    resolve(x);
  }
}

/*
* Promise完整版类
*/
class FullPromise extends BasePromise {
  constructor( executor ) {
    super( executor )
  }

  // 重写基类的方法
  then( onFulfilled, onRejected ) {
    // 解决onFulfilled, onRejected没有传值的问题
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : v => v;
    // 因为错误的值要让后面访问到，所以这里也要跑出个错误，不然会在之后then的resolve中捕获
    onRejected = typeof onRejected === 'function' ? onRejected : error => { throw error; };
    // 每次调用then都返回一个新的promise
    const promise2 = new Promise((resolve, reject) => {
      if ( this.status === FULFILLED ) {
        setTimeout(() => {
          try {
            const x = onFulfilled( this.value );
            // x可能是一个promise
            console.log('fulfilled', promise2);
            resolvePromise(promise2, x, resolve, reject);
          }
          catch ( error ) {
            reject( error );
          }
        }, 0)
      }

      if ( this.status === REJECTED ) {
        setTimeout(() => {
          try {
            const x = onRejected( this.reason );
            resolvePromise(promise2, x, resolve, reject);
          }
          catch ( error ) {
            reject( error )
          }
        }, 0)
      }

      if ( this.status === PENDING ) {
        this.onResolvedCallbacks.push(() => { 
          try {
            const x = onFulfilled( this.value );
            resolvePromise( promise2, x, resolve, reject );
          }
          catch ( error ) {
            reject( error );
          }
        });

        this.onRejectedCallbacks.push(() => { 
          try {
            const x = onRejected( this.reason );
            resolvePromise( promise2, x, resolve, reject );
          }
          catch ( error ) {
            reject( error );
          } 
        });
      }

    })

    return promise2;
  }
}

тестовое задание

ОК задача выполнена

Приветствую всех, чтобы представить PR

★ ★ ★ ★ Адрес источника★ ★ ★ ★