Promise async/await

Promise는 세가지 상태를 가진다.

pending 비동기가 끝나기를 기다리는 상태
fulfiled 비동기 실행이 성공한 상태
rejected 비동기 실행이 실패한 상태

then, catch는 비동기, 동기 실행 중 어떤 것이이라도 리턴 가능

}).then(d=> 에서 d는 이전에 return 한 값

Promise.all()은 모든 프로미스가 fulfilled되길 기다리고, 하나라도 에러면 모든 프로미스를 중단
Promise.allSettled() 모든 프로미스가 settled되길 기다림
Promise.race() 넘겨진 프로미스 중 하나라도 settled되길 기다림
Promise.any() 넘겨진 프로미스 중 하나라도 fulfiiled되길 기다림

async/await

import React, { useState } from "react";
import axios from "axios";

function Snacks() {
  const [snacks, setSnacks] = useState([]);

  async function fetchData() {
    try {
        const res = await axios.get(`https://${window.location.hostname}:8190/data`)
        setSnacks(res.data)
    } catch(e) {
        console.log('asdf')
    }
  }
  
  //////위 함수는 axios async await을 사용
  //////아래와 위 함수 차이점 알기
  function fetchData() {
    fetch(`https://${window.location.hostname}:8190/data`)
        .then(res => res.json())
        .then(res => {
            // console.log(res)
            setSnacks(res)
        });
  }

다른 예

async function postCafe() {
    const newMenu = { id: id, item: item };

    try {
      await axios.post(
        `https://${window.location.hostname}:8190/data`,
        newMenu
      );
      setFail();
    } catch (e) {
      setFail("메뉴 등록에 실패했습니다.");
    }
  }