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

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

不言
不言원래의
2019-01-10 16:47:152487검색

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.