분류 javascript

AJAX 및 API

컨텐츠 정보

  • 조회 15 (작성일 )

본문

async / await 및 promise를 사용하면 API에서 데이터를 가져올 때 매우 유용합니다.


API 란 무엇입니까? 


API는 많이 사용되는 용어입니다. Application Programming Interface의 약자이며 다소 표준화 된 절차로 기계와 대화하는 방법입니다.


어떤 유형의 앱을 빌드 할 때 해당 앱인 클라이언트는 어딘가에 있는 서버와 대화해야 합니다. 웹 앱, 모바일 앱 등을 빌드 하는지 여부는 중요하지 않습니다. 웹 앱을 빌드 하는 경우 앱 (클라이언트)은 웹 브라우저가 됩니다.


예를 들어, 트위터 앱이 있다면 가장 최근 트윗을 풀다운하고, 트윗과 같은 트윗을 보내거나, 트윗에 답장 할 수 있어야 합니다. 모든 기능은 API라고하는 것을 기반으로 합니다.


공개 웹 사이트가 있는 대부분의 서비스는 API를 통해 데이터와 기능을 표시하려고 합니다.


개발자로서 우리의 많은 작업은 API에서 데이터를 가져 오는 것입니다.


다른 서비스로 이동하여 해당 데이터를 표시하기 위해 애플리케이션으로 가져 오는 방법부터 살펴 보겠습니다.


두 가지 예를 살펴 보겠습니다. 하나는 피자이고 다른 하나는 GitHub입니다.


API에서 데이터를 가져 오는 가장 널리 사용되는 방법은 URL https://api.github.com/users/wesbos에서 사용되는 URL에서 "wesbos"를 사용하는 것과 같이 일부 관련 데이터와 연결할 수 있는 URL을 사용하는 것입니다. 아래 Github 예제.


JSON 


아래 예에서 API는 JSON이라고 하는 것으로 응답합니다.


example JSON payload 

JSON에 대해 몇 번 논의했습니다. JavaScript Object Notation의 약자이며 서버와 클라이언트간에 JavaScript 개체를 전송하는 좋은 방법입니다.


브라우저를 열고 다음 끝점으로 이동합니다. https://api.github.com/users/wesbos


이는 Github API의 일부입니다.


참고 : 비디오에서 Wes는 JSONViewer라는 JSON 파일을 보다 쉽게 ​​볼 수 있도록 하는 크롬 확장을 사용하고 있습니다. JSON 또는 API로 작업하려는 경우 다운로드하는 것이 좋습니다.


반환 되는 것은 객체처럼 보이지만 실제로는 문자열입니다.


해당 문자열을 콘솔에 복사하고 data라는 변수에 할당하면 로그를 기록하고 콘솔에서 액세스 할 수 있습니다.


browser console output of 'data' 


보시다시피 거대한 줄입니다.


typeof 데이터를 수행하면 문자열을 반환합니다.


즉, 그러한 회사를 반환 한 데이터에서 속성 중 하나를 가져 오려면 data.company를 사용하려고 하면 문자열일 뿐이므로 undefined를 반환합니다.


서버는 문자열을 반환하며,이를 JavaScript 객체로 되돌리는 것은 개발자에게 달려 있습니다.


이를 위해 JSON.parse()에 데이터를 래핑하면 적절한 객체가 반환되며,이를 변수에 저장할 수 있습니다.


const dataObj = JSON.parse(data); 


이제 JavaScript 점 표기법을 사용하여 객체 속성에 액세스 할 수 있습니다.


browser output showing accesing JSON object properties 


많은 API를 사용하여 서버에서 자신의 데이터를 가져올 수 있습니다. 이를 허용하지 않는 많은 경우와 API 키가 필요한 경우가 많습니다 (나중에 설명). 지금은 인증이 필요 없는 개방형 API로 작업 할 것입니다.


플레이 그라운드 폴더에서 apis.html이라는 새 파일을 만듭니다.


AJAX 


이 비디오에서 우리가 하는 일을 종종 AJAX (Asynchronous JavaScript and XML의 약자)라고 합니다.


우리는 비동기가 무엇인지 JavaScript가 무엇인지 알고 있지만 XML이 무엇인지 모를 수 있습니다.


XML은 데이터를 수신 할 수 있는 또 다른 방법이며 HTML과 비슷하지만 HTML이 아닙니다.


XML은 과거에 사용되었지만 일반적으로 API를 통해 데이터를 전송하는 기본 방법으로 JSON으로 대체되었지만 여전히 발생할 수 있습니다. Wes는 경력 12 년 동안 XML 작업을 한 번만 수행해야 했습니다.


사람들이 "AJAX"라고 말하는 것은 API에서 데이터를 가져 와서 페이지에 표시하는 것을 의미합니다.


우리가 만든 HTML 페이지를 열고 body 태그 내에 기본 HTML과 스크립트 태그를 추가합니다.

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>APIs</title> <link rel="stylesheet" href="../base.css"></head><body> <script> </script></body></html>



가장 먼저 할 일은 URL을 변수에 저장하는 것입니다. 필수는 아니지만 훨씬 쉽습니다.


변수 끝점의 이름을 지정합니다.


끝점은 데이터를 얻기 위해 방문해야 하는 URL에 대한 멋진 단어입니다.


const endpoint = "https://api.github.com/users/wesbos"; 


해당 데이터를 얻기 위해 JavaScript 내에 존재하는 fetch를 사용합니다. (사용되는 다른 라이브러리, 특히 Axios가 있지만 가져 오기 라이브러리는 매우 훌륭하며 모든 브라우저에 내장되어 있습니다).


해당 데이터를 가져 오기 위해 fetch를 호출 한 다음 호출하려는 엔드 포인트에 전달하면 Promise가 반환됩니다.


const wesPromise = fetch(endpoint);console.log(wesPromise);


browser console showing output of a promise 


작동하는지 확인하려면 네트워크 탭으로 이동하여 페이지를 새로 고칠 수 있습니다. 그렇게 하면 페이지에서 발생한 모든 요청이 표시됩니다. 이를 통해 요청이 전송 된 시기와 데이터와 함께 반환 된 시기를 확인할 수 있습니다.


browser network tab showing preview response 


해당 데이터를 JavaScript로 다시 가져 오려면 어떻게 해야 합니까? .then()을 사용할 수 있습니다.


그 전에 먼저 빠른 오류 처리기를 만들어 보겠습니다.


function handleError(err) { console.log("OH NO!"); console.log(err);}


해당 데이터를 가져 와서 콘솔에 기록합니다. 👇

const endpoint = "https://api.github.com/users/wesbos";const wesPromise = fetch(endpoint);wesPromise .then((data) => { console.log(data); }) .catch(handleError);


browser console showing response output 


이제 페이지를 새로 고치면 더 이상 약속(promise)을 받지 못한다는 것을 알 수 있습니다. 대신 위에 표시된 응답 객체를 얻습니다 .👆


응답은 유형이 CORS라는 것을 알려줍니다. 응답 객체에도 이러한 모든 속성이 있지만 데이터는 어디에서 얻습니까?


헤더 및 본문과 같은 속성을 확장하면 찾을 수 없습니다.


browser console showing reponse output with body expanded 

보시다시피 데이터를 찾을 수 없습니다.


데이터에 액세스하기 전에 수행해야 할 또 다른 단계가 있습니다.


지금은 데이터가 브라우저로 스트리밍 되고 변수 응답에 할당되었습니다. 이 시점에서 데이터는 완전히 다운로드 되지 않았으며 데이터 유형을 알 수 없습니다.


fetch API는 JSON, 이미지 또는 원시 텍스트 등 모든 유형의 데이터를 가져 오는 데 사용할 수 있습니다. 반환 된 데이터의 응답 유형을 가정하지 않습니다.


실제로 데이터를 얻으려면 다운로드가 완료된 후 데이터를 JSON에서 JavaScript 개체로 변환하도록 브라우저에 지시해야 합니다.


browser console showing the prototype functions of a api response object 


응답 객체의 프로토 타입을 살펴보면 응답에 여러 메소드가 있음을 알 수 있습니다.


우리의 경우 json()을 사용하고 싶습니다. 또 다른 promise를 반환하는 response.json()을 반환합니다.


wesPromise .then((response) => { return response.json(); }) .catch(handleError);


실제 데이터를 얻으려면 다른 .then()에 연결 한 다음 데이터를 기록 할 수 있습니다.


페이지가 새로 고쳐지면 잠시 후 전체 개체가 콘솔에 기록 된 것을 볼 수 있습니다. response.json()이 처리하므로 데이터에 대해 JSON.parse()를 실행할 필요가 없습니다.


기억하세요 : fetch를 사용할 때 실제로 데이터를 얻으려면 이중 약속을 사용해야 합니다. 첫 번째 promise는 응답을 받고 두 번째 promise는 응답을 받아 JSON으로 변환합니다.


이제 가져온 데이터에서 정보를 기록 할 수 있습니다.


wesPromise .then((response) => { return response.json(); }) .then((data) => { console.log(data); console.log(data.blog); console.log(data.name); console.log(data.location); }) .catch(handleError);


browser console outputting data from an api response 


계속해서 사용자에 대한 정보를 표시하겠습니다.


"user"클래스가 있는 HTML에 대한 단락 태그를 입력 한 다음 스크립트 태그에서 선택합니다.


<body> <p class="user"></p> <script> function handleError(err) { console.log("OH NO!"); console.log(err); } const userEl = document.querySelector(".user"); const endpoint = "https://api.github.com/users/wesbos"; const wesPromise = fetch(endpoint); wesPromise .then((response) => response.json()) .then((data) => { console.log(data); console.log(data.blog); console.log(data.name); console.log(data.location); userEl.textContent = `${data.name} - ${data.blog}`; }) .catch(handleError); </script></body>


text showing name and blog url 


보시다시피 팝업됩니다.


당신이 할 수 있는 또 하나의 일은 우리가 데이터로 바꾸기 전에 요소의 텍스트 내용을 로딩으로 설정하는 것입니다. 그래서 잠시 동안 "loading ..."이 보일 것입니다.


다음 코드 추가 👇


userEl.textContent = "loading....";const wesPromise = fetch(endpoint);


이제 async / await를 사용하도록 리팩터링 해 보겠습니다.


사용자 이름을 받는 displayUser라는 비동기 함수를 만듭니다. 요소를 선택한 후 작성한 모든 코드를 가져 와서 displayUser 함수에 넣습니다.


code snippet of displayUser function 


이제 한 줄씩 가자. 첫 번째 줄은 그대로 둡니다.


엔드 포인트를 가져 오는 약속은 이제 await로 전환 할 수 있으며 더 이상 Promise가 아니라 응답입니다. 그런 다음 response.json()을 기다림으로써 데이터를 얻을 수 있습니다.


async function displayUser(username) { userEl.textContent = "loading..."; const response = await fetch(endpoint); const data = await response.json(); console.log(data); console.log(data.blog); console.log(data.name); console.log(data.location); userEl.textContent = `${data.name} - ${data.blog}`;}


남은 것은 페이지로드시 displayUser를 호출하는 것입니다.


계속해서 사용자를 표시해 보겠습니다.


끝점 변수를 baseEndpoint로 바꾸고 usersEndpoint에 대한 다른 변수를 다음과 같이 만드십시오.


const baseEndpoint = "https://api.github.com";const usersEndpoint = `${baseEndpoint}/users`;


전달 된 사용자 이름을 가져 오려면 다음과 같이 코드를 수정하십시오.


const response = await fetch(`${usersEndpoint}/${username}`); 


이러한 수정을 통해 인수로 전달 된 사용자 이름을 기반으로 즉석에서 엔드 포인트를 생성 할 수 있습니다.


이를 테스트하기 위해 사용자 stolinski를 사용하여 스크립트 태그의 하단에서 호출 해 보겠습니다.


<script> const baseEndpoint = "https://api.github.com"; const usersEndpoint = `${baseEndpoint}/users`; const userEl = document.querySelector(".user"); async function displayUser(username) { userEl.textContent = "loading..."; const response = await fetch(`${usersEndpoint}/${username}`); const data = await response.json(); console.log(data); console.log(data.blog); console.log(data.name); console.log(data.location); userEl.textContent = `${data.name} - ${data.blog}`; } function handleError(err) { console.log("OH NO!"); console.log(err); } displayUser("stolinski");</script>



우리가 하지 않는 한 가지는 오류를 잡아서 baseEndpoint에 할당 된 URL의 오타와 같은 문제가 발생한 경우입니다.


이 문제를 해결하기 위해 catch를 추가하고 오류 처리기 함수를 다음과 같이 전달하겠습니다.


displayUser("stolinski").catch(handleError); 


browser console showing error output from api response 


🔥HOT TIP : XHR을 클릭하여 네트워크 탭에서 AJAX 요청 만 필터링 할 수 있습니다. 👇


broswer network tab showing filtered out XHR requests 


다음으로 단락 텍스트 내용을 대체하여 오류를 표시하도록 handleError 함수를 수정 해 보겠습니다.


function handleError(err) { console.log("OH NO!"); console.log(err); userEl.textContent = `Something went wrong: ${err}`;}


rendered html page showing error from api response 

다음 강의에서 한 가지 예를 더 살펴 보겠습니다.


Public API list 


공개적이고 API 키가 필요 없는 좋은 API를 찾기가 어렵습니다. github repo https://github.com/public-apis/public-apis에 좋은 목록이 있습니다.


list of public api endpoints 



스크롤하여 모든 다른 항목에 대해 다른 API를 찾을 수 있습니다.


https://wesbos.com/javascript/13-ajax-and-fetching-data/74-ajax-and-apis