Vue async & await

Vue.js에서 async와 await는 비동기 작업을 처리하기 위한 자바스크립트의 기능이다. async 함수는 비동기 작업을 수행하고, await 키워드는 비동기 작업의 결과를 기다리는 데 사용된다.

const config = {
    baseUrl: 'https://api.hnpwa.com/v0/'
};

async function fetchUserInfo(userName) {
     try {
         return await axios.get(`${config.baseUrl}user/${userName}.json`);
     }catch (error) {
         console.log('error', error);
     }
}

async FETCH_USERINFO({ commit }, userName) {
    const response = await fetchUserInfo(userName);
    console.log('async & await response', response.data);
    commit('SET_USERINFO', response.data);
    return response;
},

위의 예시에서 fetchUserInfo 함수는 axios를 사용하여 api url에 엔드포인트로 GET 요청을 보낸다. await 키워드를 사용하여 응답이 도착할 때까지 기다린 후, 응답 데이터를 변수 response 할당하여 처리할 수 있다. 예외 처리를 위해 try-catch 문도 사용된다.

async

async 키워드는 함수 선언 앞에 사용된다.
async 함수는 항상 Promise를 반환한다.
내부에서 await 키워드를 사용하여 비동기 작업을 처리한다.

await

await 키워드는 async 함수 내에서만 사용할 수 있습니다.
await 키워드 다음에는 Promise 객체가 오며, 해당 Promise가 처리될 때까지 실행이 일시 중지됩니다.
Promise가 처리되면 그 결과가 반환됩니다.