[자바스크립트]자바스크립트 -Today I'm Learned (3)"동기 vs 비동기 함수"

- 오늘 학습한 내용.

 callback 함수 : 다시 부르는 함수.
 해당 값을 조건을 제공하여, 특정조건이 구현되면 작동하는 함수이다.

주로 setTimeout 함수를 이용하여, 시간조건 등을 사용.

 

동기 문법

1,2,3의 순서대로 작동하는 방식이다.

.then, .catch등으로 사용할 수 있다.

 

비동기 문법

1,2,3을 순서 상관없이 그냥 작동하는 방식이다.

쓸데없이 기다릴 필요가 없어 선호되는 방식.

 

Promise

state : pending(작동 중) → fulfiled or rejected

 

1. Producer

// 새로운 promise 함수를 생성할때, 그 함수는 자동적으로 작동한다.
// 즉, 클릭시 발생하는지 여부를 확인해야한다.
const promise = new Promise((resolve, reject) => {
 // 무거운 일을 할때 쓴다.
 console.log("어떤 무언가");
 setTimeout(() => {
   resolve('harry');
 }, 2000);
 reject(new Error('no network'));
});

 

2. 컨슈머 : then, catch, finally

promise
  .then(value => {
    console.log(value);
   })
  .catch(error => {
    console.log(error);
  }_
  .finally(() => {
    console.log('finally');
  });

---

기존에 콜백함수의 지옥(콜백지옥)을 대체하기 위해서 promise가 나왔다.

Promise를  연계해서 쓰다보면 callback함수가 → 단순히 promise로 대체된 것뿐인 상황이 된다.

그렇기에 나온 것이 async, await이다.

 

promise를 사용할때가 있고, async, await을 쓸때가 있다.

어느 것이 나쁜 것이 아니라 그냥 중첩구조에서 가독성을 위해서 async가 도입된것일뿐이다.

 

1. async === promise

func fetchUser() => {
  return new Promise((resolve, recject) => {
   resolve('fetch');
  });
}

const user1 = fetchUser();
user1.then(console.log);
console.log(user1);

//promise의 사용방법이다.
//async를 적용해보자.

async func fetchUser() => {
    return 'fetch';
}

const user1 = fetchUser();
user1.then(console.log);
console.log(user1);

 

2. await

func delay(ms) {
 return new Promise(resolve => setTimeout(resolve, ms));
}

async func getApple() {
 await delay(3000);
 return 'apple'
}

async func getBanana() {
 await delay(3000);
 return 'banana'
}

async func pickUpFruits() {
 const apple = await getApple();  // 이미 ms로 3000초를 줬기에 인자로 따로 줄 필요가 없다.
 const banana = await getBanana(); // 사과와 바나나를 다 불러질때까지(총 6초) 기다린 후에 리턴한다.
 return `${apple} + ${banana}`;
}

pickUpFruits().then(console.log);


// 비동기 처리 적용.
async func pickUpFruits() {
 const applePromise = getApple(); // promise를 설정하면 해당 코드는 바로 작동되기때문에 6초→3초로 바뀐다.
 const bananaPromise = getBanana();
 const apple = await applePromise  
 const banana = await bananaPromise 
 return `${apple} + ${banana}`;
}

// 이보다 쉽게 Promise api 사용방법.
// .all을 통해서 두개를 동시에 호출하여, 작동되게 한다.
func pickUpAllFruits() {
  return Promise.all([getApple(), getBanana()])
  .then(fruits => fruits.join('+'));
}

pickUpAllFruits().then(console.log);


// 두개 중 어느것이 먼저 나올것인지 .race를 통해서 먼저 도출되는 것을 리턴시키는 메소드.
func pickOnlyOne() {
  return Promise.race([getApple(), getBanana()]);
}

pickOnlyOne().then(console.log);