fetch) fetch란? (Response.json(), 정보 추출하기)

안녕하세요, 코린이의 코딩 학습기 채니 입니다.

 

개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다.

---

fetch

- XMLHttpRequest의 callback 방식을 개선해 Promise를 통한 then절에서 응답 결과를 처리할 수 있음

 

HTML 코드

<button id="btn1">fetch 기본</button>

 

Javascript 코드

btn1.onclick = () => {
    console.log(
        fetch(USER_URL)
    )
};

Promise 객체가 출력되는 것을 확인할 수 있으며, Response를 리턴하므로 then절로 callback을 전달하게 되면 Response가 출력될 것입니다.

 

btn1.onclick = () => {
    console.log(
        fetch(USER_URL)
        .then((response) => {
            console.log(response)
        })
    )
};

Response 객체가 출력되는 것을 확인할 수 있습니다. 하지만 Response 객체로만은 실제 데이터들을 뽑아낼 수 없습니다.

그 이유는 실제 응답 데이터를 받기 시작할 때 이행처리가 되기 때문에 결과를 바로 확인할 수 없습니다.

 

 

실제 내용 추출하기

Response.json()

- message body에 적힌 부분을 추출하는 promise가 한 단계 더 필요!

const USER_URL = "https://asia-northeast3-focal-elf-326215.cloudfunctions.net/user";    // google cloud function

btn1.onclick = () => {
    console.log(
        fetch(USER_URL)
        .then((response) => {
            console.log(response);
            return response.json();
        })
        .then((data) => console.log(data))
    )
};

실제 데이터가 잘 출력되는 것을 확인할 수 있습니다.

실제 데이터를 확인하기 위해선 Response의 json() 메소드를 사용해줘야 합니다.

(Response의 body 부분 하위에 데이터가 담겨있지만 열람 불가한 출력 스트림만 확인이 가능!!)

 

 

정보 가져오기

① user 정보 가져오기

② 1번의 user 아이디로 github 사용자 정보 가져오기

③ 2번의 사용자 정보 중 avatar_url로 img 태그 생성하기

④ 3번 이미지가 로딩 완료되면 메세지 출력하기

 

HTML 코드

<button id="btn2">avatar render</button>
<div class="img-wrapper"></div>

 

CSS 코드

<style>
.img-wrapper img {
    margin: 10px;
    width: 300px;
    border-radius: 50%;
    box-shadow: 5px 5px 10px 5px lightgray;
}
</style>

 

Javascript 코드

const USER_URL = "https://asia-northeast3-focal-elf-326215.cloudfunctions.net/user";    // google cloud function
const GITHUB_URL = "https://api.github.com/users/";

btn2.onclick = () => {
    fetch(USER_URL)
        .then((response) => response.json())
        .then((user) => {
            console.log(user);
            const {id} = user;
            return fetch(`${GITHUB_URL}${id}`);
        })
        .then((response) => response.json())
        .then((githubUser) => {
            console.log(githubUser);
            const {avatar_url} = githubUser;
            return loadUserImg(avatar_url);
        })
        .then(() => console.log('이미지 로딩 완료!'))
};

const loadUserImg = (src) => {
    const imgWrapper = document.querySelector(".img-wrapper");

    return new Promise((resolve) => {
        const img = document.createElement("img");
        img.src = src;
        img.onload = () => resolve();
        imgWrapper.append(img);
    });
};