JS 사용자 정의 Promise 작업 예제 쓰기
4642 단어 JS사용자 정의 Promise
면접 문제 에서 자주 볼 수 있 는 Promsie 를 실현 시 키 거나 Promise 를 실현 하 는 원 리 를 물 어보 기 때문에 오늘 은 class 류 의 형식 을 이용 하여 Promise 를 실현 하려 고 합 니 다.
네 이 티 브 Promise 이름과 충돌 하지 않 기 위해 서 는 MyPromise 라 고 간단하게 명명 합 니 다.
class MyPromise {
constructor(executor) {
let _this = this
this.state = 'pending' //
this.value = undefined //
this.reason = undefined //
// , Promise
this.onFulfilledFunc = [] //
this.onRejectedFunc = [] //
function resolve (value) {
// Promise pending (resolved) (rejected) 。 , pending( )
if (_this.state === 'pending') {
_this.value = value
//
_this.onFulfilledFunc.forEach(fn => fn(value))
_this.state = 'resolved'
}
}
function reject (reason) {
// Promise pending (resolved) (rejected) 。 , pending( )
if (_this.state === 'pending') {
_this.reason = reason
//
_this.onRejectedFunc.forEach(fn => fn(reason))
_this.state = 'rejected'
}
}
try {
// Promise , executor
executor(resolve, reject)
} catch (error) {
reject(error)
}
}
_resolvePromise (promise2, x, resolve, reject) {
// Promise , (pending), resolved rejected, ,
if (promise2 === x) {
reject(new TypeError('Promise '))
}
if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
// x promise
try {
let then = x.then
if (typeof then === 'function') {
then.call(x, (y) => {
_resolvePromise(promise2, y, resolve, reject)
})
} else {
resolve(x)
}
} catch (err) {
reject(err)
}
} else {
//
resolve(x)
}
}
then (onFulfilled, onRejected) {
let promise2
onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : function (val) { return val }
onRejected = typeof onRejected === 'function' ? onRejected : function (reason) { throw reason }
if (this.state === 'resolved') {
promise2 = new MyPromise((resolve, reject) => {
setTimeout(() => {
try {
let x = onFulfilled(this.value)
this._resolvePromise(promise2, x, resolve, reject)
} catch (error) {
reject(error)
}
}, 0);
})
}
if (this.state === 'rejected') {
promise2 = new MyPromise((resolve, reject) => {
setTimeout(() => {
try {
let x = onRejected(this.reason)
this._resolvePromise(promise2, x, resolve, reject)
} catch (error) {
reject(error)
}
}, 0);
})
}
if (this.state === 'pending') {
promise2 = new MyPromise((resolve, reject) => {
this.onFulfilledFunc.push(() => {
setTimeout(() => {
try {
let x = onFulfilled(this.value)
this._resolvePromise(promise2, x, resolve, reject)
} catch (error) {
reject(error)
}
}, 0);
})
this.onRejectedFunc.push(() => {
setTimeout(() => {
try {
let x = onRejected(this.reason)
this._resolvePromise(promise2, x, resolve, reject)
} catch (error) {
reject(error)
}
}, 0);
})
})
}
return promise2
}
}
실행 테스트:
var promise = new MyPromise((resolve, reject) => {
console.log(1)
setTimeout(() => {
resolve(2)
}, 1000);
console.log(3)
}).then(value => console.log(value))
결 과 는 정말 향기롭다.관심 있 는 친 구 는 온라인 HTML/CSS/JavaScript 코드 실행 도 구 를 사용 할 수 있 습 니 다.
자 바스 크 립 트 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있다.
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
JS 판단 수조 네 가지 실현 방법 상세그러면 본고는 주로 몇 가지 판단 방식과 방식 판단의 원리를 바탕으로 문제가 있는지 토론하고자 한다. 예를 들어 html에 여러 개의 iframe 대상이 있으면 instanceof의 검증 결과가 기대에 부합되지 않을...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.