Promise 구현 아이디어에 대한 심층 분석(코드 예제)

이 글은 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. 이 기능은 어떤 용도로 사용되나요?

• 2. 어떤 매개변수가 허용되나요?

• 3. 🎜#

  예제와 이러한 질문을 결합하면

1.

Promise가 비동기 프로세스 제어에 사용됩니다.

일반인 입장에서는 특정 기능이 일시적으로 실행되지 않기를 바랍니다. 실행을 원할 때 해결하면 해당 기능이 실행됩니다.

• 2.

  Constructor Promise는 함수를 허용합니다.
함수의 매개변수인 Resolve, Reject, Resolve 및 Reject도 사용자가 호출하는 함수이며, 사용자가 다음 비동기 실행을 원할 때 호출(0

• #) 🎜🎜 #3.Promise 인스턴스 반환

  각 Promise 인스턴스에는 then 메서드가 있으며, then 메서드도 새로운 Promise 인스턴스를 반환하므로 then을 연결할 수 있습니다.#🎜 🎜 #

• 먼저 Promise를 구현합니다(그때의 체인 호출은 구현되지 않습니다)

1. 다른 건 몰라도 이 fn은 호출만 가능하니 어떻게 해야 할지 모르겠지만 먼저 fn(resolve,reject)을 호출해 보세요

# 🎜🎜##🎜 🎜#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'
          } )

  을 호출하여 체인 호출 #🎜을 ​​구현하세요. 🎜#
# 🎜🎜#then의 구현은 JQ의 체인 호출과 다릅니다.

• Promise 사양에서는 매 메소드마다 새 Promise 객체를 반환해야 합니다. time#🎜 🎜#

  그러므로 then 메서드만 수정하면 됩니다

이 부분이 헷갈릴 수도 있지만 여기서는 실제로 수행된 작업에 대해 이야기하고 싶습니다. 변경

# 🎜🎜#그럼 이전에는 무엇을 했나요?

다른 상태에 따라 성공Fn 또는 errorFn을 호출하는 것입니다. 먼저 캐시하고 나중에 호출할 때

그럼

#🎜🎜 #먼저 반환값이 있고 Promise를 반환하는데 이전에는 반환값이 정의되지 않았습니다

new 사실은 Promise 프로세스입니다. , 로직은 변경되지 않았습니다. 상태가 충족되면 직접 성공Fn
을 호출하는 것이 아니라 _successFn을 호출한다는 점입니다. 함수는 본질적으로 여전히 성공Fn()을 호출하지만 동시에 호출의 반환 값은 해결의 매개 변수로 사용됩니다. 이는 함수가 실행되었음을 의미합니다.

다음 비동기 함수를 실행해야 하므로 다음 비동기 함수도 성공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 중국어 웹사이트의 기타 관련 기사를 참조하세요!