Async / Await

axios는 기본적으로 async/await 를 지원하는 라이브러리다.

다음 예시에서 axios를 이용해 async/await를 사용하는 방법을 알아보자.

async function getData(url){
  let data = (await axios.get(url)).data;
	return data;
  }

let url = 'https://koreanjson.com/posts/1';

async function dataArr(){
    let data = await getData(url);
    let result = [];
    for(let v of Object.values(data)){
        result.push(v);
    }
    console.log(result);
}

dataArr();

위 코드는 ES2017에서 추가 된 async/await를 이용한 코드다.

비동기 작업을 수행하고자 하는 함수 앞에 async를 표기하고, 함수 내부에서 실직적인 비동기 작업이 필요한 위치마다 await를 표기하는 것만으로 뒤의 내용을 Promise로 자동 전환하고 해당 내용이 resolve된 이후에야 다음으로 진행된다.

await의 유무로 동기적 함수와 비동기적 함수로 구분할 수 있다.

정리해보면 비동기적인 작업을 수행하기 위해 콜백함수를 익명함수로 전달하는 과정에서 생기는 콜백 지옥을 Promise, async/await등을 사용해서 방지할 수 있다.

Axios로 GET 요청 보내기(동기, 비동기방식)

먼저, 03-08-async-await 폴더를 새로 만들고, 안에 index.js 파일을 만든 다음,
터미널에서 해당 폴더로 이동한 후, yarn init 명령어를 통해 package.json 파일을 만들자.

만들어진 package.json 파일에 "type": "module", 코드를 추가해 준다.

다음으로는 yarn add axios 를 입력하여 axios를 설치해 주자

{
  "name": "03-08-async-await",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "type": "module",
  "dependencies": {
    "axios": "^0.27.2"
  }
}

이제 index.js 파일에 가서 axios를 import하여 axios를 사용해 보자.

fetchAsync라는 비동기 방식의 함수과 fetchSync 라는 동기 방식의 함수를 만들어 보겠다.

import axios from 'axios';

// 1. 비동기방식
function fetchAsync() {
  
}

fetchAsync();

// 2. 동기방식
async function fetchSync() {
  
}

fetchSync();

동기 방식인 fetchSync 함수 안에 await을 쓰기 위해서 함수 앞에 async를 붙여준다. 두 함수 모두 axios를 이용해 데이터를 받아오고, 그 결과를 출력하는 코드를 작성해준다.

import axios from 'axios';

// 1. 비동기방식
function fetchAsync() {
  const result = axios.get("https://koreanjson.com/posts/1");
  console.log("비동기방식: ", result); // Promise { <pending> }
}

fetchAsync();

// 2. 동기방식
// async function fetchSync() {
//   //  =>   함수 중복 선언 문제를 피하자!!! (화살표 함수로 변경)
//   const result = await axios.get("https://koreanjson.com/posts/1");
//   console.log("동기방식: ", result.data); // 제대로된 결과 => { title: "....." }
// }
const fetchSync = async () => {
  const result = await axios.get("https://koreanjson.com/posts/1");
  console.log("동기방식: ", result); // 제대로된 결과 => { title: "....." }
  console.log("동기방식: ", result.data.title);
};

fetchSync();

먼저 fetchAsync() 함수를 실행시켜 보겠습니다. 터미널에서 node index.js를 통해 파일을 실행해 준다.

비동기방식의 fetchAsync() 함수는 데이터를 기다려주지 않고 바로 다음 코드들이 실행되어 Promise { <pending> } 상태로 나타나는 것을 확인할 수 있다.

다음으로는 동기 방식으로 작동하는 fetchSync() 함수를 실행시켜 보겠습니다. 터미널에서 node index.js를 통해 파일을 실행하자.

async/await를 사용하여 동기 방식으로 함수가 작동하여 데이터가 잘 출력된다.