JavaScript _개념정리/비동기_Promise, async/await #2/3

1편에 이어서 Promise Chaining , Promise all, /async/await에 대해 학습해 봅시다!!!

---

# Promise Chaining

Promise의 특징중 하나인 Chaining은 여러 개의 프로미스를 연결하여 사용할 수 있습니다! 후속 메서드 then()을 호출하고 나면 새로운 프로미스 객체가 반환됩니다. 

 

여기서 중요한 포인트는 Chaining을 할때 then() 메서드를 통해서 값을 바로 전달 하여 연결할수가 있고 혹은, return을 통해 Promise를 전달해서 사용 할 수 있습니다.

 

//Promise chaining 
const testPromise = new Promise(function(resolve, reject){
  setTimeout(()=>{
    resolve(1);
  }, 1000);
})
.then((data1) => {
  console.log(data1); // 1
  return data1 + 10;
})
.then((data2) => {
  console.log(data2); // 11
  return data2 + 20;
})
.then((data3) => {
  console.log(data3); // 31
});

// Promise.all 기본 사용법
 
const promise1 = Promise.resolve(5);
const promise2 = "데이터";
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 2000, '2초뒤 결과출력');
});
 
Promise.all([promise1, promise2, promise3]).then((data) => {
  console.log(data);
});
 
// [5, "데이터", "2초뒤 결과출력"]

 

Promise.all()의 핵심 포인트는 9번줄 입니다. 인자를 배열로 받아서 그안에 데이터를 넣고 후속처리 메서드 then을 통해서 값을 출력합니다! 여기서 then안에 있는 data인자는 변수 promise1 ~ 3의 데이터 요소를 순회해서 출력했다고 이해하면 됩니다!!!

 

Promise.all()은 꼭 비동기처리가 된 프로미스 객체를 넣어야 의미가 있습니다!

---

# async & await

async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법입니다! 이문법을 쓰는 이유는 프로미스도 골백지옥처럼 체이닝을 계속 하다보면 코드의 가독성이 떨어집니다. 그래서 async와 await는 Promise를 좀더 간결하고 동기적으로 실행되는것 처럼 보이게 만들어 줍니다!

 

나중에 서버API , url Data 등 다양한 데이터 정보를 인문법을 사용하면 효율적으로 코드를 작성할수 있고 편합니다! 꼭 알아두면 좋은 친구들이기에 꼭 숙지 합시다!!

 

// async 사용법
 
// 1. 함수 선언식
async function fetchUser() {
  return 'joycoding';
}
 
// 2. 함수 표현식
const fetchUser = async function() {
  return 'joycoding';
};
 
// 3. 화살표 함수
const fetchUser = async () => {
  return 'joycoding';
};
 
// fetchUser().then(data => console.log(data)); // 함수로 바로 호출
const user = fetchUser(); // 변수에 할당해서 호출
user.then(data => console.log(data));
console.log(user);  // 'joycoding'
 

 

여기서 async의 위치를 주목해야 합니다!! async는 무조건 함수명 앞에 위치해야 사용 할수 있습니다!!! 무조건 기억 합시다!!! 그렇다면 await는 어떻게 써야 될까요? 다음 아래 예제를 통해 이해해봅시다!!!

 

// 일반적인 방법
 
function joycoding() {
  return new Promise((resolve, reject) => {
    let data = [3,6,9];
    resolve(data)
  });
}
 
joycoding().then((numData)=>{
  console.log(numData)
})

// async & await 사용
 
function joycoding() {
  return new Promise((resolve, reject) => {
    let data = [3,6,9];
    resolve(data)
  });
}
 
async function result() {
  let numData = await joycoding();
  console.log(numData); 
}
 
result()  // [3,6,9]

 

10번줄 부터 다름을 느꼈을 겁니다!!! 여기서 async는 함수명 앞에다 붙여서 사용하고 joycoding()함수 앞에 await를 붙여서 데이터를 출력한 것을 확인 할 수 있었습니다! 여기서 주의 할점은 await는 무조건 비동기 처리 한 프로미스 객체를 반환해야 await가 의도적으로 동작합니다!! 꼭 기억 합시다!!!

 

---

여기까지가 Promise Chaining , Promise all, /async/await에 기본적인 개념입니다! 다양하게 응용하고 다른 메서드도 많이 있으니 꼭 검색하면서 공부하면 좋을것 같습니다!!! 추가적으로 아래 코드를 활용해서 연습해도 좋을 것 같습니다!!!

 

// 체이닝 연습
const test1 = new Promise((resolve, reject) =>{
  setTimeout(()=>{
    resolve({ test_1 : "test1 입니다"})
  },1000)
});
 
const test2 = new Promise((resolve, reject) =>{
  setTimeout(()=>{
    resolve({ test_2 : "test2 입니다"})
  },3000)
});
 
test1.then( (result1) =>{
    console.log("test1 = " + result1.test_1);
    return test2 
}).then((result2)=>{
    console.log("test2 = " + result2.test_2)
});
 
// 체이닝을 프리미스 올로 
Promise.all( [test1, test2] ).then((result)=>{
  console.log(result[0].test_1)
  console.log(result[1].test_2)
})
 
 
// 프로미스 올 에러 처리
const test1 = new Promise((resolve, reject) =>{
  setTimeout(()=>{
    resolve({ test_1 : "test1 입니다"})
  },1000)
});
 
const test2 = new Promise((resolve, reject) =>{
  setTimeout(()=>{
   reject("error error")
  },3000)
});
 
Promise.all( [test1, test2] ).then((result)=>{
  console.log(result[0].test_1)
  console.log(result[1].test_2)
}).catch(err =>{
  console.log(err)
})

 

 

참고자료

https://joshua1988.github.io/web-development/javascript/promise-for-beginners/

자바스크립트 Promise 쉽게 이해하기

https://poiemaweb.com/es6-promise

Promise | PoiemaWeb

https://learnjs.vlpt.us/async/01-promise.html

01. Promise · GitBook

https://javascript.info/async-await

Async/await

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

Promise.all() - JavaScript | MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

Promise - JavaScript | MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Using_promises

Using promises - JavaScript | MDN