JavaScript 전역 태그 제어 및 Promise 클래스 사용 예에 ​​대한 자세한 설명

글로벌 마크 제어

(1) 간단한 카운터 제어

아마도 위에서 소개한 비동기식 방법은 실제 개발의 비즈니스 시나리오를 충족하지 못할 수도 있습니다. a(), b(), c(), a의 세 가지 방법이 있다고 가정합니다. b는 종속성이 없으며 비동기적으로 수행될 수 있습니다. 그러나 c는 a와 b가 모두 완료된 후에만 트리거될 수 있습니다. 이러한 논리적 구현을 ​​충족하기 위해 코드의 실행 흐름을 제어하는 ​​전역 카운터를 추가합니다.

var flag=2;
var aValue,bValue;
function a(){
 aValue=1;
 flag--;
 c();
}
function b(){
 setTimeout(function(){
  bValue=2;
  flag--;
  c();
 },200);
}
function c(){
 if(flag==0){
  console.log("after a and b:"+(aValue+bValue));
 }
}
a();
b();

메소드 a와 메소드 b의 완료를 모니터링하기 위해 전역 변수 플래그를 설정합니다. 메서드 b는 200밀리초 타이머를 설정하여 네트워크 환경을 시뮬레이션하고 메서드 b가 실행된 후 결국 메서드 c를 성공적으로 호출합니다. 이런 방식으로 우리는 메소드 a(), b(), c()에 대한 종속 호출을 구현합니다.

(2) 데이터 지향 제어

위의 솔루션을 복잡한 시나리오에 적용하면 다음과 같은 문제가 발생합니다. 제품이 여러 버전 반복을 거쳤고 c 메서드는 더 많은 메서드에 의존하므로 카운터 플래그가 필요합니다. 지속적으로 변경하려면 제품 개발자가 반복 중에 변경되었습니다. 위의 두 가지 상황이 발생하면 코드의 논리가 혼란스러워집니다. 플래그 태그가 간결하고 올바른지 여부는 제품 반복에 크게 영향을 받습니다. 따라서 우리는 데이터 중심의 최적화 개선을 제안합니다.

실제 개발 시나리오에서 메서드 종속성이 존재하는 이유는 기본적으로 데이터 종속성이 존재하기 때문입니다. 위의 간단한 예에서 메서드 c는 메서드 a와 메서드 b의 작업 결과에 따라 달라집니다. 플래그가 0인지 여부. 따라서 마커가 0으로 설정되었는지 여부를 종속 메서드가 데이터 처리를 완료했는지 확인하는 것으로 대체할 수 있습니다. 이 예에서는 aValue와 bValue가 c 메서드에서 할당을 완료했는지 확인하는 것입니다.

function c(){
 if(aValue!==undefined && bValue!==undefined){
  console.log("after a and b:"+(aValue+bValue));
 }
}

For more 일반적인 시나리오의 경우 위 코드를 다음과 같이 수정합니다.

var checkDependency={};
var aValue,bValue;
function a(){
 aValue=1;
 checkDependency.a=true;
 c();
}
function b(){
 setTimeout(function(){
  bValue=2;
  checkDependency.b=true;
  c();
 },200);
}
function c(){
 if(checkDependency.a && checkDependency.b){
  console.log("after a and b:"+(aValue+bValue));
 }
}
a();
b();

데이터 지향 확인 방법을 통해 향후 확장 시 새 방법의 checkDependency 개체에 수정 사항만 추가하고 해당 내용을 확인하면 됩니다. c 메소드의 속성은 비동기 종속 메소드의 순차적 실행을 실현할 수 있습니다.

Promise 클래스

JavaScript에서 비동기 메서드의 복잡성을 해결하기 위해 통합 제어 메서드가 공식적으로 도입되었습니다.

var bool=false;
/*
 * 新建一个Promise实例，向构造函数传入一个异步执行函数
 * 异步函数会接受两个参数，由Promise传入，对应then方法中传入的方法
 */
var promise=new Promise(function(resolve,reject){
 setTimeout(function(){
  if(bool){
   //根据执行情况相应调用resolve和reject
   resolve(bool);
  }else{
   reject(bool);
  }
 },200);
});
//通过then向Promise实例传入解决方法
promise.then(function resolve(result){
 console.log("success");
},function reject(result){
 console.log("failure");
});

위 예제 코드는 실제 시나리오에서 더 일반적일 수 있는 기본 Promise 애플리케이션을 보여줍니다. . 다음 체인 호출입니다:

new Promise(function(res,rej){
 if(/*异步调用成功*/){
  res(data);
 }else{
  rej(error);
 }
}).then(function resolve(result){
 console.log("success");
},function reject(result){
 console.log("failure");
});

위 내용은 JavaScript 전역 태그 제어 및 Promise 클래스 사용 예에 ​​대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!