[JavaScript] Asynchronous JavaScript : Promises, Async/Await and AJAX

* Callback hell 을 피하기 위해서 도입된 Promises 

 

* Promise 란? 

객체의 일종으로, 특정한 이벤트가 일어났는지, 않았는지에 대해서 keep track 한다. 

이벤트가 일어난 후에 어떤 것들이 실행되는지 결정한다. 

 

* Promise 의 상태 

Pending -> event happens -> settled / resolved -> fulfilled OR rejected 

 

        const getIds = new Promise(
            (resolve, reject) => {
                //callback function 
                setTimeout(() => {
                    // 성공한 경우
                    resolve([12,312, 123, 111]); 
                }, 1500); 
            }
        ); 
        //결과가 성공적이라면 출력한다. 
        //then 은 fulfilled promise 를 핸들링한다. 
        getIds.then(IDs => {
            console.log(IDs); 
        }); 

        //catch 는 에러의 경우 
        getIds.catch(
            error => {
                console.log('Error!!'); 
            }
        );

* resolve 는 성공적인 경우 호출되고, reject 는 에러인 경우 호출된다. resolve 가 되었을때는 결과를 then 이라는 함수에서 핸들링 할 수 있고, error 의 경우는 catch 함수 안에서 핸들링 하면 된다. 

 

From Promises to Async/Await 

//async 함수는 항상 Promise 를 리턴한다.

async function getRecipesAw(){
	//하나 이상의 await 함수를 가질 수 있다. 
    // 결과가 나올때까지 기다린다
    // Promise 가 fulfill 될 때 까지 기다림 
    const Ids = await getIDs; 
    console.log(Ids); 
    //그 다음 Id 를 활용해서 또 다른 정보 불러오기
    const recipe = await getRecipe(Ids[2]); 
    //또 다음 정보 불러오기 ... 
    const related = await getRelated('Jonas'); 
    
    return recipe; 
}
//sync 세계로 돌아감 
//const rec = getRecipesAw(); // this does not work!!! 
getRecipesAw().then(
	result => console.log(result); //then 을 사용해서 결과를 기다렸다가 출력한다.
);

* async 함수는 어차피 백그라운드에서 돌아가기 때문에 결과를 기다리는 것은 문제가 되지 않는다. 

* await 는 async 안에서만 사용할 수 있다. 

 

AJAX : Asynchronous JavaScript And XML 

API : Application Programming Interface 

 

Making AJAX Calls with Fetch and Promises

* 모던 웹 API Fetch

 

***Cross origin data sharing 

[밑의 방법은 현재 통하지 않음 ... ]

fetch('https://crossorigin.me/https://www.metaweather.com/api/location/2487956/')
.then(result => {
    console.log(result); 
    return result.json(); 
})
.then(
    data => {
        const today = data.consolidated_weather[0]; 
        console.log(`${data.title} / ${today.min_temp}`)
    }
)
.catch(
    error => {
        console.log(result); 
    }
); 

* Async / Await 로 변환하기 

async function getWeather(id){
	try{
      const result = await fetch (
          API_URL 
      ); 
      const data = await result.json(); 
      return data; 
     }catch(error){
     	alert(error); 
     }
}

getWeather(ID).then(
	data => {
    	dataLondon = data 
        console.log(dataLondon); 
    }
)