promise 와 async & await

callback 함수를 정리 할 때 비동기 처리에 관한 내용도 알아보았고 더 나아가 비동기 작업을 조금 더 깔끔하게 처리하는 promise 대해 알아보려한다.

promise 는 자바스크립트 비동기 처리에 사용되는 객체로 주로 서버에서 받아온 데이터를 표시하려고 할 때 사용한다.

promise 는 3가지 상태 중 하나를 가지고 있다.

• 대기(pending): 이행하지도, 거부하지도 않은 초기 상태.
• 이행(fulfilled): 연산이 성공적으로 완료됨.
• 거부(rejected): 연산이 실패함.

promise 를 생성하고 연산이 성공적으로 완료하면(fulfilled) then 안에 있는 callback 함수 실행되고 연산이 실패하면(rejected) catch 안에 있는 callback 함수가 실행된다.
또한 위 그림과 같이 리턴 값이 promise 형태로 나오기 때문에 또 다시 then 과 catch 를 이어서 사용 가능하다.

pormise 생성

promise의 생성자는 두 개의 인자(resolve, reject)를 둔 콜백함수를 인자로 받는다
promise는 생성 직후 대기(pending) 중인 상태이며 resolve 와 reject 는 각각 이행(fulfilled), 거부(rejected) 상태로 만드는 메서드 이다.

// 생성부분
const sucess= new Promise(function(resolve, reject) {
    resolve('promise 성공')
})
// const sucess = Promise.resolve('promise 성공')

const fail= new Promise(function(resolve, reject) {
    reject('promise 실패')
})
// const sucess = Promise.reject('promise 실패')

//활용 부분
sucess.then(value => {
    console.log(value)        // promise 성공
})

fail.catch(value => {
    console.log(value)        // promise 실패
})

함수로 리턴하는 방식

const promiseTest = () => {
    return new Promise(function(resolve, reject) {
        resolve()
    })
}

promiseTest().then(()=>{
    console.log('함수로 프로미스 선언, 생성시기를 정해줄 수 있는 방법 !')
})

then, catch, finally

위에도 언급했지만 promise 상태에 따라 처리 해주는 메서드들을 활용 할 수 있다.

• then : promise 에서 연산이 성공적으로 종료되면 인자로 들어온 callback 함수 를 실행
• catch : promise 에서 연산이 실패하면 끝나면 인자로 들어온 callback 함수 를 실행
• finally : 마지막에 진행할 작업이 있을 때 사용하고 인자로 들어온 callback 함수 를 실행
  

const promise1 = new Promise((resolve, reject) => {
  resolve()
});

promise1
  .then(() => {
    console.log("then");
  }).catch(() => {
    console.log("catch");
  }).finally(()=>{
    console.log("마지막으로 실행")
  });

관련 메서드

• Promise.all() : 순회 가능한 객체에 주어진 모든 promise 가 이행한 후, 혹은 promise 가 주어지지 않았을 때 이행하는 promise 를 반환합니다.
• Promise.allSettled() : 주어진 모든 promise 를 이행하거나 거부한 후, 각 promise 에 대한 결과를 나타내는 객체 배열을 반환합니다.
• Promise.any() : 주어진 모든 promise 중 첫 번째로 이행된 promise 만 반환한다.
• Promise.race() : 주어진 모든 promise 중 가장 먼저 완료된 것의 결과 값 (이행이나 거부)에 따른 promise 를 반환한다.
  

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

async & await

---

async 와 await 는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법으로 기존의 비동기 처리 방식인 callback 함수 와 promise 의 단점을 보완하고 코드의 가독성을 높여준다.

사용법

함수에 async 키워드를 앞에 붙이고 그 안에서 비동기 처리 메서드 앞에 await 키워드를 앞에 붙여 사용한다.

const promiseTest = () => {
    return new Promise((resolve,reject)=>{
        setTimeout(() => {
            resolve(1000);
        }, 3000);
    })
}

const asyncTest = async () => {
    let data = await promiseTest()
    console.log('data : ' + data)
}

asyncTest()

• 비동기 처리 메서드가 꼭 promise 객체를 반환해야 await 가 의도한 대로 동작합니다.
• 비동기 처리 코드로 많이 등장해 나와서 헷갈릴 수 있지만 setTimeout() 은 promise 를 반환하지 않는다.

참고자료

---

https://velog.io/@ljinsk3/JavaScript-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%B2%98%EB%A6%AC-Promise-%EA%B0%9D%EC%B2%B4
https://elvanov.com/2597