JavaScript의 두 가지 비동기 처리 방법은 무엇입니까?

JavaScript의 두 가지 비동기 처리 방법: 1. "Promise"를 사용하여 비동기식 메서드에서 반환된 코드를 관리하는 데 도움이 됩니다. 2. "async/await"를 사용하여 비동기식을 처리하고 비동기식 구문을 사용할 수 있습니다. 처리할 이벤트.

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

JavaScript의 비동기 처리 방법

Promise

(1) Promise 객체는 비동기 프로그래밍을 위한 통일된 인터페이스를 제공할 목적으로 commonJS 워킹 그룹에서 제안한 사양 및 패턴입니다.

(2) Promise는 패턴입니다. Promise는 비동기적으로 반환된 코드를 관리하는 데 도움이 됩니다. 그는 코드를 캡슐화하고 이벤트 처리와 유사한 관리 계층을 추가합니다. Promise를 사용하여 Promise가 성공하거나 실패한 후에 실행될 코드를 등록할 수 있습니다.

(3) Promise가 완료된 후 해당 코드도 실행됩니다. 성공 또는 실패 시 실행할 함수를 원하는 만큼 등록할 수 있으며, 언제든지 이벤트 핸들러를 등록할 수 있습니다.

(4) 약속에는 두 가지 상태가 있습니다. 1. 대기 중(보류 중) 2. 완료(해결됨).

Promise는 비동기 호출이 반환/시간 초과/종료될 때까지 대기 상태로 유지됩니다.

(5) 이때 Promise 상태는 Completed가 됩니다. 완료 상태는 1. 해결됨, 2. 거부됨의 두 가지 범주로 나뉩니다.

(6) 약속 해결(resolved): 성공적으로 끝났음을 의미합니다. Promise Rejected(거부됨)는 성공적으로 종료되지 않았다는 의미입니다.

//promise
var p=new Promise(function(resolved))
//在这里进行处理。也许可以使用ajax
setTimeout(function(){
   var result=10*5;
   if(result===50){
      resolve(50);
   }else{
     reject(new Error('Bad Math'));
  }
},1000);
});
p.then(function(result){
    console.log('Resolve with a values of %d',result);
});
p.catch(function(){
   console.error('Something went wrong');
});

(1) 코드의 핵심은 setTimeout() 호출에 있습니다.

(2) 중요한 것은 그가solve()와 Reject() 함수를 호출했다는 것입니다. Resolve() 함수는 Promise 사용자에게 Promise가 해결되었음을 알려줍니다. Reject() 함수는 Promise 사용자에게 Promise가 성공적으로 완료되지 않았음을 알려줍니다.

(3) Promise를 사용하는 코드도 있습니다. then과 catch의 사용법에 주의하세요. onsuccess 및 onfailure 이벤트에 대한 핸들러로 생각할 수 있습니다.

(4) 영리한 점은 약속 처리를 상태와 분리한다는 것입니다. 즉, Promise의 상태에 관계없이 p.then(또는 p.catch)을 원하는 만큼 호출할 수 있습니다.

(5) Promise는 비동기 코드를 관리하는 ECMAscript 6의 표준 방법입니다. JavaScript 라이브러리는 Promise를 사용하여 Ajax, 애니메이션 및 기타 일반적인 비동기 상호 작용을 관리합니다.

간단히 말하면, 각 비동기 작업은 콜백 함수를 지정할 수 있는 then 메서드가 있는 promise 개체를 반환합니다. 예를 들어 f1의 콜백 함수 f2는 다음과 같이 작성할 수 있습니다.

f1.then(f2);

f1은 다음과 같이 다시 작성해야 합니다(jquery를 사용하여 구현).

function f1(){
   var dfd=$.deferred();
   settimeout(function(){
     //f1的任务代码
     dfd.resolve();
　 },500);
  return dfd.promise;  
}

다음과 같이 작성하면 장점: 콜백 함수가 체인 스타일로 작성되고, 프로그램 흐름을 명확하게 볼 수 있으며 많은 강력한 기능을 달성할 수 있는 완전한 지원 방법 세트가 있습니다.

예를 들어 여러 콜백 함수를 지정합니다.

f1().then(f2).then(f3);

또 다른 예, 오류가 발생할 때 콜백 함수를 지정합니다.

f1().then(f2).fail(f3);

또한 이전 세 가지 방법에는 없는 장점도 있습니다. 작업이 완료되면 추가 콜백 함수가 있으면 콜백 함수가 즉시 실행됩니다.

그러므로 이벤트나 신호를 놓칠까 봐 걱정할 필요가 없습니다.

이 방법의 단점: 작성하고 이해하기가 상대적으로 어렵습니다.

async wait

ES6 Promise의 등장 이후 비동기 코드는 점차 콜백 지옥에서 우아한 기능적 파이프라인 처리로 바뀌었지만, 이에 익숙하지 않은 개발자에게는 콜백 지옥의 변화일 뿐입니다. 그것은 단지 약속의 지옥입니다.

새로운 async/await는 ES8에서 표준화되었습니다. 이는 단지 Promise와 Generator 함수를 결합하기 위한 구문 설탕일 뿐이지만 async를 통해 전달됩니다. > /await는 오래된 나무가 새 꽃을 피우는 것처럼 동기 구문을 사용하여 비동기 이벤트를 처리할 수 있습니다. 작성 스타일은 Promise와 완전히 다릅니다. async/await，虽然只是 Promise 和 Generator Function组合在一起的语法糖，但通过 async/await 便可以将异步事件用同步语法来处理，就好像是老树开新花一样，写起来的风格与 Promise 完全不同：

function wait(time, fn) {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log('wait:', time)
      resolve(fn ? fn() : time)
    }, time)
  })
}
await wait(500, () => console.log('bar'))
console.log('foo')
// wait: 500
// bar
// foo

通过把 setTimeout 包装成 Promise，再用 await 关键字调用，可以看到结果会是同步执行的先出现 bar，再出现 foo，也就是开头提到的将异步事件写成同步处理。

再看一个例子：

async function withAsyncAwait() {
  for(let i = 0; i 3402058288807f50677058ab1f5894f3 console.log(i))
  }
}await withAsyncAwait()
// wait: 0
// 0
// wait: 500
// 1
// wait: 1000
// 2
// wait: 1500
// 3
// wait: 2000
// 4

代码中实现了withAsyncAwait 函数，用 for 循环及 await 关键字反复执行 wait 函数；此处执行时，循环每次会按顺序等待不同的秒数再执行下一次循环。

在使用 async/await 时，由于 await 关键字只能在 async function 中执行，使用时务必要记得要同时使用。

另外在用循环处理异步事件时，需要注意在 ES6 之后提供的很多 Array 方法都不支持 async/await 语法，如果这里用 forEach 取代 forrrreee

setTimeout code>를 사용합니다. Promise로 패키징된 후 <code>await 키워드를 사용하여 호출하면 bar가 먼저 나타나고 foo가 나타나는 것을 볼 수 있습니다. 가 나타납니다. 즉, 처음에 언급한 동기 처리에 비동기 이벤트를 작성하는 것입니다.

다른 예를 보세요: rrreee withAsyncAwait 함수가 코드에 구현되어 있고 for 루프와 await 키워드가 사용됩니다. wait 함수를 반복적으로 실행하려면 여기에서 실행하면 루프는 다음 루프를 실행하기 전에 순서대로 다른 시간(초) 동안 대기합니다.

async/await를 사용할 때 await 키워드는 async 함수에서만 실행될 수 있으므로 꼭 기억하세요. 같은 시간. 🎜🎜또한 루프를 사용하여 비동기 이벤트를 처리할 때 ES6 이후에 제공되는 많은 Array 메서드를 사용하는 경우 async/await 구문을 지원하지 않는다는 점에 유의해야 합니다. forEach here 는 for를 대체하며 결과는 동기 실행이 되며 숫자는 0.5초마다 인쇄됩니다. 🎜🎜[관련 권장 사항: 🎜javascript 학습 튜토리얼🎜🎜]🎜 🎜

위 내용은 JavaScript의 두 가지 비동기 처리 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!