자바스크립트에서 비동기 코드를 작성하는 3가지 방법

자바스크립트에서 비동기 코드를 작성하는 3가지 방법

반응형

자바스크립트를 사용하는 이유는 무엇입니까? 웹사이트를 좀 더 유연하게 만들기 위해서죠. 그러나 때로는 이러한 형태의 유연성이 귀사의 요구에 충분하지 않을 수도 있습니다.

이 경우 특정 기능을 비동기적으로 실행하는 옵션을 사용하는 것이 좋습니다. 프로그램의 지정된 코드 실행으로 자신을 차단할 수 있습니다. 다행히도, 이 언어는 세 가지 실행 방법을 제공한다. 물론, 여러분은 그것들을 전문적으로 사용하기 위해 그것들을 알고 싶어합니다.

이러한 함수를 올바르게 사용하는 방법을 알아봅니다. 자바스크립트의 함수는 정의 순서가 아니라 호출된 순서로 활성화됩니다.

0. 정상 흐름

일반 실행 순서에 대해 다음 예제를 고려하십시오.

자바스크립트를 실행하면 헬로(Hello)와 굿나잇(Good night!)이라는 문구가 출력된다.

이는 함수 firstFunc()를 먼저 실행한 뒤 2차 Func()를 명료하게 만든 것이다.

그러나 함수를 호출하는 순서에 영향을 미치기 위해 여기에 있습니다. 이를 위한 첫 번째 방법은 콜백 함수를 사용하는 것입니다.

1. 콜백

스매싱 해머처럼 들어가 콜백을 사용하여 제어 흐름에 개입합니다.

콜백은 다른 함수를 매개 변수로 전달할 수 있는 함수입니다. 한 함수를 사용하여 다른 함수를 호출할 수 있습니다.

다음 목록에서는 합( calcFunc )을 계산하는 함수의 예를 사용하여 한 번 수행합니다.

내가 어쨌길래요?

계산이 끝나자마자 displacFunc() 함수를 호출하여 계산 결과를 출력한다.

다음은 시간 초과 후 콜백 함수를 사용하는 또 다른 예입니다.

이 예에서는 타이머가 만료된 후 함수 이름이 전달됩니다. 난폭함함수()는 setTimeout 함수 호출 내에서 호출됩니다.

다시 함수 이름은 함수 호출에서 매개 변수로 전달되었습니다. 따라서 둘 다 비동기적입니다.

해당 호출의 변형:

이전 예와의 주요 차이점은 여기서 함수의 이름이 전달된 것이 아니라 완전한 함수라는 것입니다. 이렇게 하면 별도의 함수 선언 및 함수 이름 할당이 저장됩니다. 이 접근법은 기능이 다른 곳에 필요하지 않은 경우에만 타당하다.

콜백 기능을 자주 호출할 수도 있습니다.

간격의 컨텍스트에서 코드 실행을 수행할 수 있는 방법을 보여드리겠습니다.

여기서 cally() 함수를 매개 변수로 setInterval 함수에 전달한다.

2. 약속

약속은 미래를 위해 이루어진다. 다른 약속과는 달리, 암호로 한 약속은 지켜집니다, 하하!

미래라는 용어도 읽을 수 있습니다. 이것은 약속의 동의어일 뿐이다. 프로그래밍에서 둘 다 아직 알려지지 않은 결과에 대한 자리 표시자(프록시)를 참조합니다.

예를 들어, 프로그램 실행을 계속하기 전에 먼저 잠가야 하는 복잡한 계산이 해당될 수 있습니다. 따라서 약속은 일반적으로 비동기 함수 호출의 결과입니다. 콜백 함수와 마찬가지로 함수를 매개 변수로 호출할 때 미래도 인수로 전달됩니다.

약속은 다음과 같습니다.

그것은 두 부분으로 구성되어 있다.

Promise 객체의 기본 구조는 다음과 같이 자바스크립트에서 볼 수 있습니다.

Promise 개체는 이 시점에서 생성되며, 작업 처리 코드는 함수 내에 배치됩니다. 또한, 성공 또는 실패 시 실행할 기능이 통과됩니다.

약속이 실행되면 두 번째 파트에서 직접 결정을 내립니다. 약속의 결과(성공 또는 오류)에 따라 처리 방식이 결정된다.

약속이 error 를 반환하면 오류 처리 함수가 호출됩니다. 후속 처리기가 아닙니다. TheUsual Promise.js 의 논평을 보자.

실제 사례를 하나 보여드리겠습니다.

코드에서는 PromiseObj 유형의 새 개체가 처음에 생성됩니다. 그런 다음 프로세싱에 들어가는데, 이 예에서는 변수 x 에 값 0 을 할당한다.

마지막으로 코드 실행이 확인됩니다.

0이 성공적으로 할당되면 resolve 함수가 호출된다. 이 예에서는 항상 그렇습니다. 약속의 그때 부분에서는 함수가 실행되는데, 이는 성공 사례에서 실행되어야 한다.

실패 사례를 살펴보려면 0 이 아닌 다른 값을 x에 할당해야 한다.

이제 마지막 신부 애쉬넥을 위해 밥을 던져라.

3. 비동기

2017년, 또 다른 유용한 기능은 ECMAScript 표준의 가족과 행복하게 결합되었습니다. async와 awit이라는 키워드가 있다.

이러한 명령을 다시 사용하면 비동기 프로그래밍이 상당히 쉬워집니다. 이 예는 다음 두 가지 지침의 사용을 설명하기 위한 것입니다.

displayFunc() 함수가 삽입되었다. async라는 키워드로 표시한 것이 특징이다.

async 표시는 함수가 약속 개체를 반환한다는 의미이다. 그렇지 않으면 함수 선언이 앞의 예와 다르지 않습니다.

대기 키워드는 함수의 마지막 줄에 사용됩니다. PromiseObj에는 PromiseObj라는 항목이 표시되었다. 이렇게 하면 이전 코드가 올바르게 실행된 경우에만 내용이 표시됩니다.

결론

당신은 자바스크립트에서 비동기 프로그래밍을 위한 메커니즘을 알고 있기 때문에, 당신의 해당 애플리케이션 설계는 더 이상 당신에게 냉담하지 않다.

웹 페이지뿐만 아니라 웹 애플리케이션도 이러한 방식으로 매우 유연하게 개발할 수 있습니다.

from http://top-poster.tistory.com/68 by ccl(A) rewrite - 2021-10-19 08:28:21