JavaScript 비동기 및 대기

비동기식 JavaScript는 결코 쉽지 않습니다.한동안 우리는 리셋을 사용했다.그리고 우리는 약속으로.이제 우리는 비동기 함수가 생겼다.
비동기 함수는 비동기 자바스크립트를 작성하는 것을 더욱 쉽게 하지만, 자신만의 방법이 있기 때문에 초보자의 나날을 괴롭힌다.
이 두 부분으로 구성된 시리즈에서 저는 여러분과 이종 함수에 관한 모든 지식을 공유하고 싶습니다.

비동기 함수

비동기 함수는 async 키워드를 포함한다.일반 함수 선언에서 사용할 수 있는 기능은 다음과 같습니다.

async function functionName (arguments) {
  // Do something asynchronous
}

화살표 함수에서도 사용할 수 있습니다.

const functionName = async (arguments) => {
  // Do something asynchronous
}

비동기 함수는 항상 약속을 되돌려줍니다

니가 무슨 말을 하든 상관없어.되돌아오는 값은 항상 약속입니다.

const getOne = async _ => { 
  return 1 
} 

const promise = getOne()
console.log(promise) // Promise 

참고: 계속하기 전에 JavaScript 약속과 이를 사용하는 방법을 알아야 합니다.그렇지 않으면, 그것은 혼란스러워지기 시작할 것이다.this article을 사용하여 JavaScript 약속을 숙지하십시오.

키워드 대기 중

프로미스에 전화를 걸면 return전화의 다음 단계를 처리할 것입니다. 아래와 같습니다.

const getOne = async _ => { 
  return 1 
} 

getOne()
  .then(value => {
    console.log(value) // 1
  })

then 키워드는 약속이 해결될 때까지 기다릴 수 있습니다.약속이 해석되면, await 호출 중인 매개 변수로 되돌아옵니다.

const test = async _ => {
  const one = await getOne()
  console.log(one) // 1
}

test()

되돌아오다

약속에 회답하기 전에 then을 기입할 필요가 없다.너는 직접 약속을 실천할 수 있다.
(await을 선택하면 원래 약속을 먼저 해석합니다. 그런 다음 해석된 값에 따라 새 약속을 만듭니다. return await은 실제로 어떠한 작업도 하지 않습니다. 추가 절차가 필요 없습니다.)

// Don't need to do this 
const test = async _ => {
  return await getOne()
}

test()
  .then(value => {
    console.log(value) // 1
  })

// Do this instead
const test = async _ => {
  return getOne()
}

test()
  .then(value => {
    console.log(value) // 1
  })

주의: return await이 필요하지 않으면 비동기 함수를 사용할 필요가 없습니다.위의 예는 다음과 같이 바꿀 수 있습니다.

// Do this instead
const test = _ => {
  return getOne()
}

test()
  .then(value => {
    console.log(value) // 1
  })

오류 처리

약속에 오류가 발생하면 다음과 같이 await 호출을 통해 이를 처리할 수 있습니다.

const getOne = async (success = true) => { 
  if (success) return 1
  throw new Error('Failure!')
} 

getOne(false)
  .catch(error => console.log(error)) // Failure!

비동기 함수의 오류를 처리하려면 catch 호출을 사용해야 합니다.

const test = async _ => {
  try {
    const one = await getOne(false)
  } catch (error) {
    console.log(error) // Failure!
  }
}

test()

만약 try/catch 키워드가 여러 개 있다면 오류 처리가 보기 싫을 수도 있습니다...

const test = async _ => {
  try {
    const one = await getOne(false)
  } catch (error) {
    console.log(error) // Failure!
  }

  try {
    const two = await getTwo(false)
  } catch (error) {
    console.log(error) // Failure!
  }

  try {
    const three = await getThree(false)
  } catch (error) {
    console.log(error) // Failure!
  }
}

test()

더 좋은 방법이 있다.
우리는 비동기 함수가 항상 약속을 되돌려준다는 것을 안다.우리가 약속을 호출할 때, 우리는 await 호출 중의 오류를 처리할 수 있다.이것은 우리가 catch을 추가해서 비동기 함수의 모든 오류를 처리할 수 있다는 것을 의미한다.

const test = async _ => {
  const one = await getOne(false)
  const two = await getTwo(false)
  const three = await getThree(false)
}

test()
  .catch(error => console.log(error)))

참고: Promise .catch 메서드는 오류 하나만 캡처할 수 있습니다.

다중 대기

catch은 JavaScript가 해결될 때까지 다음 코드를 실행하지 못하게 합니다.이것은 코드의 실행 속도를 늦출 수 있다.
행동에서 이 점을 밝히기 위해서는 약속을 해결하기 전에 지연을 만들어야 한다.우리는 await 함수를 사용하여 지연을 만들 수 있다.

const sleep = ms => {
  return new Promise(resolve => setTimeout(resolve, ms))
}

sleep은 해석 전 기다리는 밀리초수입니다.ms을 1000으로 전달하면 JavaScript는 약속을 해석하기 전에 1초를 기다립니다.

// Using Sleep
console.log('Now')
sleep(1000)
  .then(v => { console.log('After one second') })

sleep을 가정하면 1초가 걸린다.이 지연을 만들려면 getOne(1초)을 1000으로 전달합니다.1초 후, sleep이 해결을 약속한 후, 우리는 1의 값을 되돌려줍니다.

const getOne = _ => {
  return sleep(1000).then(v => 1)
}

sleep을 선택하면 await getOne()을 처리하는 데 1초가 걸립니다.

const test = async _ => {
  console.log('Now')

  const one = await getOne()
  console.log(one)
}

test()

이제 세 가지 약속을 기다려야 한다고 가정해 봅시다.모든 약속은 1초의 지연이 있다.

const getOne = _ => {
  return sleep(1000).then(v => 1)
}

const getTwo = _ => {
  return sleep(1000).then(v => 2)
}

const getThree = _ => {
  return sleep(1000).then(v => 3)
}

만약 당신이 getOne이라는 세 가지 약속을 연속한다면, 당신은 반드시 3초를 기다려야만 이 세 가지 약속을 해결할 수 있습니다.이것은 좋지 않다. 왜냐하면 우리는 자바스크립트가 우리가 해야 할 일을 하기 전에 2초를 더 기다리도록 강요하기 때문이다.

const test = async _ => {
  const one = await getOne()
  console.log(one)

  const two = await getTwo()
  console.log(two)

  const three = await getThree()
  console.log(three)

  console.log('Done')
}

test()

await, getOne, getTwo을 모두 수령할 수 있다면 2초를 절약할 수 있다.이 세 가지 약속은 getThree을 사용하여 동시에 얻을 수 있습니다.
다음 세 가지 단계가 있습니다.

세 가지 약속 작성

모든 공약을 그룹

에 추가

Promise.all, await의 공약수 그룹 포함

그 모양은 다음과 같습니다.

const test = async _ => {
  const promises = [getOne(), getTwo(), getThree()]
  console.log('Now')

  const [one, two, three] = await Promise.all(promises)
  console.log(one)
  console.log(two)
  console.log(three)

  console.log('Done')
}

test()

이것이 바로 기본 비동기 함수에 대한 모든 지식입니다!나는 이 문장이 너를 위해 몇 가지 문제를 분명히 할 수 있기를 바란다.
주: 본문은 Learn JavaScript의 수정 발췌문이다.만약 네가 이 문장이 유용하다고 생각한다면, 너는 아마 보고 싶을 것이다.
다음에 우리는 비동기 함수와 순환 중의 행위를 연구할 것이다.
읽어주셔서 감사합니다.본문은 최초로 my blog에 발표되었다.더 많은 글을 원하시면 더 좋은 전단 개발자가 될 수 있도록 my newsletter에 등록하세요.