이 글은 Promise 구현 아이디어(코드 예제)에 대한 심층 분석입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
Promise 구현 아이디어에 대한 개인적인 이해
저는 항상 Promise가 편리하지만 글이 이상하고 이해하기 어렵다고 느꼈습니다. Promise를 구현하는 사람들의 생각.
그러나 최근 Promise를 구현하는 사고 과정에 대해 개인적으로 조금 이해하게 되었기 때문에 여기에 적어 보겠습니다.
이번 글에서는 아직 제 생각을 명확하게 설명하지 못한 것 같습니다. 시간이 촉박해서 그냥 기록으로 남겨두고 과정을 좀 더 명확하게 표현해보겠습니다.
사용 사례
var p1 = new Promise2( ( resolve, reject ) => {
setTimeout( () => {
resolve( 'hello' )
}, 1000 )
} )
p1.then( res => {
console.log( res + 'world' )
return res + 'world'
} )
.then( res => {
console.log( res + 'ziwei' )
return res + 'ziwei'
} )첫 번째로 다음 사항을 고려하세요.
#🎜🎜 #예제와 이러한 질문을 결합하면
1.
Promise가 비동기 프로세스 제어에 사용됩니다.2.
Constructor Promise는 함수를 허용합니다.#) 🎜🎜 #3.Promise 인스턴스 반환
각 Promise 인스턴스에는 then 메서드가 있으며, then 메서드도 새로운 Promise 인스턴스를 반환하므로 then을 연결할 수 있습니다.#🎜 🎜 #먼저 Promise를 구현합니다(그때의 체인 호출은 구현되지 않습니다)
# 🎜🎜##🎜 🎜#2. 이 Resolve와 Reject는 사용자가 구현하지 않으므로 Promise 개발자가 구현해야 합니다. 그러면 Resolve와 Reject를 어떤 용도로 사용해야 할까요? 상태를 정의하므로 this.state
3.resolve 및 거부도 사용자 매개변수를 허용하므로 이 매개변수를 this.value로 캐시해야 합니다. 메소드가 나중에 호출되면
4에 전달해야 합니다. 그런 다음 SuccessFn과 errorFn을 수락합니다. 그게 진술 2입니다. 배열을 먼저 저장하고 나중에 해결할 때
class Promise2 {
constructor( fn ) {
this.successFnArray = [] // 用来缓存successFn和errorFn
this.errorFnArray = []
this.state = 'pendding'
const resolve = ( res ) => { // resolve就做2件事情 1: 修改状态 2:调用successFn
this.state = 'fulfilled'
this.value = res // this.value用来缓存data数据或者error
this.successFnArray.forEach( successFn => {
successFn( res )
} )
}
const reject = ( err ) => {
this.state = 'rejected'
this.value = err
this.errorFnArray.forEach( errorFn => {
errorFn( res )
} )
}
fn( resolve, reject ) // 先调用fn再说
}
then( successFn, errorFn ) {
switch ( this.state ) {
case 'fulfilled':
successFn( this.value ) // 如果调用了resolve,状态就成了fulfilled，就会执行successFn
break
case 'rejected':
errorFn( this.value )
break
case 'pendding':
this.successFnArray.push( successFn ) // 如果还没调用resolve,状态就是pendding，就先把这些异步函数缓存起来。将来resole时调用
this.errorFnArray.push( errorFn )
}
}
}
var p1 = new Promise2( ( resolve, reject ) => {
setTimeout( () => {
resolve( 'hello' )
}, 1000 )
} )
p1.then( res => {
console.log( res + 'world' )
return res + 'world'
} )Promise 사양에서는 매 메소드마다 새 Promise 객체를 반환해야 합니다. time#🎜 🎜#
그러므로 then 메서드만 수정하면 됩니다# 🎜🎜#그럼 이전에는 무엇을 했나요?
다른 상태에 따라 성공Fn 또는 errorFn을 호출하는 것입니다. 먼저 캐시하고 나중에 호출할 때
그럼#🎜🎜 #먼저 반환값이 있고 Promise를 반환하는데 이전에는 반환값이 정의되지 않았습니다
다음 비동기 함수를 실행해야 하므로 다음 비동기 함수도 성공Fn(res)의 반환 값을 매개변수로 사용합니다#🎜🎜 #
then( successFn, errorFn ) {
return new Promise2( ( resolve, reject ) => {
const _successFn = res => {
resolve(successFn(res))
}
const _errorFn = err => {
reject(errorFn(err))
}
switch ( this.state ) {
case 'fulfilled':
_successFn( this.value )
break
case 'rejected':
_errorFn( this.value )
break
case 'pendding':
this.successFnArray.push( _successFn )
this.errorFnArray.push( _errorFn )
}
} )
}위 내용은 Promise 구현 아이디어에 대한 심층 분석(코드 예제)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
