API 가져오기 자바스크립트 가져오기 API 소개

이 글은 최초로 attacomsian.com/blog에 발표되었다.
Fetch API는 브라우저에서 XMLHttp Request(XHR)와 유사한 비동기식 HTTP 요청을 보내는 promise-based JavaScript API입니다.XHR와 달리 간단하고 깨끗한 API로promises를 사용하여 서버에서 자원을 얻을 수 있는 더욱 강력하고 유연한 기능 집합을 제공합니다.
Fetch는 현재 기본적으로 표준화되어 있으며 IE를 제외한 모든 현대 브라우저가Fetch를 지원합니다. IE를 포함한 모든 브라우저를 지원하려면 프로젝트에 GitHub이 발표한 polyfill을 추가하면 됩니다.

API 사용
FetchAPI는 매우 간단합니다.URL을 fetch() 메서드에 전달하기만 하면 됩니다.

fetch('/js/users.json')
    .then(response => {
        // handle response data
    })
    .catch(err => {
        // handle errors
    });

검색할 자원의 경로를 매개 변수로 fetch()에 전달합니다.그것은 약속이 실현될 때 응답을 then()에 전달할 것을 되돌려줍니다.네트워크 장애 또는 기타 원인으로 인해 요청을 완료할 수 없는 경우 catch() 메서드는 오류를 차단합니다.

요청 가져오기
기본적으로 Fetch API는 비동기 요청에 GET 메서드를 사용합니다.Reqres REST API을 사용하여 GET 요청을 사용한 사용자 목록을 읽어들입니다.

fetch('https://reqres.in/api/users')
    .then(res => res.json())
    .then(res => {
        res.data.map(user => {
            console.log(`${user.id}: ${user.first_name} ${user.last_name}`);
        });
    });

위의 요청은 콘솔에서 다음 내용을 인쇄합니다.

1: George Bluth
2: Janet Weaver
3: Emma Wong

fetch() 방법을 사용하면 promise으로 돌아갑니다.promise가 되돌아오는 응답은 하나의 흐름 대상입니다. 이것은 우리가 json() 방법을 호출할 때 다른 promise로 되돌아오는 것을 의미합니다.json() 메서드를 호출하면 JSON의 응답이 기대됩니다.XML 응답이 필요한 경우 text() 메서드를 사용해야 합니다.

게시 요청
Axios과 마찬가지로 Fetch는 요청에 다른 HTTP 방법인 POST, PUT, DELETE, HEAD와OPTIONS를 사용할 수 있습니다.method 옵션에서 body 및 fetch() 매개변수만 설정하면 됩니다.

const user = {
    first_name: 'John',
    last_name: 'Lilly',
    job_title: 'Software Engineer'
};

const options = {
    method: 'POST',
    body: JSON.stringify(user),
    headers: {
        'Content-Type': 'application/json'
    }
}

fetch('https://reqres.in/api/users', options)
    .then(res => res.json())
    .then(res => console.log(res));

Reqres API는 ID와 생성된 타임스탬프가 포함된 본문 데이터를 전송합니다.

{  
   "first_name":"John",
   "last_name":"Lilly",
   "job_title":"Software Engineer",
   "id":"482",
   "createdAt":"2019-05-12T15:09:13.140Z"
}

요청 삭제
삭제 요청은 POST 요청과 매우 비슷해 보이지만 body은 필요하지 않습니다.

const options = {
    method: 'DELETE',
    headers: {
        'Content-Type': 'application/json'
    }
}

fetch('https://reqres.in/api/users/2', options)
    .then(res => {
        if (res.ok) {
            return Promise.resolve('User deleted.');
        } else {
            return Promise.reject('An error occurred.');
        }
    })
    .then(res => console.log(res));

오류 처리fetch() 방법이 약속을 되돌려주기 때문에 오류 처리가 쉽다.우리는 프로미스의 catch() 방법을 사용하여 요청 실행 기간에 던진 오류를 캡처할 수 있습니다.그러나 서버가 어떤 응답을 되돌려주든 요청이 서버에 도착하고 돌아오면 오류가 발생하지 않습니다.fetch()에서 반환된 약속은 HTTP 오류를 거부하지 않습니다. HTTP 응답 코드가 404 또는 500이라도 마찬가지입니다.
다행히 요청이 성공했는지 확인하려면response object의 ok 속성을 사용할 수 있습니다.

fetch('https://reqres.in/api/users/22') // 404 Error
    .then(res => {
        if (res.ok) {
            return res.json();
        } else {
            return Promise.reject(res.status);
        }
    })
    .then(res => console.log(res))
    .catch(err => console.log(`Error with message: ${err}`));

응답 대상fetch() 메서드가 반환하는 응답 객체에는 헤더, 상태 코드, 상태 메시지 등 비동기 호출에 대한 요청과 응답에 대한 정보가 포함됩니다.

fetch('https://reqres.in/api/users')
    .then(res => {
        console.log(res.headers.get('content-type'));
        console.log(res.headers.get('expires'));

        console.log(res.status);
        console.log(res.ok); // shorthand for `status` between 200 and 299 
        console.log(res.statusText);
        console.log(res.redirected);
        console.log(res.type);
        console.log(res.url);
    });

다음과 같은 몇 가지 옵션을 사용하여 Fetch API의 응답 바디에 액세스할 수 있습니다.

json() 주체를 JSON의 대상으로

반환

text() 바디를 문자열로

반환

blob() 솔리드를 Blob 객체로

반환

formData()FormData 객체로 주체

반환

arrayBuffer() 주체를 array Buffer 대상으로

반환
이 모든 방법들이 희망을 가져왔다.다음은 text() 방법의 예입니다.

fetch('https://reqres.in/api/unknown/2')
    .then(res => res.text())
    .then(res => console.log(res));

위에서 설명한 네트워크 호출 출력은 JSON 문자열입니다.

'{"data":{"id":2,"name":"fuchsia rose","year":2001,"color":"#C74375","pantone_value":"17-2031"}}'

비동기식/대기 가져오기 (& A)
Fetch는promise 기반의 API이기 때문에 우리는 더욱 진일보하여 최신의 ES2017 async/await 문법을 사용하여 우리의 코드를 더욱 간단하고 동기화할 수 있다.

const fetchUsers = async () => {
    try {
        const res = await fetch('https://reqres.in/api/users');
        if (!res.ok) {
            throw new Error(res.status);
        }
        const data = await res.json();
        console.log(data);
    } catch (error) {
        console.log(error);
    }
}

fetchUsers();

결론
이것이 바로 JavaScript를 사용하여 API를 가져오는 모든 사용자입니다.이것은 XMLHttpRequest에 대한 커다란 개선으로 사용하기 쉬운 인터페이스를 가지고 있어 자원을 얻기에 매우 적합하다(심지어 인터넷을 통해).모든 현대 브라우저는 Fetch API를 지원하므로 IE를 지원하려면 polyfill을 사용할 필요가 없습니다.
✌️ 나는 현대 자바스크립트, 노드를 썼다.js, Spring Boot 및 모든 웹 개발Subscribe to my newsletter, 매주 인터넷 개발 강좌와 프로그램을 받습니다.
이 문장처럼.너도 나를 따라갈 수 있다.