Asynchronous 함수 (비동기 함수)의 이해

Promise

• callback hell에 빠지지 않기 위해 Promise등장!
• new Promise( (resolve,reject) => {} ) 형태로 만들고 , .then .catch method를 통해 resolve 되었을때와 reject되었을 때의 결과 값을 지정해준다

    const getCoffee = new Promise((resolve,reject)=> {
      const rand = Math.random();
      if(rand < 0.5) {
      resolve()}
      else {
      reject()
      }
    })

• resolve면 아래가 .then method 가 실행됨

	getCoffee.then(()=> {console.log("yay I got coffee")})

• reject 면 아래가 .catch method 가 실행됨

	getCoffee.catch(()=> {console.log("no coffee :(")})

setTimeout 으로 Promise함수 실행하기

• 5초 후 Promise 함수를 아래와 같이 실행하게 한다.

      const getCoffee = new Promise((resolve,reject)=> {
        setTimeout(() => {
        const rand = Math.random();
        if(rand < 0.5) {
        resolve()}
        else {
        reject()
        }},5000)
      })

Promise 함수 return 하기(일반적인 사용법)

const getCoffeePromise = () => {
    return new Promise((resolve,reject)=> {
      setTimeout(() => {
      const rand = Math.random();
      if(rand < 0.5) {
      resolve()}
      else {
      reject()
      }},5000)
    })
};

-.then 과 .catch를 chain해서 작성할 수 있다.

  getCoffeePromise()
  .then(()=> {console.log("yay I got coffee")})
  .catch(()=> {console.log("no coffee :(")})

resolving/rejecting with values

• value를 넘겨줘서 그 조건에 따라 결과를 return 하게 할 수 있고, 보통 fetch request 나 http request라고 가정해 볼 수 있다.

const fakeRequest = (url) => {
      return new Promise((resolve,reject)=> {
        setTimeout(() => {
          const pages = {
            '/users' : [{id:1},{id:2}],
            '/about' : 'This is the about Page'
          };
          const data = pages[url];
          if (data) {
          resolve({status : 200, data})
          }
        else {
            reject({status : 404})}},1000)  
	 });
      };


 fakeRequest('/about')
  .then((res)=> {console.log('status code', res.status),
                console.log('Data', res.data)
                })
  .catch((res)=> {console.log("status code", res.status)})

axios

• HTTP request 하는 외부 library 이다. (import 해서 사용해야함)
• 기존에 fetch 함수로 API 호출 하는 법은 이전 프로젝트에서 여러번 다루어서, axios로 사용하는 방법도 알아보려 한다.
• fetch("") 이렇게 사용하였다면 axios를 axios.get("")로 사용한다고 보면 된다.
• fetch 처럼 promise 형태를 돌려받는 형식이고, fetch와는 다르게 자동으로 parse 해서 return 한다. (fetch는 .then후에 res.json() 하는 과정이 필요한데 axios는 자동으로 해준다)
• 오류일 때 자동으로 reject 되서 error가 실행된다.

    axios.get("https://~~~~")
      .then(res => {console.log(res.data)})
      .catch(err => {console.log(err)})

Async & Await

• callback과 .then을 헷갈리지 않고, API가 호출 될때 그 response를 사용할 수 있도록 사용할 수있는 쉬운 방법이다.
• async function을 사용하면 기본적으로 return 문을 promise 문으로 감싼다고 생각하면 된다.
• await은 async 안에만 사용할 수 있다.

async function greet () {
	return "Hello!!";
}

greet() 

호출하면 Hello가 바로 나오는게 아니라, Promise{<resolved> : "Hello!!"} 가 return 된다.

async function greet () {
	return "Hello!!";
}

greet().then((val => {'promise resolved with' , console.log(val)})

//promise resolved with "Helo!!" 가 출력된다           
             

• async 와 await 함께 사용하면 .then 이나 추가적인 callBack이 필요가 없다.

async function getPlanets () {
  const res = await axios.get('https://ddd');
  //axios.get()만하면 Promise 형태인데 await 앞에 붙여줌으로서 
  //javascript는 promise가 resolve 되면 그때 res에 값을 지정한다. 
  console.log(res.data)
}

Async function에서의 error handling

• try {} catch {} 사용

async function getPlanets() {
  try {
   const res = await axios.get('https://ddd');
  //axios.get()만하면 Promise 형태인데 await 앞에 붙여줌으로서 
  //javascript는 promise가 resolve 되면 그때 res에 값을 지정한다. 
  console.log(res.data)
  } catch (e) {
    console.log('In catch' , e);
  }
}

getPlanets()