자바스크립트 비동기 프로그래밍에서 콜백 함수와 관리자의 사용 예에 ​​대한 자세한 설명

브라우저의 이벤트 폴링 메커니즘(및 Node.js의 이벤트 폴링 메커니즘)을 기반으로 JavaScript는 종종 비동기 환경에서 실행됩니다. 프로그래머가 스레드/프로세스를 제어할 필요가 없는 JavaScript 언어 자체의 특성으로 인해 js에서 비동기 프로그래밍을 해결하는 것이 매우 중요합니다. 완전한 프로젝트에서 js 개발자가 비동기 작업에 직면하지 않는 것은 불가능하다고 말할 수 있습니다.

1. 콜백 함수

(1) 클래식 콜백 함수 메서드: 중첩된 인라인 함수

URL 매개변수를 수신하고 주소에 대한 비동기 요청을 시작하는 ajax() 메서드가 있다고 가정하고, 실행합니다. 두 번째 매개변수 - 요청 끝에 있는 콜백 함수:

ajax(url,function(result){
 console.log(result);
});

이 메서드는 거의 모든 프런트엔드 개발자가 사용하는 콜백 함수 메서드라고 할 수 있습니다. 이러한 콜백 메커니즘을 사용하면 개발자가 있습니다. 서버 요청이 언제 반환될지 추측하기 위해 다음과 같은 코드를 작성할 필요가 없습니다.

var result=ajax(url);
setTimeout(function(result){
 console.log(result);
},400);

여기서 표현하고 싶은 내용을 이해하실 수 있을 것입니다. 우리가 만드는 Ajax 요청이 400밀리초 이내에 완료된다고 가정하고 400밀리초 지연으로 타이머를 설정했습니다. 그렇지 않으면 정의되지 않은 결과에 대해 작업을 수행하게 됩니다.

그러나 프로젝트가 확장됨에 따라 점차 나타나는 문제가 있습니다. 시나리오에서 여러 계층의 중첩된 콜백 함수가 필요한 경우 코드를 읽고 유지 관리하기가 어려워집니다.

ajax(url0,function(result0){
 ajax(result0.url1,function(result1){
  ajax(result1.url2,function(result2){
   console.log(result2);
  });
 });
});

(2) 외부 함수 호출

인라인 콜백 함수에서 노출되는 코드 혼동 문제를 해결하기 위해 유사한 문제를 해결하기 위해 외부 함수 호출을 도입합니다.

function handle2(result){
 console.log(result);
}
function handle1(result){
 ajax(result.url,function(result){
  handle2(result);
 });
}
ajax(url,function(result){
 handle1(result);
});

이와 ​​같이 인라인 함수를 분할하여 외부 함수 호출을 최적화하는 방법 함수는 매우 효과적일 수 있습니다. 코드를 단순하게 유지하세요.

2. 콜백 관리자 개발

Nimble, Step, Seq 등 널리 사용되는 JavaScript 프로세스 제어 도구를 관찰하면서 다음과 같이 콜백 관리자를 통해 비동기 JavaScript 실행 프로세스를 제어하는 ​​간단한 디자인 패턴을 학습합니다. 일반적인 콜백 관리자의 핵심 코드 예는 다음과 같습니다.

var Flow={};
//设置next方法，在上一个方法完成时调用下一个方法
Flow.next=function(){
 if(this.stack[0]){
  //弹出方法栈中的第一个方法，并执行他
  this.stack.shift()();
 }
};
//设置series方法，接收一个函数数组，并按序执行
Flow.series=function(arr){
 this.stack=arr;
 this.next();
};

//通过Flow.series我们能够控制传入的函数的执行顺序
Flow.series([
  function(){
   //do something
   console.log(1);
   Flow.next();
  },
  function(next){
   //do something
   console.log(2);
   Flow.next();
  }
]);

우리는 흐름 컨트롤러를 초기화하고 그를 위해 두 개의 함수 속성 시리즈와 다음을 설계했습니다. 우리가 작성한 비즈니스 메서드 내에서는 메서드 마지막에 Flow.next()를 호출하여 next 메서드가 순차적으로 실행되고, series 메서드를 실행하여 비동기 함수가 순차적으로 실행됩니다. 코어 컨트롤러를 통해 비동기 함수 호출을 관리하는 이러한 방식은 프로그래밍 프로세스를 단순화하여 개발자가 비즈니스 로직에 더 많은 에너지를 쏟을 수 있도록 합니다.

위 내용은 자바스크립트 비동기 프로그래밍에서 콜백 함수와 관리자의 사용 예에 ​​대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!