async/await의 기초 용법

async

async/await는 실제로Generator의 문법사탕이다.말하자면, async 키워드는 뒤에 있는 함수에 비동기적인 조작이 있음을 의미하고, await는 비동기적인 방법이 실행되기를 기다린다는 것을 의미한다.비동기 함수를 선언하려면 다음과 같이 일반 함수 앞에 키워드 async를 추가하면 됩니다.

async function test() {}

Async 함수는 Promise 대상을 되돌려줍니다. (지정한 되돌려주는 값이 Promise 대상이 아니라면, 즉각적인resolve만 되돌려줍니다. 처리 방식은then 방법과 같습니다.) 따라서 Async 함수는return을 통해 되돌려주는 값이then 방법에서 되돌려주는 함수의 매개 변수가 됩니다.

async function test() {
  return 'hello!';
}

test().then(value => {
  console.log(value);
})
// hello!

단독 async 함수, 사실은Promise가 실행하는 기능과 같습니다. 다음은await의 역할을 소개합니다.

await

await는 비동기적인 기다림입니다. 기다림은 프로미스입니다. 따라서 await 뒤에 프로미스 대상을 써야 합니다. 프로미스 대상이 아니면 즉각적인 프로미스로 전환됩니다.Async 함수가 호출되면 즉시 실행하지만, await를 만나면 먼저 되돌아오고, 비동기 작업이 완료될 때까지 기다린 다음 함수 체내 뒤의 문장을 실행합니다.총괄적으로 말하면 async 함수 호출은 코드의 막힘을 일으키지 않지만await는 async 함수 내부 코드의 막힘을 일으킨다.다음 예를 살펴보십시오.

async function func() {
  console.log('async function is running!');
  const num1 = await 200;
  console.log(`num1 is ${num1}`);
  const num2 = await num1+ 100;
  console.log(`num2 is ${num2}`);
  const num3 = await num2 + 100;
  console.log(`num3 is ${num3}`);
}

func();
console.log('run me before await!');
// async function is running!
// run me before await!
// num1 is 200
// num2 is 300
// num3 is 400

async func 함수를 호출하면 바로 실행됩니다. 먼저'async function is running!'이어서 await가 비동기적으로 기다리는 것을 만났고 함수가 되돌아와func() 뒤에 있는 동기화 작업을 먼저 수행했습니다. 동기화 작업이 끝난 후에 await가 기다리는 위치에서 계속 실행됩니다.async 함수는 여러 개의 비동기적인 조작으로 포장된Promise 대상이고 await 명령은 내부then명령의 문법사탕이라고 할 수 있다.
주의해야 할 것은 await 뒤의 Promise 대상이 항상 Resolved 상태로 되돌아오지 않는다는 것이다. await 뒤의 Promise 상태가 Rejected로 바뀌면 전체 async 함수는 실행을 중단한다. 잘못된 위치와 오류 정보를 저장하기 위해try...catch 문장으로 여러 개의 await 과정을 봉인해야 한다. 다음과 같다.

async function func() {
  try {
    const num1 = await 200;
    console.log(`num1 is ${num1}`);
    const num2 = await Promise.reject('num2 is wrong!');
    console.log(`num2 is ${num2}`);
    const num3 = await num2 + 100;
    console.log(`num3 is ${num3}`);
  } catch (error) {
    console.log(error);
  }
}

func();
// num1 is 200
//  
// num2 is wrong!

위에서 보듯이num2에서await는rejected상태의Promise대상을 얻었습니다. 이 오류는catch문장에 전달됩니다. 그러면 오류가 발생한 위치를 정할 수 있습니다.

async/await가 Promise보다 강한 곳은 어디입니까?

promise의 체인 호출:

function sayHi(name) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(name);
    }, 2000)
  })
}

sayHi(' ')
  .then(name => {
    console.log(` ， ${name}`);
    return sayHi(' ');    //   resolved  then
  })
  // name  then 
  .then(name => {                
    console.log(` ， ${name}`);
    return sayHi(' ');
  })
  .then(name => {
    console.log(` ， ${name}`);
  })
//  ，  
//  ，  
//  ，

async/await의 체인 호출:

function sayHi(name) {
  return new Promise((resolved, rejected) => {
    setTimeout(() => {
      resolved(name);
    }, 2000)
  })
}

async function sayHi_async(name) {
  const sayHi_1 = await sayHi(name)
  console.log(` ， ${sayHi_1}`)
  const sayHi_2 = await sayHi(' ')
  console.log(` ， ${sayHi_2}`)
  const sayHi_3 = await sayHi(' ')
  console.log(` ， ${sayHi_3}`)
}

sayHi_async(' ')
//  ，  
//  ，  
//  ，

promise의then체인과then방법의 리셋 함수에 비해asunc/await의 쓰기는 동기화 쓰기처럼 보이고 더욱 시원하며 프로그래밍 습관에 부합된다.

async/await의 기초 용법