async / await

async / await

자바스크립트는 싱글 스레드 프로그래밍 언어이기 때문에 비동기 처리가 기반입니다.
비동기 처리는 그 결과가 언제 반환될 지 알 수 없기 때문에 동기식으로 처리하는 기법들이 사용되어야 하는데요.
대표적인 동기식 처리 방식에는 setTimeout이 있고, callback, promise가 있습니다.

async / await 는 기존의 동기식 처리 방식 보다 간편하게 사용이 가능하고 가독성도 좋습니다

사용법

async(함수 앞) / await(기다릴 요청 앞)
사용법으로는 받아올 promise 객체 앞에 await를 붙여주고
함수 앞에 async를 붙여줍니다

const fetchSync = async () => {
    const result = await axios.get("https://koreanjson.com/posts/1")
    // console.log("동기방식 : ", result)    // 제대로된 결과 => { title : "..."}
    console.log("동기방식 : ", result.data)
}

async는 함수를 promise 객체를 반환 해주며
await는 promise 객체가 완료 될 때까지 기다린 후 받아온 resolve 값을 결과 값으로 전달합니다

예외처리

promise 객체를 사용하기 때문에 .then / .catch를 이용해서 예외처리를 하는 방법이 있습니다.

하지만 async와 await를 같이 사용하면
간편한 try / catch를 사용 할수 있다!

// then,catch 사용
async function p2(){ 
  throw 'error';
  //throw new Error("error");
  //await Promise.reject(new Error("error"));
  //return Promise.reject(new Error("error"));
}

p2()
  .then((n) => console.log(n))
  .catch((n) => console.log(n));

// try / catch
async function f() {

  try {
    let response = await fetch('http://유효하지-않은-주소');
  } catch(err) {
    alert(err); // TypeError: failed to fetch
  }
}

f();

참조

https://ko.javascript.info/async-await
https://inpa.tistory.com/