비동기) 콜백함수 / promise / async

YS_Study.log·2022년 1월 7일

node.js 비동기

node.js

목록 보기

2/2

비동기연산을 동기연산처럼 실행하는 방법 3가지

콜백함수, promise, asyncs

자바스크립트는 Web API연관된 함수들로 인해 순차적으로 실행이 안될 수있어서 콜백함수를 인자로 받아 실행해야 순차적으로 실행할 수 있다.

(개인적으로 async 패턴 최고!!)

콜백함수패턴

콜백함수를 활용하여 순차적으로 함수를 실행하는 방법
문제점 : 콜백지옥 발생 (EventLoof) 함수가 많아질 수록 코드가 옆으로 길어지고 복잡해짐
이미지출처

콜백지옥 해결을 위해 등장한 Promise, async

Promise 패턴

Promise 객체는 비동기 연산이 종료된 이후에 연산이 성공적으로 완료되었을때 또는 연산을 실패했을 때의 결과 값을 나타낸다. 최종 결과가 아닌, 미래의 어떤 시점에 결과를 제공하겠다는 '약속'(프로미스)을 반환한다.

promise 생성방법

promises는 class이기에 new 키워드로 객체를 생성한다. promise는 콜백함수를 인자로 받는데, 콜백함수는 두가지 콜백함수를 resolve, reject 인자로 갖는다.

resolve(성공): 기능을 정상적으로 수행해서 마지막에 최종데이터를 전달하는 콜백함수
reject(실패) : 기능 수행중 문제, 오류가 생기면 new Error를 사용하여 오류를 전달하는 콜백함수
-> new Error(에러오브젝트) : 에러가 일어난 사유를 명시한다.
염두할 점 : 새로운 propmise가 만들어 질때 전달한 콜백함수가 자동적으로 바로 실행된다.(예를 들어 불필요한 네트워크 통신을 할 수도있다.)

const promise = new Promise((resolve, reject) => {
  console.log("영서라는 사람의 데이터요청") // promise 생성과 동시 실행
  setTimeout(()=>{
    resolve('성공, 영서데이터 조회')
  	reject(new Error('실패, 영서의 데이터가 없어요'));
  }, 2000);
});

promise 사용방법

.then(성공시 전달된 값) : promise 실행이 성공했다면 .then의 매개변수로 resolve(성공시 전달되는 값)을 받아온다.
.catch : promise 실행이 실패했다면, .catch(매개변수)로 reject(실패시 전달되는 값)을 받아온다.
.finally : 성공, 실패랑 상관없이 마지막에 무조건 출력한다.

promise
  .then(data => {
    console.log(data) 
  })
  .catch(err => {
    console.log(err)
  })
  .finally(() => {
     console.log("끝")
  });

Promise의 상태

프로미스 상태를 나타낸다.

pending(대기): 아직 대기중~ 비동기 처리 연산이 아직 완료되지 않은 초기 상태.
fulfilled(이행): 완료! 비동기 처리 연산이 성공적으로 이행한 상태 (성공,완료됨)
rejected(거부): 실패..! 비동기 처리 연산이 실패한 상태 (실패,오류)

프로미스기능 성공예시

-> pending(대기상태), resolve(성공),.then(성공), fulfilled(이행상태)

프로미스 객체를 생성하고 실행 시키지 않은 상태 pending(대기) 출력
resolve(데이터) 프로미스 기능이 수행완료하면 -> .then(데이터)을 이용하여 비동기 처리 연산을 실행한 데이터 출력
연산이 완료되면 성공상태 fulfilled 가 출력

예시) 프로미스 기능실패예시

-> pending(대기), reject(실패),.catch(실패), rejected(거부상태)

프로미스 객체를 생성하고 실행 시키지 않은 상태 pending(대기) 출력
reject(에러) 프로미스 기능이 실패하면-> .catch(애러)를 이용하여 전달받은 에러 이유 출력
연산이 완료되면 성공상태 fulfilled가 출력

Promise Chaining

Promise Chaining : 여러개의 리턴되는 promise를 연결하여 실행하는 것이다.
// 아직 수정중

async await 패턴

promise패턴을 async, await키워드를 이용하여 동기적인 처리연산처럼 작성하는 방법이다.

키워드 2가지

async : 필수 function()앞에 async키워드 작성하여 비동기 함수를 async 함수로 만든다. await 키워드를 실행하는 함수이다.
await: 웹 API를 포함하여 Promise를 반환하는 함수를 호출할 때 사용한다.

일반 함수 => async 함수로 만든다면?

일반함수는 함수 요청 리턴값 반환 VS async 함수는 코드가 Promise를 반환한다.

async await 사용하는 방법

// 일반적인 자바스크립트 처럼 동기적으로 읽을 수 있는 코드!

// 딜레이 시키는 츠로미스 함수는 일부로 따로 생성해줌
// (코드가 간결해지고 가독성이 높아진다.)
function delay(ms) {
	return new Promise(resolve => setTimeout(resolve,ms))
}
async function namePromise1 () {
  await delay(1000)   // 1초 기다렸다가 프로미스 실행이 성공 했다면 .then 실행
  return "지"  // "지"를 출력한다.
};
async function namePromise2 () {
  await delay(1000)
  return "영서"
};
// async 힘수 프로미스 실행값을 각 변수에 담아주고 사용할 수 있다.
async function fullName () {
  console.log("영서라는 사람의 데이터요청") // promise 생성과 동시 실행된다.
 let firstName = await namePromise1() // 프로미스 실행완료값 전달 "지"
 let lastName2 = await namePromise2() // 프로미스 실행완료값 전달 "영서"
  return [`${firstName}${lastName2}`] // ["지영서"]
};        
fullName ().then(console.log)