Async & Await 21.04.26

26 Apr 2021 in Dev on Java Script

비동기 처리 : 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행.

Promise

자바스크립트 비동기 처리에 사용되는 객체. 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용.

Promise states

pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태.
Fullfilled(이행/완료) : 비동기 처리가 완료되어 promise가 결과 값을 반환 해준 상태
Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태.

Promise resolve

let getData = () => new Promise((res, rej) => {
    setTimeout(res, 3000, '응답')
});

// getData가 완료된 후 then 실행
getData().then(data => console.log(data))

Promise reject

let getData = () => new Promise((res, rej) => {
    setTimeout(rej, 3000, '에러 발생')
});

getData().catch(err => console.log(err));

resolve 되면 then을 실행하고, reject 되면 catch를 실행.

Async & Await

콜백 함수, 프로미스의 단점을 보완하고 가독성이 높은 자바스크립트의 비동기 처리 패턴.

syntax

// 함수 앞에 async 예약어를 붙인다.
async function 함수명() {
    // 비동기 처리 할 메소드는 반드시 promise 객체를 반환해야한다.
    await 비동기 처리 할 메소드명()
}

실사용 예제 : 여러 개의 비동기 처리 코드를 다룰 때

function fetchUser() {
    let url = 'https://jsonplaceholder.typicode.com/users/1'
    return fetch(url).then((rep) => res.json())
}

function fetchUser() {
    let url = 'https://jsonplaceholder.typicode.com/todos/1'
    return fetch(url).then((rep) => res.json())
}

// 위 함수들을 실행하면 각각 사용자 정보와 할 일 정보가 담긴 프로미스 객체 반환

// async 함수 생성
async function logTodoTitle() {
    // 에러를 잡기 위해 try & catch 문법 사용
    try {
        // user 데이터를 fetch 하는데 시간이 걸리므로 await 사용
        let user = await fetchUser();
        if(user.id === 1) {
            // todo 데이터를 fetch 하는데 시간이 걸리므로 await 사용
            let todo = await fetchTodo();
            console.log(todo.title);
        } 
    } catch (err) {
        // catch를 사용하면 네트워크 통신 오류뿐만 아니라 
        // 간단한 타입 오류 등의 일반적인 오류까지도 표시 할 수 있다.
        console.log(err)
    }   
}