[자바스크립트] async, awaight로 비동기코드를 동기코드처럼 작성하기 (JS, JAVASCRIPT)

Async, await : 콜백처럼 작동하는 비동기 코드이지만 동기코드의 형식을 가진다.

 

1. typescript config.json 파일에 라이브러리 추가하기

Async와 await을 사용하기 위해 먼저 해주어야 할 설정이다. 나는 타겟으로 ES6이 설정되어있었기 때문에 이를 라이브러리에서 dom api와 함께 불러주는 코드로 수정했다.

 

예제

수정 전 (왼), 후(오)

 

코드

{
    "compilerOptions": {
        "strict": true,
        "module": "CommonJS",
        "sourceMap": true,
        // target을 제외하고 lib 라이브러리를 추가하여 async 사용 기반 마련
        // "target": "ES6",
        "lib": [
            "es6",
            "dom"
        ]
    }
}

 

 

 

2. 함수 앞에 async를 붙여준다.

async가 붙은 함수는 비동기함수가 되며, return 값으로 promise 객체를 갖는다. 따라서 promise 를 위의 형식과 같이 리턴값에 감싸줄 필요가 있다.

 

async request <AjaxResponse> (cb: (data:) => void) : Promise <AjaxResponse> {}

 

 

 

 

예제

수정 전 (왼), 수정 후 (오른)

코드

  async request<AjaxResponse>(): Promise<AjaxResponse> {
    fetch(this.url)
    .then(response => response.json())
    .then(cb)
    .catch(()=>{
      console.error('오류');
    });
  }
}

 

3. await 붙여주기

기존에 url 주소를 fetch 에 담아 then 으로 하나씩 콜백해주었다면, async 함수가 된 request 내에서 fetch 앞에 await을 붙이고 response에 담아 동기적인 형식을 취하고, 이를 그대로 반환하는 코드로 간단하게 바꿀 수 있다.

단 형식은 동기적이나, async와 await의 작동은 promise 기반의 비동기적 코드가 맞다.

 

const 변수명 = await 주소담을함수(url주소) ;

예제

왼(수정 중), 오른 (수정 후)

코드

 

  async request<AjaxResponse>(): Promise<AjaxResponse> {
    const response = await fetch(this.url);
    return await response.json() as AjaxResponse;
  }

 

 

4. 프로그램 내에서 URL 사용하는 부분도 마찬가지로 수정

await로 변수에 담을 URL을 지정한 코드가 있다면 그 코드를 사용하는 함수도 비동기여야하기 때문에 앞에 async를 붙여준다.

 

함수명 = async (타입) : pomise <리턴값> => {함수}

참고로, 아래의 render함수처럼 promise를 리턴하지 않는 경우라도 async를 붙여 비동기함수를 만든다면 리턴값 타입 지정 부분을 promise로 감싸주어야한다.

 

예제

수정 전 (왼), 수정 후 (오른)

코드

  render = async (id: string): Promise<void> => {
    const api = new NewsDetailApi(id);
    
    const { title, content, comments } = await api.getData();

    this.store.makeRead(Number(id));
    this.setTemplateData('currentPage', this.store.currentPage.toString());
    this.setTemplateData('title', title);
    this.setTemplateData('content', content);
    this.setTemplateData('comments', this.makeComment(comments));

    this.updateView();
  }

 

---

 

요약

비동기화를 이용하면서 동기적으로 코드를 짜려면 async와 await을 활용하면 된다.

 

먼저 config 파일에서 라이브러리를 통해 ES6과 DOM을 부른다.

 

다음으로, 주소 등의 api 관련 파일에서 async 함수명 promise <리턴값>의 형식으로 수정한 후 await으로 url을 받는다.

 

마지막으로, api를 받거나 사용하는 다른 모든 코드들에서 함수를 async로 바꾸고 리턴값이 없더라도 promise로 감싼다.

 

 

 

 

 

code reference: 김민태의 프론트엔드아카데미 4-10강, 패스트캠퍼스