> 웹 프론트엔드 > JS 튜토리얼 > JavaScript에서 비동기 처리를 수행하기 위해 비동기 및 대기를 사용하는 방법

JavaScript에서 비동기 처리를 수행하기 위해 비동기 및 대기를 사용하는 방법

不言
풀어 주다: 2019-01-10 16:47:15
원래의
2538명이 탐색했습니다.

Async/await는 Promise의 비동기 처리를 보다 간결하고 효과적으로 설명할 수 있는 주요 함수이며, 비동기 처리는 처리 결과를 기다리지 않고 즉시 다음 처리를 실행할 수 있는 메커니즘입니다.

JavaScript에서 비동기 처리를 수행하기 위해 비동기 및 대기를 사용하는 방법

Promise의 경우 "then"을 사용하여 연결하기 때문에 매우 단조로운 코드가 됩니다.

예를 들어 "then"을 사용하여 여러 Promise 프로세스를 실행하는 경우 다음과 같습니다.

getDate()
.then(function(data) {
    return getYear(data)
}) .then(function(year) {
    return getSomething(year)
}) .then(function(item) {
    getAnotherThing(item)
})
로그인 후 복사

어떤 경우에는 Promise.all()을 사용하는 것이 더 잘 구현될 수 있지만 여전히 then을 사용해야 합니다.

async/await 사용법을 배우면 효율성을 높일 수 있습니다.

비동기/대기를 어떻게 사용하나요?

먼저 기본 구문을 살펴보겠습니다

async는 함수를 정의하고, 함수 앞에만 작성하면 비동기 처리를 수행할 수 있습니다.

async function() { }
로그인 후 복사

이렇게 비동기로 작성되면 이 함수는 Promise를 반환합니다.

또한, Wait는 Promise 처리 결과가 반환되기 전에 일시적으로 멈추는 연산자입니다.

await Promise处理
로그인 후 복사

Promise 처리를 설명하는 함수 앞에 간단히 Wait를 작성하면 결과가 반환될 때까지 일시 중지됩니다.

단, Wait는 async로 정의된 함수에만 사용할 수 있다는 점에 유의하세요!

이러한 이유로 async/await는 종종 쌍으로 사용됩니다.

async/await를 사용하여 비동기 처리를 작성하는 방법은 무엇입니까?

먼저 다음과 같은 Promise 처리를 가정합니다.

function myPromise(num) {
  return new Promise(function(resolve) {
 
    setTimeout(function() { resolve(num * num) }, 3000)
 
  })
}
로그인 후 복사

이 예에서는 의도적으로 3초가 걸리는 처리가 Promise에 기록되어 있음이 분명합니다.

이 없이 async/await를 사용하면 아래와 같은 모습이 됩니다.

async function myAsync() {
    var result = await myPromise(10);
    console.log(result);
}
로그인 후 복사

실행 결과는 100

이 예제에서는 async를 할당하여 비동기 처리 함수를 생성합니다.

함수 내 Promise 처리에 대한 설명은 myPromise() 이전에 대기합니다

이것은 3초 후에 결과를 반환하는 Promise 프로세스를 일시적으로 기다리며, 결과를 얻으면 함수 내 프로세스가 계속 처리됩니다. .

실행 결과에는 주어진 매개변수 10에 100을 곱한 값을 얻을 수 있습니다.

위 내용은 JavaScript에서 비동기 처리를 수행하기 위해 비동기 및 대기를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿