Js를 사용하여 Promise 라이브러리 구현

이번에는 JS를 사용하여 Promise 라이브러리를 구현하는 방법을 소개하겠습니다. JS를 사용하여 Promise 라이브러리를 구현하는 경우에는 어떤 주의 사항이 있나요?

머리말

ECMAScript는 JavaScript 언어의 국제 표준이며 JavaScript는 ECMAScript의 구현입니다. ES6의 목표는 JavaScript 언어를 사용하여 크고 복잡한 애플리케이션을 작성하고 엔터프라이즈 수준의 개발 언어가 되도록 하는 것입니다.

Concept

ES6은 기본적으로 Promise 개체를 제공합니다.

Promise라고 불리는 것은 비동기 작업을 위해 메시지를 전달하는 데 사용되는 개체입니다. 이는 미래까지 결과가 알려지지 않은 이벤트(일반적으로 비동기 작업)를 나타내며 이 이벤트는 추가 처리를 위한 통합 API를 제공합니다.

생각해볼 세 가지 질문

처음 프론트엔드 작성을 시작했을 때 비동기 요청을 처리하기 위해 콜백을 자주 사용했는데 간편하고 편리했습니다. 나중에 글을 쓰면서 콜백을 포기하고 비동기 문제를 처리하기 위해 Promise를 사용하기 시작했습니다. Promise는 작성하기가 더 아름답지만 내부 구조에 대한 깊은 이해가 부족하여 복잡한 상황에 직면할 때마다 Promise를 사용하는 것이 항상 쉽지 않고 디버깅에 오랜 시간이 걸립니다.

그래서 이 글에서는 처음부터 시작하여 기본적으로 사용 가능한 약속을 손으로 쓰는 방법을 안내해 드리겠습니다. 제가 적어 놓고 나면 Promise가 무엇인지, 내부 구조가 무엇인지 명확하게 이해하게 될 것이며, 앞으로 복잡한 시나리오에서 Promise를 사용할 수 있을 것입니다.

그리고 모두가 Promise를 완전히 마스터했는지 테스트하기 위해 기사 마지막에 Promise와 관련된 몇 가지 연습 문제를 제공하겠습니다. 연습이라고는 하지만 실제로는 프로젝트에서 접하게 될 실제 시나리오를 추상화한 것입니다. 이를 능숙하게 익히면 프런트 엔드 기술을 향상시키는 데 도움이 될 수 있습니다.

세 가지 연습 문제가 미리 나와 있으니 아래 내용은 무시하고 어떻게 풀어나갈지 머릿속으로 대략 상상해 보세요.

• Chain call of promise array?

• Promise로 동시성을 제어하는 ​​방법은 무엇인가요?

• Promise를 사용하여 비동기 캐싱을 수행하는 방법은 무엇입니까?

위의 세 가지 사고 질문은 실제로 Promise 사용 여부와 거의 관련이 없지만 Promise를 깊이 이해하지 못하면 이 세 가지 문제를 해결하기가 실제로 쉽지 않습니다.

Promise란 무엇입니까?

본문으로 돌아가서 Promise란 무엇입니까? 직설적으로 말하면 Promise는 미래에 종료될 이벤트(보통 비동기 작업)의 결과를 저장하는 컨테이너입니다.

먼저 ES6에서는 Promise 객체가 Promise 인스턴스를 생성하는 데 사용되는 생성자라고 규정합니다. 그런 다음 이 생성자는 함수(실행자)를 매개 변수로 받아들이고 함수의 두 매개 변수는 확인 및 거부입니다. 마지막으로 Promise 인스턴스가 생성된 후 then 메서드를 사용하여 해결된 상태와 거부된 상태에 대한 콜백 함수(onFulfilled 및 onRejected)를 각각 지정할 수 있습니다.

구체적인 사용 방법은 다음과 같은 코드로 표현됩니다:

const promise = new Promise(function(resolve, reject) {
 // ... some code
 if (/* 异步操作成功 */){
 resolve(value);
 } else {
 reject(error);
 }
});
promise.then(function(value) {
 // success
}, function(error) {
 // failure
});

이를 이해한 후에는 CutePromise

이름을 지정하여 Promise를 구성할 수 있습니다. ES6 클래스를 직접 사용하여 CutePromise를 생성하세요. ES6 구문에 익숙하지 않다면 돌아오기 전에 ES6 핵심 구문을 소개하는 다른 두 기사를 읽어보세요. 30분 안에 ES6/ES2015 핵심 내용 익히기(1부), 30분 안에 ES6/ES2015 핵심 내용 익히기(2부)

class CutePromise {
 // executor是我们实例化CutePromise时传入的参数函数，它接受两个参数，分别是resolve和reject。
 // resolve和reject我们将会定义在constructor当中，供executor在执行的时候调用
 constructor(executor) {
 const resolve = () => {}
 const reject = () => {}
 executor(resolve, reject)
 }
 // 为实例提供一个then的方法，接收两个参数函数，
 // 第一个参数函数必传，它会在promise已成功(fulfilled)以后被调用
 // 第二个参数非必传，它会在promise已失败(rejected)以后被调用
 then(onFulfilled, onRejected) {}
}

CutePromise를 생성한 후 핵심 사항인 상태를 알아봅시다. 약속의 대상.

Promise 객체는 자체 상태를 통해 비동기 작업을 제어합니다. Promise 인스턴스에는 세 가지 상태가 있습니다.

비동기 작업 보류 중(보류 중)

• 비동기 작업 성공(완료)

• 비동기 작업 실패(거부)

• 위 세 가지 상태 중 이행됨 거부된 경우 해결(완료)이라고 합니다. 상태 전환에는 두 가지 경로만 있습니다. 첫 번째는 보류 중=>이행됨이고 다른 하나는 보류 중=>거부됨입니다. 일단 상태가 전환되면 변경할 수 없습니다.

이제 CutePromise에 상태를 추가해 보겠습니다. 대략적인 프로세스는 다음과 같습니다.

首先，实例化初始过程中，我们先将状态设为PENDING，然后当executor执行resolve的时候，将状态更改为FULFILLED，当executor执行reject的时候将状态更改为REJECTED。同时更新实例的value。

constructor(executor) {
 ...
 this.state = 'PENDING';
 ...
 const resolve = (result) => {
  this.state = 'FULFILLED';
  this.value = result;
 }
 const reject = (error) => {
  this.state = 'REJECTED';
  this.value = error;
 }
 ...
}

再来看下我们的then函数。then函数的两个参数，onFulfilled表示当promise异步操作成功时调用的函数，onRejected表示当promise异步操作失败时调用的函数。假如我们调用then的时候，promise已经执行完成了（当任务是个同步任务时），我们可以直接根据实例的状态来执行相应的函数。假如promise的状态还是PENDING, 那我们就将onFulfilled和onRejected直接存储到chained这个变量当中，等promise执行完再调用。

constructor(executor) {
 ...
 this.state = 'PENDING';
 
 // chained用来储存promise执行完成以后，需要被依次调用的一系列函数
 this.chained = [];
 const resolve = (result) => {
  this.state = 'FULFILLED';
  this.value = result;
  
  // promise已经执行成功了，可以依次调用.then()函数里的onFulfilled函数了
  for (const { onFulfilled } of this.chained) {
   onFulfilled(res);
  }
 }
 ...
}
then(onFulfilled, onRejected) {
 if (this.state === 'FULFILLED') {
 onFulfilled(this.value);
 } else if (this.state === 'REJECTED') {
 onRejected(this.value);
 } else {
 this.$chained.push({ onFulfilled, onRejected });
 }
}

这样我们就完成了一个CutePromise的创建，下面是完整代码，大家可以复制代码到控制台测试一下：

class CutePromise {
 constructor(executor) {
 if (typeof executor !== 'function') {
  throw new Error('Executor must be a function');
 }
 this.state = 'PENDING';
 this.chained = [];
 const resolve = res => {
  if (this.state !== 'PENDING') {
  return;
  }
  this.state = 'FULFILLED';
  this.internalValue = res;
  for (const { onFulfilled } of this.chained) {
  onFulfilled(res);
  }
 };
 const reject = err => {
  if (this.state !== 'PENDING') {
  return;
  }
  this.state = 'REJECTED';
  this.internalValue = err;
  for (const { onRejected } of this.chained) {
  onRejected(err);
  }
 };
 try {
  executor(resolve, reject);
 } catch (err) {
  reject(err);
 }
 }
 
 then(onFulfilled, onRejected) {
 if (this.state === 'FULFILLED') {
  onFulfilled(this.internalValue);
 } else if (this.$state === 'REJECTED') {
  onRejected(this.internalValue);
 } else {
  this.chained.push({ onFulfilled, onRejected });
 }
 }
}

提供一下测试代码：

let p = new CutePromise(resolve => {
 setTimeout(() => resolve('Hello'), 100);
});
p.then(res => console.log(res));
p = new CutePromise((resolve, reject) => {
 setTimeout(() => reject(new Error('woops')), 100);
});
p.then(() => {}, err => console.log('Async error:', err.stack));
p = new CutePromise(() => { throw new Error('woops'); });
p.then(() => {}, err => console.log('Sync error:', err.stack));

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

JS实现输入框内灰色文字提示

路径中＃号怎样除去

위 내용은 Js를 사용하여 Promise 라이브러리 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!