컴퓨터/Javascript

Javascript 드림코딩 by 엘리

풍경소리^^ 2022. 1. 25. 14:53

자바스크립트 11. 비동기 처리의 시작 콜백 이해하기, 콜백 지옥 체험 ? JavaScript Callback | 프론트엔드 개발자 입문편 (JavaScript ES6)

javascript>index.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="async/callback.js" defer></script>
  </head>
  <body></body>
</html>

자바스크립트는 동기적이다

-호이스팅 된 이후부터 코드가 우리가 작성한 순서에 맞추어서 

 하나 하나씩 동기적으로 실행된다

-호이스팅 : var, function declaration

               var변수와 함수 선언들이 제일 위로 올가가는 것

 

javascript>async>callback.js

'use strict';
// JavaScript is synchronous.
// Execute the code block by orger after hoisting.
// hoisting: var, function declaration
console.log('1');
console.log('2');
console.log('3');

index.html에서 Alt+L,O

127.0.0.1:5500/notes/index.html

콘솔

1

2

3

동기는 정해진 순서에 맞게 실행되는 것

 

비동기는 언제 코드가 실행될지 예측할 수 없는 것을 말한다

좋은예로 setTimeout 이라는 웹API가 있는데

이것은 브라우저에서 제공되는 API로 

지정한 시간이 지나면 

우리가 전달한 콜백함수를 호출하는 것

 

콜백함수 : 우리가 전달한 함수를 나중에 불러줘

.map

.filter

.find

 

javascript>async>callback.js

'use strict';
// JavaScript is synchronous.
// Execute the code block by orger after hoisting.
// hoisting: var, function declaration
console.log('1');
setTimeout(() => console.log('2'), 1000);
console.log('3');

1

3

2

 

setTimeout은 브라우저API이니까

브라우저야 요청이 왔어 1초뒤에 이 콜백함수를 실행해줘

먼저 브라우저API 에게 요청을 보내고

기다리지 않고 바로 다음 코드 실행

 

콜백은 항상 비동기 일때만 쓸까요? 아니오

 

콜백도 두 가지로 나누어진다

 

-Synchronous callback

-Asynchronous callback 언제 실행될지 모르는

 

-Synchronous callback 동기콜백

 

javascript>async>callback.js

'use strict';
// JavaScript is synchronous.
// Execute the code block by orger after hoisting.
// hoisting: var, function declaration
console.log('1');
setTimeout(() => console.log('2'), 1000);
console.log('3');
// Synchronous callback
function printImmediately(print) {
  print();
}
printImmediately(() => console.log('hello'));

 

함수는 호이스팅이 되니까

function printImmediately

1

3

hello 함수실행

2 브라우저API

 

-Asynchronous callback 비동기 콜백

javascript>async>callback.js

'use strict';
// JavaScript is synchronous.
// Execute the code block by orger after hoisting.
// hoisting: var, function declaration
console.log('1');
setTimeout(() => console.log('2'), 1000);
console.log('3');
// Synchronous callback
function printImmediately(print) {
  print();
}
printImmediately(() => console.log('hello'));
// Asynchronous callback
function printWithDelay(print, timeout) {
  setTimeout(print, timeout);
}
printWithDelay(() => console.log('async callback'), 2000);

모든 함수의 선언은 호이스팅이 되기때문에

function printImmediately

function printWithDelay

1

3

hello

2

async callback

 

============================================================================

콜백지옥

서버에서 사용자 정보를 가져오는 클래스를 만들어보자

UserStorage 클래스에는

두 개의 API가 있다

-loginUser라는 API

-getRoles라는 API

 

-loginUser라는 API:

사용자의 id와 password를 받아와서

로그인이 정상적으로 이루어졌다면 onSuccess이라는 콜백함수를 사용자의 데이터와 함께 호출해주고

만약 존재하지 않는 사용자라면 비밀번호가 틀렸거나 네트워크에 문제가 있거나하면 onError이라는 콜백함수를

호출해준다

 

-getRoles라는 API:

사용자의 데이터를 받아서 사용자마다 역활들을 서버에서 요청해서 정보를 받아오는 API

사용자의 역활을 잘 받아온다면 onSuccess이라는 콜백함수를 사용자의 역활과 함께 호출해주고

만약 문제가 있다면 onError라는 콜백함수를 호출해준다

 

loginUser함수를 호출하게 되면

2초 뒤에 코드블럭이 실행되는데

정상이면 id 를 전달해준다

만약 아니라면 Error 라는 오브젝트를 만들어서 'not found' 값을 전달해준다

 

다음은

getRoles 함수로 사용자가 역활을 받아올때

1초 뒤에 코드블럭을 실행하는데

사용자가 엘리이면

onSuccess를 호출하면서

이름은 엘리이고 역활은 admin인 오브젝트를 전달해주고

만약 엘리가 아니라면

onError콜백함수를 호출하면서

Error 라는 오브젝트를 만들어서 'no access'권한이 없다는 값을 전달해준다

 

1.사용자에게 id,password를 입력받아온다

2.서버에 로그인

로그인이 성공적으로 된다면 

사용자의 다시 id를 받아와서

3.이 받아온 id를 이용해서

역활Roles를 요청해서 다시 받아온다

역활이 성공적으로 받아와 진다면

4.사용자의 오브젝트

{name:'ellie', role:'admin'}

이것을 출력

 

먼저

1. userStorage라는 변수를 선언

클래스이니까 new라는 키워드를 이용해서

인스턴스를 만들고

이 인스턴스를 이용해서 서버와 통신을 해 본다

2. 사용자의 id를 받아온다

브라우저API 인 prompt를 이용한다

3. password를 받아

브라우저API 인 prompt를 이용

4.userStorage 인스턴스를 이용해서 로그인을 한다

userStorage.loginUser()에 받아온 id, password 가

성공이면 onSuccess 사용자를 받아왔을 때 처리해야 할 코드-userStorage에 getRoles 역활을 받아와야 된다

실패했을 때 onError가 전달해왔을 때 실행하는 코드-콘솔에 error 출력

 

성공이면 onSuccess 사용자를 받아왔을 때 처리해야 할 코드-userStorage에 getRoles 역활을 받아와야 된다

userWithRole 성공-사용자의 역활을 받아오면 alert('hello')

error 이면-console.log에 error 출력

 

javascript>index.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="async/callback2.js" defer></script>
  </head>
  <body></body>
</html>

javascript>async>callback2.js

'use strict';
// Callback Hell example
class UserStorage {
  loginUser(id, password, onSuccess, onError) {
    setTimeout(() => {
      if (
        (id === 'ellie' && password === 'dream') ||
        (id === 'coder' && password === 'academy')
        ) {
        onSuccess(id);
      } else {
        onError(new Error('not found'));
      }
    }, 2000);
  }
  getRoles(user, onSuccess, onError) {
    setTimeout(() => {
      if (user === 'ellie') {
        onSuccess({ name: user, role: 'admin' });
      } else {
        onError(new Error(`\n ${user}님은 access 권한이 없습니다`));
      }
    }, 1000);
  }
}
const userStorage = new UserStorage();
const id = prompt('enter your id');
const password = prompt('enter your passrod');
userStorage.loginUser(
  id,
  password,
  user => {
    userStorage.getRoles(
      user,
      suc => {
        alert(
          `Hello ${suc.name}, you have a ${suc.role} role`
        );
      },
      roleErr => {
        // console.log(roleErr);
        alert(
          `${roleErr}`
        );
      }
    );
  },
  error => {
    // console.log(error);
    alert(
      `${error} \n ${id}님은 회원이 아닙니다`
    );
  }
);

 

자바스크립트 12. 프로미스 개념부터 활용까지 JavaScript Promise | 프론트엔드 개발자 입문편 (JavaScript ES6)

비동기를 간편하게 처리할 수 있도록 도와주는 오브젝트

 

정해진 장시간의 기능을 수행하고 나서

정상적으로 기능이 수행되었다면

성공의 메시지와 처리된 결과값을 전달해주고

실패하면 error를 전달해준다

 

이메일로 사전등록 - Promise 생성

코스오픈 - Promise 성공적으로 값을 전달

코스가 오픈 되자마자 수업을 들을 수 있게 되었다

 

이미 오픈된 코스라면 등록하자마자- Promise가 바로 실행

바로 수업을 들을 수 있게 된다

 

콜백을 사용하지 않고 Promise를 사용해서

비동기코드를 깔끔하게 처리할 수 있는지 알아보자

 

javascript>index.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="async/promise.js" defer></script>
  </head>
  <body></body>
</html>

 

Promise는 JavaScript에 내장되어있는 object 이다

비동기적인 것을 수행할 때 callback 함수 대신에 유용하게 쓸 수 있다

1.상태

-수행중panding

-완료성공fulfilled

-실패rejected)

2.정보를 제공하는 사람-producer

 정보를 소비하는 사람-consumer

 

javascript>async>promise.js

우리가 원하는 기능을 비동기적으로 실행하는 Promise를 만들자

Promise는 class이므로 new 키워드를 이용해서 object를 생성할 수 있다

 

생성자를 보면

executor라는 콜백함수를 전달해 주어야 된다

이 콜백함수는 또 다른 콜백함수 두 개를 받는다

resolve - 기능을 정상으로 수행해서 마지막에 최종 데이터를 전달

reject - 기능을 수행하다가 중간에 문제가 생기면 호출하게 될

 

조금 무거운 일들을 하는데

네트워크에서 데이터를 받아오거나

파일에서 큰 데이터를 읽어오는 과정은

시간이 많이 걸린다

 

그런 일을 동기적으로 처리하면

네트워크에서 자료를 읽어오고 받아오는 동안

그 다음 라인의 일이 실행되지 않기 때문에

시간이 조금 걸리는 일들은

Promise를 만들어서 비동기적으로 처리하는 것이 좋다

 

Promise를 만드는 순간

우리가 전달한 executor라는 콜백함수가 자동적으로 바로 실행이 되는 것을 알 수 있다

promise안에 네트워크 통신하는 코드를 작성했다면 promise가 만들어지는 순간

바로 네트워크 통신을 수행하게 된다

 

여기서 한가지 우리가 배울 수 있는 중요한 포인트는 

만약 네트워크 요청을 사용자가 요구했을 때만 해야되는 경우라면

즉 사용자가 버튼을 눌렀을 때 네트워크 요청을 해야되는 경우라면

이런 식으로 작성하게 되면 사용자가 요구하지도 않았는데

불필요한 네트워크 통신이 일어날 수 있다

 

javascript>async>promise.js

'use strict';
// Promise is a JavaScript object for asynchronous operation.
// State: pending -> fulfilled or rejected
// Producer vs Consumer
// 1. Producer
// when new Promise is created, the executor runs automatically.
const promise = new Promise((resolve, reject) => {
  // doing some heavy work (network, read files)
  console.log('doing something...');
  setTimeout(() => {
    resolve('ellie');
    // reject(new Error('no network'));
  }, 2000);
});

상단부분

 

javascript>async>promise.js

// 2. Consumers: then, catch, finally
promise //
  .then(value => {
    console.log(value);
  })
  .catch(error => {
    console.log(error);
  })
  .finally(() => {
    console.log('finally');
  });

중간부분

then, catch, finally 을 이용해서 데이터를 받아올 수 있다

 

producer에서 promise라는 변수를  만들었는데

값이 잘 수행이 된다면

promise.then그러면 값을 받아 와서

원하는 기능을 수행하는 콜백함수를 전달해주면 된다

여기 value라는 파라미터는 promise가 잘 수행이 되어서

 

//resolve콜백함수에서 전달된 'ellie'라는 값이 들어오게 된다

 

then 이라는 것은 promise가 정상적으로 잘 수행이 되어서

마지막에 최종적으로 resolve라는 콜백함수를 통해서

전달한 이 값'ellie'이 value 파라미터에 전달되어서 들어오게 된다

 

// reject 콜백함수를 사용하게 되면 10:26

네트워크를 하다 실패하면

reject는 Error 라는 오브젝트를 통해서 값을 전달하는데

Error는 자바스크립트에서 제공하는 오브젝트 중의 하나이다

 

javascript>async>promise.js

'use strict';
// Promise is a JavaScript object for asynchronous operation.
// State: pending -> fulfilled or rejected
// Producer vs Consumer
// 1. Producer
// when new Promise is created, the executor runs automatically.
const promise = new Promise((resolve, reject) => {
  // doing some heavy work (network, read files)
  console.log('doing something...');
  setTimeout(() => {
    // resolve('ellie');
    reject(new Error('no network'));
  }, 2000);
});
// 2. Consumers: then, catch, finally
promise //
  .then(value => {
    console.log(value);
  })

콘솔

doing something...

Uncaught (in promise) Error: no network

 

javascript>async>promise.js

'use strict';
// Promise is a JavaScript object for asynchronous operation.
// State: pending -> fulfilled or rejected
// Producer vs Consumer
// 1. Producer
// when new Promise is created, the executor runs automatically.
const promise = new Promise((resolve, reject) => {
  // doing some heavy work (network, read files)
  console.log('doing something...');
  setTimeout(() => {
    // resolve('ellie');
    reject(new Error('no network'));
  }, 2000);
});
// 2. Consumers: then, catch, finally
promise //
  .then(value => {
    console.log(value);
  })
  .catch(error => {
    console.log(error);
  })

콘솔

doing something...

Error: no network

 

설명하면 promise에서 .then 성공한 것 처리

.catch 실패한 것 처리

 

promise에서 .then을 호출하면 promise가 리턴되고

리턴된 promise에 .catch를 등록한다

 

promise를 만들때 

비동기적으로 수행하고 싶은 기능들의 코드를

1.producer에 작성하고

성공하게 되면 resolve를 호출하게 되고

실패하면 reject를 호출하게 되고 왜 실패했는지 전달하게 된다

2.consumers에서 

.then 성공한 값

.catch 실패한 error 를 받아와서 처리해주면 된다

3.최근에 추가 .finally

성공과 실패에 상관없이

무조건 마지막에 호출되어진다

 

javascript>async>promise.js

'use strict';
// Promise is a JavaScript object for asynchronous operation.
// State: pending -> fulfilled or rejected
// Producer vs Consumer
// 1. Producer
// when new Promise is created, the executor runs automatically.
const promise = new Promise((resolve, reject) => {
  // doing some heavy work (network, read files)
  console.log('doing something...');
  setTimeout(() => {
    // resolve('ellie');
    reject(new Error('no network'));
  }, 2000);
});
// 2. Consumers: then, catch, finally
promise //
  .then(value => {
    console.log(value);
  })
  .catch(error => {
    console.log(error);
  })
  .finally(() => {
    console.log('finally');
  });

콘솔

doing something...

Error: no network

finally

 

만약 성공으로 처리하면

javascript>async>promise.js

'use strict';
// Promise is a JavaScript object for asynchronous operation.
// State: pending -> fulfilled or rejected
// Producer vs Consumer
// 1. Producer
// when new Promise is created, the executor runs automatically.
const promise = new Promise((resolve, reject) => {
  // doing some heavy work (network, read files)
  console.log('doing something...');
  setTimeout(() => {
    resolve('ellie');
    // reject(new Error('no network'));
  }, 2000);
});
// 2. Consumers: then, catch, finally
promise //
  .then(value => {
    console.log(value);
  })
  .catch(error => {
    console.log(error);
  })
  .finally(() => {
    console.log('finally');
  });

콘솔

doing something...

ellie

finally

 

15:42

javascript>index.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="async/promise2.js" defer></script>
  </head>
  <body></body>
</html>

javascript>async>promise2.js

'use strict';
// 3. Promise chaining
const fetchNumber = new Promise((resolve, reject) => {
  setTimeout(() => resolve(1), 1000);
});
fetchNumber
  .then(num => num * 2)
  .then(num => num * 3)
  .then(num => {
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve(num - 1), 1000);
    });
  })
  .then(num => console.log(num));

javascript>index.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="async/promise3.js" defer></script>
  </head>
  <body></body>
</html>

javascript>async>promise3.js

'use strict';
// 4. Error Handling
const getHen = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve('?'), 1000);
  });
const getEgg = hen =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve(`${hen} => ?`), 1000);
    // setTimeout(() => reject(new Error(`error! ${hen} => ?`)), 1000);
  });
const cook = egg =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve(`${egg} => ?`), 1000);
  });
getHen() //
  .then(getEgg)
  .then(cook)
  .then(console.log)
  .catch(console.log);
?=>?=>?

 

풀어쓰면

getHen() // 주석두줄 하면 행바꿈된다

.then(hen => getEgg(hen))

.then(egg => cook(egg))

.then(meal => console.log(meal))

 

네트워크에 문제가 있어서 실패가 되면

javascript>async>promise3.js

'use strict';
// 4. Error Handling
const getHen = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve('?'), 1000);
  });
const getEgg = hen =>
  new Promise((resolve, reject) => {
    // setTimeout(() => resolve(`${hen} => ?`), 1000);
    setTimeout(() => reject(new Error(`error! ${hen} => ?`)), 1000);
  });
const cook = egg =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve(`${egg} => ?`), 1000);
  });
getHen() //
  .then(getEgg)
  .then(cook)
  .then(console.log);

콘솔

Uncaught (in promise) Error: error! ?=>?

 

javascript>async>promise3.js

'use strict';
// 4. Error Handling
const getHen = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve('?'), 1000);
  });
const getEgg = hen =>
  new Promise((resolve, reject) => {
    // setTimeout(() => resolve(`${hen} => ?`), 1000);
    setTimeout(() => reject(new Error(`error! ${hen} => ?`)), 1000);
  });
const cook = egg =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve(`${egg} => ?`), 1000);
  });
getHen() //
  .then(getEgg)
  .then(cook)
  .then(console.log)
  .catch(console.log);

콘솔

Error: error! ?=>?

 

javascript>async>promise3.js

'use strict';
// 4. Error Handling
const getHen = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve('?'), 1000);
  });
const getEgg = hen =>
  new Promise((resolve, reject) => {
    // setTimeout(() => resolve(`${hen} => ?`), 1000);
    setTimeout(() => reject(new Error(`error! ${hen} => ?`)), 1000);
  });
const cook = egg =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve(`${egg} => ?`), 1000);
  });
getHen() //
  .then(getEgg)
  .catch(error => {
    return '?' // windows + . 마침표 이모지 Emoji
  })
  .then(cook)
  .then(console.log)
  .catch(console.log);

?=>?

 

callback hell

javascript>index.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="async/callback-to-promise.js" defer></script>
  </head>
  <body></body>
</html>

비교 위해서 잠시 callback hell 보면

javascript>async>callback.js

'use strict';
// Callback Hell example
class UserStorage {
  loginUser(id, password, onSuccess, onError) {
    setTimeout(() => {
      if (
        (id === 'ellie' && password === 'dream') ||
        (id === 'coder' && password === 'academy')
      ) {
        onSuccess(id);
      } else {
        onError(new Error('not found'));
      }
    }, 2000);
  }
  getRoles(user, onSuccess, onError) {
    setTimeout(() => {
      if (user === 'ellie') {
        onSuccess({ name: 'ellie', role: 'admin' });
      } else {
        onError(new Error('no access'));
      }
    }, 1000);
  }
}
const userStorage = new UserStorage();
const id = prompt('enter your id');
const password = prompt('enter your passrod');
userStorage.loginUser(
  id,
  password,
  user => {
    userStorage.getRoles(
      user,
      userWithRole => {
        alert(
          `Hello ${userWithRole.name}, you have a ${userWithRole.role} role`
        );
      },
      error => {
        console.log(error);
      }
    );
  },
  error => {
    console.log(error);
  }
);

javascript>async>callback-to-promise.js

// Callback Hell example
class UserStorage {
  loginUser(id, password) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (
          (id === 'ellie' && password === 'dream') ||
          (id === 'coder' && password === 'academy')
        ) {
          resolve(id);
        } else {
          reject(new Error('not found'));
        }
      }, 2000);
    });
  }
  getRoles(user) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (user === 'ellie') {
          resolve({ name: 'ellie', role: 'admin' });
        } else {
          reject(new Error('no access'));
        }
      }, 1000);
    });
  }
}
// Original code from Youtube course
const userStorage = new UserStorage();
const id = prompt('enter your id');
const password = prompt('enter your passrod');
userStorage
  .loginUser(id, password)
  .then(userStorage.getRoles)
  .then(user => alert(`Hello ${user.name}, you have a ${user.role} role`))
  .catch(console.log);

밑 부분만 보면

userStorage.loginUser(id, password)

.then(user => userStorage.getRoles(user))

인자가 같으니까 간략히 쓰면

.then(userStorage.getRoles)

 

자바스크립트 13. 비동기의 꽃 JavaScript async 와 await 그리고 유용한 Promise APIs | 프론트엔드 개발자 입문편 (JavaScript ES6)

비동기의 핵심, 비동기의 꽃

promise를 동기적으로 보이게 만들어주는 async await

 

promise1

.then(promise2)

.then(promise3)

.then(promise4)

.then(promise5)

 

간편한 API로 만들어주는 syntactic sugar

 

javascript>index.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="async/async.js" defer></script>
  </head>
  <body></body>
</html>

 

javascript>async>async.js

1. async

사용자의 데이터를 백엔드에서 받아오는 함수 fetchUser 가 있다면

네트워크 통신을 해서 데이를 받아오는데 10초 정도 걸리는 코드가 있다고 가정

10초가 지나면 사용자의 이름을 return하는 함수

 

이것을 호출하고 

const user = fetchUser();

콘솔로 찍으면

console.log(user);

 

오래 걸리는 코드를 비동기적인 처리를 하지 않으면

자바스크립트는 코드를 동기적으로 처리하기 때문에 3:53

javascript>async>async.js

'use strict';
// async & await
// clear style of using promise :)
// 1. async
function fetchUser() {
  // do network reqeust in 10 secs....
  return 'ellie';
}
const user = fetchUser();
console.log(user);

10초후에

ellie

 

javascript>async>async.js

'use strict';
// async & await
// clear style of using promise :)
// 1. async
function fetchUser() {
  return new Promise((resolve,reject)=>{
    // do network reqeust in 10 secs....
    return 'ellie';
  })
}
const user = fetchUser();
console.log(user);

Promise

Prototype: Promise

PromiseState: "pending"

PromiseResult: undefined

 

javascript>async>async.js =====지난 시간 promise를 이용하면

'use strict';
// async & await
// clear style of using promise :)
// 1. async
function fetchUser() {
  return new Promise((resolve,reject)=>{
    // do network reqeust in 10 secs....
    resolve('ellie');
  });
}
const user = fetchUser();
console.log(user);

Promise{<fulfilled>: "ellie"}

Promise

Prototype: Promise

PromiseState: "fulfilled"

PromiseResult: "ellie"

 

fetchUser는 Promise를 리턴하므로

.then이라는 콜백함수이용해서 

user가 들어오면 console.log에 출력하는 것처럼

 

javascript>async>async.js

'use strict';
// async & await
// clear style of using promise :)
// 1. async
function fetchUser() {
  return new Promise((resolve,reject)=>{
    // do network reqeust in 10 secs....
    resolve('ellie');
  });
}
const user = fetchUser();
user.then(console.log);
console.log(user);

Promise{<fulfilled>: "ellie"}

 

ellie

 

promise를 이용하지 않고 간편하게 비동기를 작성하는 방법

함수 앞에 async 라는 키워드를 붙여주면 된다

 

javascript>async>async.js

'use strict';
// async & await
// clear style of using promise :)
// 1. async
async function fetchUser() {
    // do network reqeust in 10 secs....
    return 'ellie';
}
const user = fetchUser();
user.then(console.log);
console.log(user);

Promise{<fulfilled>: "ellie"}

ellie

 

await

await은 asysnc 붙은 함수 안에서만 쓸 수 있다

 

javascript>async>async.js

'use strict';
// async & await
// clear style of using promise :)
// 1. async
async function fetchUser() {
    // do network reqeust in 10 secs....
    return 'ellie';
}
const user = fetchUser();
user.then(console.log);
console.log(user);
// 2. await ✨
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
async function getApple() {
  await delay(1000);
  return '?';
}
async function getBanana() {
  await delay(1000);
  return '?';
}
// function getBanana(){
//   return delay(2000)
//   .then(()=> '?');
// }
function pickFruits() {
  return getApple()
  .then(apple => {
    return getBanana()
    .then(banana => `${apple} + ${banana}`);
  });
}
pickFruits().then(console.log);

 

javascript>async>async.js

'use strict';
// async & await
// clear style of using promise :)
// 1. async
async function fetchUser() {
    // do network reqeust in 10 secs....
    return 'ellie';
}
const user = fetchUser();
user.then(console.log);
console.log(user);
// 2. await ✨
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
async function getApple() {
  await delay(1000);
  return '?';
}
async function getBanana() {
  await delay(2000);
  return '?';
}
// function getBanana(){
//   return delay(2000)
//   .then(()=> '?');
// }
async function pickFruits() {
  const apple = await getApple();
  const banana = await getBanana();
  return `${apple} + ${banana}`;
}
pickFruits().then(console.log);

Promise{<fulfilled>: "ellie"}

ellie

?+?

 

javascript>async>async.js

'use strict';
// async & await
// clear style of using promise :)
// 1. async
async function fetchUser() {
    // do network reqeust in 10 secs....
    return 'ellie';
}
const user = fetchUser();
user.then(console.log);
console.log(user);
// 2. await ✨
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
async function getApple() {
  await delay(1000);
  // throw 'error';
  return '?';
}
async function getBanana() {
  await delay(2000);
  return '?';
}
// function getBanana(){
//   return delay(2000)
//   .then(()=> '?');
// }
async function pickFruits() {
  const applePromise = getApple(); // promise 만들면 바로 실행이 되니까 기다리고
  const bananaPromise = getBanana(); // 기다리지 않고 바로 실행
  const apple = await applePromise;
  const banana = await bananaPromise;
  return `${apple} + ${banana}`;
}
pickFruits().then(console.log); // 병렬 실행 - 그런데 복잡하게 이렇게 안한다

 

promise에 있는 all 이라는 API를 쓰면

promise 배열을 전달하게 되면

모든 promise들이 다 받을 때까지 모아준다

배열을 string으로 묶을 수 있는 것은 join

 

javascript>async>async.js

'use strict';
// async & await
// clear style of using promise :)
// 1. async
async function fetchUser() {
    // do network reqeust in 10 secs....
    return 'ellie';
}
const user = fetchUser();
user.then(console.log);
console.log(user);
// 2. await ✨
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
async function getApple() {
  await delay(1000);
  // throw 'error';
  return '?';
}
async function getBanana() {
  await delay(2000);
  return '?';
}
// function getBanana(){
//   return delay(2000)
//   .then(()=> '?');
// }
// async function pickFruits() {
//   const applePromise = getApple(); // promise 만들면 바로 실행이 되니까 기다리고
//   const bananaPromise = getBanana(); // 기다리지 않고 바로 실행
//   const apple = await applePromise;
//   const banana = await bananaPromise;
//   return `${apple} + ${banana}`;
// }
// pickFruits().then(console.log); // 병렬 실행 - 그런데 복잡하게 이렇게 안한다
// 3. useful APIs ✨
function pickAllFruits() {
  return Promise.all([getApple(), getBanana()]).then(fruits =>
    fruits.join(' + ')
  );
}
pickAllFruits().then(console.log);

 

javascript>async>async.js

'use strict';
// async & await
// clear style of using promise :)
// 1. async
async function fetchUser() {
    // do network reqeust in 10 secs....
    return 'ellie';
}
const user = fetchUser();
user.then(console.log);
console.log(user);
// 2. await ✨
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
async function getApple() {
  await delay(1000);
  // throw 'error';
  return '?';
}
async function getBanana() {
  await delay(2000);
  return '?';
}
// function getBanana(){
//   return delay(2000)
//   .then(()=> '?');
// }
// async function pickFruits() {
//   const applePromise = getApple(); // promise 만들면 바로 실행이 되니까 기다리고
//   const bananaPromise = getBanana(); // 기다리지 않고 바로 실행
//   const apple = await applePromise;
//   const banana = await bananaPromise;
//   return `${apple} + ${banana}`;
// }
// pickFruits().then(console.log); // 병렬 실행 - 그런데 복잡하게 이렇게 안한다
// 3. useful APIs ✨
function pickAllFruits() {
  return Promise.all([getApple(), getBanana()]).then(fruits =>
    fruits.join(' + ')
  );
}
pickAllFruits().then(console.log);
// 먼저 따지는 것만 받아오고 싶으면
function pickOnlyOne() {
  return Promise.race([getApple(), getBanana()]);
}
pickOnlyOne().then(console.log);

만약 먼저 따지는 과일만 받아오고 싶다면 race API 이용하면 된다

저작자표시 비영리 변경금지

'컴퓨터 > Javascript' 카테고리의 다른 글

javascript 랜덤 타이핑, 순차 타이핑  (0) 2022.04.25
Javascript 코드깎는노인  (0) 2022.02.03
javascript 타이핑 효과  (0) 2022.01.03
jQuery  (0) 2021.12.23
javascript 그림슬라이드  (0) 2021.12.21

'컴퓨터/Javascript'의 다른글

  • 현재글Javascript 드림코딩 by 엘리

관련글

티스토리툴바