• Promise(ES6이상에서 가장 중요 필수중의 필수!)
• 비동기를 처리할 때 -> 보통은 종료 이벤트에 콜백함수를 이용해서 처리했는데 비동기속에 비동기속에 비동기식으로 프로그램 해야 하는 경우
• 콜백함수속에 콜백함수속에 콜백함수 식으로 코드가 구성되어 가독성이 현저히 떨어지는 문제가 발생
• 개발자들이 이를 콜백지옥(Hell Of Callback)이라 부르면서 강력하게 개선을 요구 Blue-bird에서 사용하던 것을 수입
• 처음에 많이 낯선데 , 다행인 건 개발자는 Promise를 만들 일 보다는 사용할 일이 더 많아서 사용만 잘해도 큰 문제는 없음
• Promise가 나와서 처음에 잠깐 개발자들이 오우 괜찮다 라고 하다가 역시 비동기가 많아지고 코드의 가독성이 떨어지는건 마찬가지다 라는 인식이 팽배
• 최종적으로 async, await 키워드가 등장(칭찬을 한몸에 받음)

Promise

function firstPromise(){
    return new Promise((resolve,reject)=>{
        resolve("약속이 잘 실행되었어용");
        reject("이건 다 나때문이야");
    })
}
firstPromise()
       .then((result)=>{
        console.log("넘어온 값 : ", result);
       })
       .catch((error)=>{
        console.error("Failed Cause", error);
       })
       .finally(()=>{
        console.log("Anyway");
       })

Promise + AJAX

//나의 두 번째 Promise
function secondPromise(){
    return new Promise((resolve,reject)=>{
        var xhr = new XMLHttpRequest();
        xhr.open("get","../AJAX/data.json",true);
        xhr.onreadystatechange = ()=>{
            if(xhr.readyState == 4 && xhr.status == 200){
                //완료되었을때
                resolve(xhr.responseText); // resolve를 이용해서 성공을 알림
                
            }
        }
        xhr.send();
    })
}
secondPromise()
       .then((result)=>{
        console.log("넘어온 값 : ", result);
       })
       .catch((error)=>{
        console.error("Failed Cause", error);
       })
       .finally(()=>{
        console.log("Anyway");
       })

Promise로 axios 만들기

//axios 만들기
const c_disp = document.querySelector("#disp");
const axios = {}; // axios라는 유명한 비동기 라이브러리가 있음 (namespace용)
//메소드 get 추가
axios.get = (p_url) =>{
    return new Promise((resolve,reject)=>{
        var xhr = new XMLHttpRequest();
        xhr.open("get",p_url,true);
        xhr.onreadystatechange = ()=>{
            if(xhr.readyState == 4 && xhr.status == 200){
                //완료되었을때
                resolve(xhr.responseText); // resolve를 이용해서 성공을 알림
            }
        }
        xhr.send();
    })
}
//펑션호출로 ajax를 편하게 사용할 수 있다.
axios.get("../AJAX/data.json")
    .then((result)=>{
        c_disp.innerHTML = result;
    })

axios.get("../AJAX/data.csv")
    .then((result)=>{
        c_disp.innerHTML = result;
    })

axios.get("../AJAX/data.xml")
    .then((result)=>{
        c_disp.innerHTML = result;
    })

Async, Await

// 최종적으로 async ,await 키워드가 등장 (칭찬을 한 몸에 받음. 베리 굳 아이디어!)
const c_disp = document.querySelector("#disp");

const axios = {}; 
axios.get =(p_url) => {
    return new Promise((resolve,reject)=>{
        var xhr = new XMLHttpRequest();
        xhr.open("get",p_url,true);
        xhr.onreadystatechange = ()=>{
            if(xhr.readyState == 4 && xhr.status == 200){
                resolve(xhr.responseText); 
            }
        }
        xhr.send();
    })
}

//async , await는 세트당, Promise와 관련  엄칭나게 중요, 이미 외국에선 엄청나게 사용되고 있음
async function myfunc(){
     let rslt = await axios.get("../AJAX/data.html");
     console.log(rslt);
}

myfunc(); // 이제 한번 불러 봅시당 // 뒤에
console.log("누가 누가 빠른가?"); // 먼저