axios vs ajax, promise vs async

async , promise 둘다 js에 비동처리에 관한 방법이다 요즘 async가 편하기에 async를 많이 선호한다고 하던데 두가지 방법에 대해 다 적어보려고합니다...

맞다 비동기처리는 -> 특정 코드의 실행이 완료될때까지 기다리지않고 다음을 실행하는 것이다.

promise

먼저 promise를 적어보겠습니다.
prmoise는 약속이다 서버에서 데이터가 넘어오는 것을 기다려줄게, 약속할게 머 이런 것이다..
이름부터 약속한다..

fuction getData() {

    return new Promise(function (resolve, reject) {
        axios.get(url)
            .then(function (response) {
                resolve(response.data);
                });
   });

   // 이후 resolve로 넘겨준 것이 data로 넘어 오게 하겠습니다.. 
   getData().then(function(data) {

           for(var item of data) {
            total += item.price;
         }

  });

위를 사용하는 이유는 기다려주지않고 처리하면 넘어온 데이터도 없는데 없는 데이터를 가지고 있는 상태가 되어버리기때문입니다..

여기서 then은 무엇이냐? getData의 실행이 끝나면 실행 되는 것이 then이다..

async

async는 함수 앞에 async만 붙여주면된다 -> async와 await는 한몸이다...

async function getData2() {
    return (await axios.get(url)).data;
}

// await는 함수 안에서 해줘야합니다..

 async function calculateSum() {

            //server를 통신 하는 것은 getData2는 기다려줘야한다 
            var data = await getData2();

            var total = 0;

            for(var item of data) {
                total += item;
            }

            console.log(total);
        }