드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (13편)

async / await

 

1. Promise로 비동기 네트워크 호출 코드 만들기

function fetchUser() {
    // resolve나 reject를 호출하지 않으면 Promise가 pending 상태에 머무르게 된다.
    return new Promise((resolve, reject) => {
        // do network request in 10 secs..
        resolve('ellie');
    });
}

// 동기적으로 처리하게 되면 네트워크와 통신하는 10초 동안 사용자는 빈 화면을 보게 된다.
const user = fetchUser();
user.then(console.log);
console.log(user);

2. async

// async
// 함수 앞에 async라는 키워드를 쓰면 자동으로 Promise로 변환되서 실행된다.
// async는 syntactic sugar에 속한다.
async function fetchUser() {
    // do network request in 10 secs..
    return 'ellie';
}

// 동기적으로 처리하게 되면 네트워크와 통신하는 10초 동안 사용자는 빈 화면을 보게 된다.
const user = fetchUser();
user.then(console.log);
console.log(user);

3. await

// await
// await는 async 함수 안에서만 쓰일 수 있다.
function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function getApple() {
    await delay(2000);
    return '🍎';
}

async function getBanana() {
    await delay(1000);
    return '🍌';
}

async function pickFruits() {
    // Promise는 만들자마자 실행되기 때문에 미리 선언을 해서 안에 있는 코드를 실행해줌
    const applePromise = getApple();
    const bananaPromise = getBanana();

    // 미리 선언한 프로미스를 쓰면, 병렬적으로 처리가 가능하다.
    const apple = await applePromise;
    const banana = await bananaPromise;
    return `${apple} + ${banana}`;
}

pickFruits().then(console.log);

4. async APIs

// useful Promise APIs
// 1) Promise.all (Promise를 병렬적으로 처리하게 해줌)
function pickAllFruits() {
    return Promise.all([getApple(), getBanana()])
    .then(fruits => fruits.join(' + '));
}
pickAllFruits().then(console.log);

// 2) Promise.race (Promise 중에서 가장 먼저 값을 return하는 것을 반환)
function pickOnlyOne() {
    return Promise.race([getApple(), getBanana()]);
}

pickOnlyOne().then(console.log);

Homework

// Homework
// 콜백 지옥 -> async로 바꾸기
class UserStorage {
    async loginUser(id, password) {
        await delay(2000);
        if (
            (id === 'ellie' && password === 'dream') ||
            (id === 'coder' && password === 'academy')
        ) {
            return id;
        } else {
            throw error('not found');
        }
    }

    async getRoles(user) {
        await delay(1000);
        if (user === 'ellie') {
            return({ name: 'ellie', role: 'admin' });
        } else {
            throw error ('no access');
        }
    }

    async getUserData(id, password) {
        const name = await this.loginUser(id, password);
        const user = await this.getRoles(name);
        return `Hello ${user.name}, you have a ${user.role} role`;
    }
}

const userStorage = new UserStorage();
const id = prompt('enter your id');
const password = prompt('enter your password');
userStorage.getUserData(id, password)
    .then(result => alert(result))
    .catch(console.log);

 

async, await 사용하는 것이 능숙하지 않아서 좀 어렵다

연습 많이 해야겠다 :)

 

 

출처

https://www.youtube.com/watch?v=aoQSOZfz3vQ&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=14