js
[JS] Fetch API를 활용한 비동기 통신 방법
Promise 기반으로 서버와 HTTP 통신을 할 수 있는 Fetch API에 대한 비동기 통신 예제입니다.
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Fetch API </title>
6 </head>
7 <body>
8 <div id="user"></div>
9 <script>
10 const userEl = document.getElementById('user');
11 const reqPromise =
12 fetch('https://api.github.com/users/learn-anything', {
13 headers: {Accept: 'application/json'},
14 method: 'GET'
15 });
16 reqPromise
17 .then(res => {
18 if (res.status >= 200 && res.status < 300) {
19 return res.json();
20 } else {
21 return Promise.reject(new Error(`Got status ${res.status}`));
22 }
23 })
24 .then(user => {
25 userEl.innerHTML =
26 `<img src="${user.avatar_url}" />
27 <br>0: ${user.login}, 71: ${user.html_url}`
28 })
29 .catch(error =>alert(error));
30 </script>
31 </body>
32 </html>10라인
Github의 사용자 정보를 추가할 영역을 <div>태그로 작성합니다.
11~15라인
Github jeado 사용자 정보를 가져오기 위해 fetch API를 사용하여 HTTP 요청을 보냅니다. fetch API는 첫 번째 인자로는 요청할 URL을 작성하고 다음으로 옵션 객체를 전달합니다. 옵션 객체에는 헤더와 HTTP 메소드 등을 정의할 수 있습니다. 여기선 Accept 헤더를 application/json으로 하는 GET 메소드 요청을 하도록 옵션을 정의했습니다.
16~23라인
요청에 대한 응답이 왔을 때 호출되는 콜백 함수를 then 메소드로 등록합니다. 콜백 함수는 응답 객체를 매개변수로 전달 받는데 응답 객체를 이용하여 응답 상태나 내용을 확인할 수 있습니다. 응답 객체의 status 속성은 상태 코드를 반환합니다. 그리고 json 메소드는 응답 본문을 JSON으로 파싱하여 처리된 결과를 Promise로 반환합니다. 여기선 상태 코드가 200 이상이고 300 미만이 아닐 경우 에러와 함께 Promise를 거절 처리하여 반환합니다(다음 then 으로 이어지지 않고 바로 catch로 전달되어 에러 처리가 됩니다).
24~28라인
앞의 Promise에서 반환한 응답 본문이 객체로 파싱되어 콜백 함수에 전달됩니다. user 객체의 속성을 이용하여 사용자 정보를 userEl 내부에 추가합니다.
29라인
에러가 발생할 경우 alert로 알려주도록 catch 처리를 합니다.
0 댓글