> 웹 프론트엔드 > JS 튜토리얼 > es6 기반: 비동기 프로세스 제어 아이디어

es6 기반: 비동기 프로세스 제어 아이디어

零下一度
풀어 주다: 2017-06-26 09:10:04
원래의
1428명이 탐색했습니다.

——es6 기반: 비동기 프로세스 제어 아이디어를 간단히 구현하기 위한 Promise/A+ 사양

서문:

 nodejs의 강력한 비동기 처리 기능은 이를 기반으로 한 서버 측 애플리케이션에서 계속해서 빛을 발합니다. 결과적으로 중첩되고 이해하기 어려운 코드로 인해 nodejs가 덜 우아하고 부풀어보입니다. 다음과 유사한 코드:

function println(name,callback){var value = {"ztf":"abc","abc":"def","def":1}
    setTimeout(function(){
        callback(value[name]);
    },500);
}

println("ztf",function(name){ 
    println(name,function(res){
        console.log(res);//def        println(res,function(res1){
            console.log(res1);//1        })
    });
});
로그인 후 복사

값 개체는 위 코드의 println에 정의되어 있으며 관련 값을 전달하기 위해 500초 지연된 콜백이 호출됩니다.

먼저 println을 호출하고 "ztf를 전달합니다. ", 다음 실행 함수가 다음에 달려 있다고 가정합니다. 이번에 반환된 값으로 호출은 위의 코드가 됩니다. ztf를 전달하고 abc를 반환합니다. def를 반환하려면 abc를 사용합니다. 1을 반환하려면 def를 사용합니다.

nodejs를 다음과 같이 사용하기 때문입니다. 서버에서는 다양한 데이터베이스 쿼리를 사용하는 것이 필수적이며 데이터베이스 쿼리는 더 많은 종속성을 갖습니다. 예를 들어 특정 사용자의 권한을 쿼리해야 하는 경우 세 단계가 필요합니다

  ① ID로 사용자 찾기

  ② 찾기 반환된 사용자 롤 id

  3 해당 롤을 통해 해당 권한 찾기

이를 위해서는 세 가지 수준의 중첩 관계가 필요하며 코드는 위와 거의 동일합니다.

promise/A+ 사양

  Promise는 비동기 작업의 최종 결과를 나타냅니다. 미완료 상태, 완료 상태(해결), 실패 상태(거부) 세 가지 상태가 있습니다상태는 되돌릴 수 없고, 완료된 상태는 미완료로 돌아갈 수 없으며, 실패한 상태는 완료 상태가 될 수 없습니다

  

주로 promise 상호 작용 방법은 연쇄 호출을 형성하기 위해 then 메서드에 콜백 함수를 전달하는 것입니다.

 

 

implementation

먼저 특정 애플리케이션에서 Promise/A+ 사양이 어떻게 호출되는지 살펴보겠습니다.

We Promise 사양을 따르면 위의 예를 다음과 같이 변경할 수 있습니다.

var  printText = function(name){var deferred = new Deferred(); //new一个托管函数println(name,deferred.callback());//把回调函数托管到Deferred中实现return deferred.promise; //返回promise对象实现链式调用}

printText("ztf")
.then(function(name){
    console.log(name);return printText(name); //第二次调用依赖第一次调用 返回promise对象  在成功态中判断
})
.then(function(res){
    console.log(res);//defreturn printText(res);
})
.then(function(res1){
    console.log(res1);//1});
로그인 후 복사

이 코드는 비동기 코드인 then() 메서드의 체인 호출을 통해 비동기 코드의 연속 중첩 상태를 어느 정도 변경합니다. 프로세스 제어를 달성할 수 있습니다.

//处理回调var Promise = function(){this.queue = []; //存储的是回调函数的队列this.isPromise = true; 
}//延迟对象var Deferred = function(){this.promise = new Promise();
}
Deferred.prototype = {//托管了callback回调函数    callback:function(){
        
    },//完成态    resolve:function(){
        
    },//失败态    reject:function(){
        
    }
}
로그인 후 복사

여기에는 Promise와 Deferred라는 두 개체가 정의되어 있습니다. Promise는 이름에서 알 수 있듯이 지연된 개체를 처리하는 함수 배포를 담당합니다.

 Promise =.queue = []; .isPromise = = handler =((fulfilledHandler) == =((errorHandler) == =  Deferred =.promise = =
로그인 후 복사

Promise.then 메소드가 콜백을 대기열에 삽입할 뿐인데, 하나는 완료 상태에서 실행되고 다른 하나는 실패 상태에서 실행되는 것을 볼 수 있습니다.

전체 프로세스를 완료하려면 Deferred에서 완료 상태 및 실패 상태의 처리 방법을 정의해야 합니다.

//处理内部操作var Promise = function(){this.queue = []; //存储的是回调函数的队列this.isPromise = true; 
}
Promise.prototype = {//then方法 fulfilledHandler是完成态时执行的回调函数 errorHandler则是失败态
로그인 후 복사
  then:function(fulfilledHandler,errorHandler){
        var handler = {};
        if(typeof(fulfilledHandler) == "function"){
            handler.fulfilled = fulfilledHandler;
        }
        if(typeof(errorHandler) == "function"){
            handler.errored = errorHandler;
        }
     this.queue.push(handler);
        return this;
    }
로그인 후 복사
 
 Deferred =.promise = =   self =  promise =((handler = promise.queue.shift())){ (handler && res = handler.fulfilled.apply(self,args); (res && res.isPromise){ res.queue ==
로그인 후 복사

완료 상태 작업을 추가했습니다. 이 코드는 .then에서 전달한 콜백 함수 컬렉션을 가져옵니다. promise.queue를 차례로 호출하고 현재 인수를 전달합니다.

그런 다음 관리되는 콜백 함수(Deferred.callback())에 완료 상태를 넣고 다음 논리에 따라 실행해야 합니다.

 Promise =.queue = []; .isPromise = = handler =((fulfilledHandler) == =((errorHandler) == =  Deferred =.promise = = self =  args = Array.prototype.slice.call(arguments); = args.concat(Array.prototype.slice.call(arguments,));  self =  promise = args =((handler = promise.queue.shift())){ (handler && res = handler.fulfilled.apply(self,args); (res && res.isPromise){ res.queue ==
로그인 후 복사

코드는 여기에 있습니다. 실패 상태는 아직 추가되지 않았습니다. 보조 중첩이 없다는 점을 제외하면 성공 상태와 유사합니다.

//处理内部操作var Promise = function(){this.queue = []; //存储的是回调函数的队列this.isPromise = true; 
}
Promise.prototype = {//then方法 fulfilledHandler是完成态时执行的回调函数 errorHandler则是失败态    then:function(fulfilledHandler,errorHandler){var handler = {};if(typeof(fulfilledHandler) == "function"){
            handler.fulfilled = fulfilledHandler;
        }if(typeof(errorHandler) == "function"){
            handler.errored = errorHandler;
        }this.queue.push(handler);return this;
    }
}//处理外部操作var Deferred = function(){this.promise = new Promise();
}
Deferred.prototype = {//托管了callback回调函数    callback:function(){var self = this;var args = Array.prototype.slice.call(arguments); //将arguments转为数组return function(err){if(err){//这里是失败态  传入了error对象                self.reject.call(self,err);return;
            }
            args = args.concat(Array.prototype.slice.call(arguments,1)); //合并外部arguments 与内部arguments 去掉err//这里是完成态            console.log(args);
            self.resolve.apply(self,args);
            
        }
    },//完成态    resolve:function(){var self = this;var promise = self.promise;var args = arguments;var handler;        while((handler = promise.queue.shift())){ //取出待执行队列中的第一个函数 直到全部执行完毕if(handler && handler.fulfilled){var res = handler.fulfilled.apply(self,args); //调用失败态回调函数if(res && res.isPromise){ //如果有二次嵌套 则再次执行promiseres.queue = promise.queue;
                    self.promise = res;return;
                }
            }
        }
    },//失败态    reject:function(err){var self = this;var promise = self.promise;var args = arguments;var handler;while((handler = promise.queue.shift())){ //取出待执行队列中的第一个函数 直到全部执行完毕if(handler && handler.errored){                var res = handler.fulfilled.call(self,err); //调用完成态回调函数                
                
            }
        }
    }
}
로그인 후 복사

요약

핵심 포인트:
  ① 각 작업은 동일한 Promise 개체를 반환하여 체인 작업을 보장합니다

② 함수 콜백의 첫 번째 매개변수는 항상 오류 개체입니다. 오류가 없으면 null입니다

  3 각 체인은 then 메서드를 통해 연결되고 반환됩니다. 객체가 다시 실행될 것을 약속하세요

위 내용은 es6 기반: 비동기 프로세스 제어 아이디어의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿