728x90
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
반응형
'JavaScript > 드림코딩 엘리 - 자바스크립트 기초 강의 (ES5+)' 카테고리의 다른 글
드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (12편) (0) | 2021.11.18 |
---|---|
드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (11편) (0) | 2021.11.16 |
드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (10편) (0) | 2021.11.16 |
드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (9편) (0) | 2021.11.15 |
드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (8편) (0) | 2021.11.15 |
댓글