Promise 구현 메커니즘(1)
5962 단어 프런트 엔드
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에 대해 좀 더 연구할 것이다
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
【Vue.js】컴포넌트의 3개의 네비게이션 가드일에서 사용하게 되었기 때문에 1부터 Vue.js에 대해 배웠다. 그 이름에서 알 수 있듯이 무언가를 가드하기위한 처리로, 대체로 페이지 천이 전에 특정 처리를 실행시켜 페이지 천이시키지 않게 한다. Vue.js의 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.