[JavaScript] fetch API 이해과 개념 / .then()

*생활코딩 - Ajax 강의내용을 바탕으로 필기한 내용

웹브라우저에서 JavaScript를 이용해서 웝서버에 접속하고 정보를 가져오는 방법을 말한다.

여러 방법 중 가장 최신 방법인 fetch API

---

1. 동기와 비동기 개념과 차이 

-동기방식 (Synchronous : 동시에 일어나는)

  : 요청과 그 결과가 동시에 일어난다는 약속으로, 바로 요청을 하면 시간이 얼마가 걸리던지 요청한 자리에서 그 결과가 주어진다. 

  : 소요시간이 1시간이 걸리든 10시간이 걸리든 결과가 나올때가지 기다렸다가 그 다음을 실행한다.

  

 -비동기방식 (Asynchronous : 동시에 일어나지 않는)

 : 동시에 일어나지 않는다는 약속으로, 요청과 결과가 동시에 일어나지 않는다.

 : 요청한 그 자리에서 결과가 주어지지 않음 

 

 * 동기와 비동기는 상황에 따라서 각각의 장단점이 있다. 

    동기방식은 설계가 매우 간단하고 직관적이지만 결과가 주어질 때까지 아무것도 못하고 대기해야 하는 단점이 있고,

    비동기방식은 동기보다 설계가 복잡하지만 결과가 주어지는데 시간이 걸리더라도 그 시간 동안 다른 작업을 할 수 있으므로 자원을 효율적으로 사용 가능 

 

—> fetch API는 비동기 방식이다.

---

2. fetch API 사용법, 요청과 응답

- fetch (‘ ~~’) : 서버에 접속해서 인자로 전달된 데이터를 가져온다. 위의 예제에서는 ‘CSS’데이터를 가져온다.

- 데이터를 서버에서 가져오는 작업이 완료되면 가져온 텍스트를 alert 창이 실행된다.        

 

[생활코딩]-Ajax

- fetch ( ) 로 서버에 데이터를 요청한다.

- fetch ( ).then(함수 );

 *.then 이란 ?

    서버에서 데이터를 가져오는 작업(응답)이 완료된 이후에 then의 인자에 들어가있는 함수가 실행된다.

---

3. fetch( ).then( ) 

예제의 코드를 해석하면, 서버에 접속하여 ‘html’의 데이터를 가져오는 것을 요청하고,

요청에 대한 응답이 완료되면 callbackme 함수를 실행한다.

동시에 console.log(1);, console.log(2);의 작업도 실행한다. --> 비동기방식

 

예제코드를 실행하였을 때의 결과는 아래와 같다.

-> 서버의 응답을 대기하는 동안에 console.log(1), console.log(2)의 작업이 우선적으로 실행되고, 응답이 완료된 이후에는 callbackme 함 수가 실행되어 콘솔창에 response end 가 출력되었다.

---

4. fetch API - response 객체

fetch API 가이드에 따르면 then에 삽입된 함수를 실행시킬 때, 함수의 첫번째 인자의 값으로 response의 객체를 가지면서 호출한다고 적혀져있다.

위의 예제코드를 실행 시,

response 객체가 콘솔창에 출력된다.

response객체의 여러 속성값 중 status 값을 확인하면 200으로 표시되어있다.

 

웹브러우저와 웹서버가 통신할 때, 웹서버가 응답을 할 때 정상적으로 파일을 찾았을 때는 서버가 응답하면서 200 이라고 알려준다.

200 은 정상적으로 통신에 성공했다는 약속이다.

 

반면에, 요청한 파일이 존재하지 않을 경우에는 서버가 웹브라우저한테 404를 알려준다.

404는 찾을 수 없다는 , not found 라는 약속이다.

 

* response 객체는 fetch를 통해서 요청했을 때 웹서버가 응답한 결과를 담고있는 객체데이터이며,

  객체 안에는 여러가지의 속성값을 통해서 서버와 통신 시 어떤한 상태로 통신이 이루워져있는지 알 수 있는 다양한 단서들이 들어있다.

---

5. fetch로는 데이터를 바로 사용할 수 없다.

fetch를 사용할 땐 두 단계를 거쳐야 한다.

먼저 올바른 url로 요쳥을 보내야하고, 

바로 뒤에 오는 응답에 대해 json()을 해줘야 하는 것 이다. 

json( ) 는 response 스트림을 가져와 스트림이 완료될 때까지 읽는다. 그리고 다 읽은 body의 텍스트를 Promise 형태로 반환한다.

 

아래의 코드는 현재날씨를 가져오기 위해서 fetch API를 활용해서 내가 직접 적용한 예시이다.

function getWeather(lat, lon) {
    fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`) 
    // 올바른 URL로 서버에 요청
    .then(function(response){ // 첫번째 인자는 response로 받는다 
        return response.json(); 
        // 요청에 대한 응답을 JSON형태로 파싱
    })
    .then(function(json) {
        const temperature = json.main.temp;
        const place = json.name;
        weather.innerHTML = `${Math.floor(temperature)}℃ ${place}`;
        //js데이터를 body에 보여준다 
    })
}

 

스트림, promise 의 정의에 대해서 완벽한 이해가 가진 않는다. 추후에 보다 더 개념공부를 추가적으로 해야겠다.