Promise 구현 메커니즘(1)

5962 단어 프런트 엔드
개발 과정의 비동기적인 요청은 흔히 볼 수 있지만 지옥을 되돌리는 것은 피할 수 있다. 이 글은 Promise의 구체적인 사용 방법을 군더더기 말고 그 실현 메커니즘을 찾아본다.먼저 간단한 Promise의 예입니다.
function getInfo(){
  return new Promise(function(reslve,reject){
    http.get(url,function(result){
     reslove(reslut.id)
   })
  })
}

getInfo().then(function(id){...})

처음에 가장 큰 의혹은:.then()의 조작이 어떻게 나의 비동기적인 요청이 성공했는지 알 수 있습니까?사실 내부의 원리는 하나의promise의 실례 안에 있는then방법에 나의 모든 비동기 요청이 성공한 후의 리셋을 등록하고 reslove 방법을 통해 비동기 요청 결과를 되돌려주는 것이다. 즉, 이전에 등록된 비동기 리셋을 일일이 실행하는 것이다. 대략적인 실현 코드는 다음과 같다.
function Promise(fn){
  var value = null
  var callbacks = [] // 

  this.then(function(callbackDone){
    callbacks.push(callbackDone) //  
    return this // 
  })

  function reslove(value){
    callbacks.forEach(function(callback){
      callback(value) //  
    })
  }

  fn(reslove)
}

설명은 우리가 new Promise () 에 있을 때, 전송된 함수는 비동기 요청을 실행하고, 비동기 요청의 리셋을 호출합니다.then () 방법은callbacks에 리셋을 등록하고, 비동기 요청이 성공한 후reslove (result) 방법을 실행하며, 비동기 리셋을 모두 실행합니다.이것이 바로 Promise의 가장 기초 버전의 실현이다. 현재의 문제는 reslove의 방법이 then 방법보다 먼저 실행되지 못하게 하는 것이다. 그러면 가장 간단한 방법은 타이머의 시간 지연 처리를 넣는 것이다.
function Promise(fn){
  var value = null
  var callbacks = [] // 

  this.then(function(callbackDone){
    callbacks.push(callbackDone) //  
    return this // 
  })

  setTimeout(function(){
  //  
    function reslove(value){
      callbacks.forEach(function(callback){
        callback(value) //  
      })
    }
  },0)

  fn(reslove)

다음은 상태 메커니즘을 고려한 문제입니다. 우리는 Promise의 세 가지 상태인 pending,fulfilled,rejected를 알고 있습니다.그리고pending에서fulfilled나rejected로 변할 수 있을 뿐 상태가 거역할 수 없습니다. 즉, 상태가 바뀌면 다시 바뀌지 않습니다. 그러면 코드를 살짝 변경합니다.
function Promise(fn){
  var value = null
  var callbacks = [] // 
  var status = 'pending'

  this.then(function(callbackDone){
    if(status === 'pending'){
      callbacks.push(callbackDone) //  
    }
    callbackDone(value)
    return this // 
  })

  setTimeout(function(){
  //  
    function reslove(newValue){
      var value = newValue
      status = 'fulfilled'
      callbacks.forEach(function(callback){
        callback(value) //  
      })
    }
  },0)

  fn(reslove)

사실 이상은 Promise 실현의 핵심 코드이고 후속은 이상 처리와 체인식 Promise와 관련된다. 나도 더욱 진일보한 학습이 필요하다. 그러나 현재도 Promise 내부에서 실현된 메커니즘이 어떠한지 알고 내가 평소에 사용할 때 더욱 잘 이해하는 데 도움이 된다.그 후기에 Promise의 실현 메커니즘을 다시 한 번 갱신하고 이상 처리와 체인식 Promise에 대해 좀 더 연구할 것이다
javascript 함수 성명 및 호출
15 - 요소 삭제 및 교체

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage