집 > 기사 > 웹 프론트엔드 > JavaScript 비동기 호출 예시 분석

JavaScript 비동기 호출 예시 분석

小云云원래의: 2018-01-22 09:28:131372검색

이 글은 주로 작은 질문을 통해 JavaScript 비동기 호출 문제를 단계별로 설명합니다. 답변 과정은 이 글에 첨부되어 있습니다. 관심 있는 친구들은 이 글이 모든 사람이 JavaScript 비동기를 더 잘 익히는 데 도움이 되기를 바랍니다. 전화.

Problem

아래 aa() 함수를 수정할 수 있습니다. 목적은 console.log()를 사용하여 원하는 값

function aa() {
  setTimeout(function() {
    return "want-value";
  }, 1000);
}

을 출력하는 것입니다. 그러나 추가 요구 사항이 있습니다.

aa( ) 함수 마음대로 수정할 수 있지만 console.log()는 있을 수 없습니다

setTimeout 패키지는 console.log() 문 실행에 포함될 수 없습니다

Answer

어쩌면 인터뷰 질문일지도 모르지만, 무엇이든. 질문의 주요 목적은 비동기 호출이기 때문에 비동기 결과를 기다리는 것이 불가능합니다.

setTimeout()은 종종 사용됩니다. 비동기 작업을 시뮬레이션합니다. 처음에는 핸들러의 처리 결과에 대한 비동기 알림(호출)이 콜백을 통해 이루어졌습니다

function aa(callback) {
  setTimeout(function() {
    if (typeof callback === "function") {
      callback("want-value");
    }
  }, 1000);
}
aa(function(v) {
  console.log(v);
});

그러나 대규모 비동기 애플리케이션에서 콜백을 사용하면 다층 중첩이 발생하기 쉽기 때문에 일부 방법은 이를 개선하기 위해 제안된 "플랫" 부분은 채팅 비동기 호출의 "플랫"을 의미할 수 있습니다. 물론 Promise는 매우 인기 있는 방법이며 결국 ES6에 채택되었습니다. Promise를 사용하여 다음과 같이 구현합니다.

function aa() {
  return new Promise(resolve => {
    setTimeout(function() {
      resolve("want-value");
    }, 1000);
  });
}
aa().then(v => console.log(v));

이 예제에 관한 한 이전 콜백 예제와 유사합니다. 그러나 현재 더 권장되는 방법인 async/await가 ES2017부터 지원됩니다.

function aa() {
  return new Promise(resolve => {
    setTimeout(function() {
      resolve("want-value");
    }, 1000);
  });
}
async function main() {
  const v = await aa();
  console.log(v);
}
main();

aa() 정의는 Promise 메서드의 정의와 동일하지만 호출할 때 다음을 사용합니다. 비동기적으로 기다리려면 wait를 사용하세요. 비동기 결과를 기다린 후 console.log()를 사용하여 처리하세요.

여기서 Wait는 비동기 메서드에서만 사용할 수 있다는 점에 유의해야 합니다. 따라서 Wait를 사용하려면 비동기 기본 메서드를 정의하고 전역 범위에서 호출해야 합니다. 기본 메서드는 비동기식(async로 선언됨)이므로 main() 호출 뒤에 console.log("hello")와 같은 다른 문이 있는 경우 이 문이 먼저 실행됩니다.

async/await 구문을 사용하면 동기 코드 작성과 같은 비동기 호출을 작성할 수 있습니다. 코드를 작성할 때 논리적 점프를 방지하고 더 쉽게 작성할 수 있습니다. (참고: 지옥에서 천국으로 노드 콜백이 async/await로 변경됨)

물론 main()을 정의한 후 main()을 호출하는 것은 IIFE로 캡슐화할 수 있습니다.

(async () => {
  const v = await aa();
  console.log(v);
})();

JavaScript 비동기 호출 예시 분석

관련 기사