Axios API 호출에 대한 간단한 설명
API 호출에 대한 간단한 설명
이것은 웹 응용 프로그램에 외부 API를 호출하는 데 사용되는 초보자의 우호적인 시범이다.
본 프레젠테이션에 사용된 API는 https://reqres.in/ 에서 나온 것입니다.GET 요청을 실행하려면 API 키나 기타 어떤 것도 필요하지 않으므로 프레젠테이션이 매우 편리합니다.
우선 우리가 이 시연에서 무엇을 해야 하는지 보여 드리겠습니다.
우리는 페이지'사용자 페이지 1'과'사용자 페이지 2'에 두 개의 단추를 가지고 있다.
사용자가 사용자 페이지 1을 클릭하면 외부 API에서 페이지 1의 사용자 결과를 가져와 표시합니다. 그렇지 않으면 사용자 페이지 2입니다.
사용자 페이지 1을 클릭하면
사용자 페이지 2를 클릭하면
우리는 API 호출을 실행하기 위해 매우 편리한 설정을 제공하는 제3자 라이브러리인 axios를 사용할 것이다.
fetchapi에 비해 axios에서 깨달은 장점은 다음과 같다.
다음은 이번 프레젠테이션을 고려하는 단계입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>News</title>
<link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png">
<link rel="manifest" href="assets/site.webmanifest">
<link rel ="stylesheet" href ="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel ="stylesheet" href ="style.css">
</head>
<body>
<div class="search-container">
<span><button onclick="renderUsers('1')" type="button" class="btn btn-light">User Page 1</button></span>
<span><button onclick="renderUsers('2')" type="button" class="btn btn-light">User Page 2</button></span>
</div>
<div class = "card_container"></div>
<template id="tmplt">
<div class="card">
<img class="card-img-top">
<div class="card-body">
<h3 class="card-title"></h3>
<p class="card-text"></p>
</div>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script type="text/javascript" src="apiCall.js"></script>
</body>
</html>
사용자가 "사용자 페이지 1"을 눌렀을 때, 우리는 1 페이지의 사용자 카드를 표시하고 싶고, "사용자 페이지 2"를 눌렀을 때, 2 페이지의 사용자 카드를 표시합니다.
각 사용자 카드는 두 부분으로 구성되어 있는데 그것이 바로 사용자 화신과 카드체이다.카드 주체 안에 사용자 이름과 이메일이 있습니다.
디자인에 있어서 스타일을 볼 수 있습니다.css, 나는 단지 간단한 것을 만들었을 뿐이다.
apiCall에 대해js, 나는 세 가지 함수를 썼다.
const getData = (n) => {
return axios.get(`https://reqres.in/api/users?page=${n}`)
.then(response => {
const data = response.data.data;
return data;
}).catch(err => {
console.log(err, err.response);
});
};
const renderUsers = async (n) => {
const data = await getData(n);
const container = document.querySelector(".card_container");
container.innerHTML = "";
const template = document.getElementById("tmplt");
for(let i = 0; i < data.length; i++){
let user = data[i];
let clone = template.content.cloneNode(true);
const username = user.first_name + user.last_name;
let avatar = clone.querySelector(".card-img-top");
avatar.src = user.avatar;
avatar.alt = username;
let name = clone.querySelector(".card-title");
name.innerHTML = username;
let email = clone.querySelector(".card-text");
email.innerHTML = user.email;
container.appendChild(clone);
}
}
따라서renderUsers 함수가 호출될 때, getData 함수를 시작하여 매개 변수 (페이지 번호) 를 전송합니다. 이 매개 변수 (1 또는 2) 는 우리가 호출할 API URL에 전달됩니다.따라서 만약 우리가 1을 전송한다면, 그것은 1페이지의 결과를 얻을 것이다. 그렇지 않으면.
되돌아오는 데이터를 얻은 후, 우리는 카드 용기의 내부 html를 제거하여 새로운 카드를 보여줄 것이다.
우리는 데이터를 순환해서 훑어보고 우리가 원하는 플러그인 정보를 얻습니다. 이 예에서 URL, 전자메일, 이름을 화신합니다.API 문서를 참조하여 반환된 데이터가 어떻게 되는지 파악하여 액세스할 수 있습니다.
마지막으로, 우리는 되돌아오는 정보를 각자의 노드에 입력하고, 전체 복제체를 카드 용기에 부가할 것이다.
이 프레젠테이션을 개선하거나 어떤 일에 대해 더 깊이 있게 설명할 수 있는지 알려주십시오.😃
저를 따라 웹 디자인, 프로그래밍과 자기 보완에 관한 더 많은 글을 읽어 주십시오😊
Reference
이 문제에 관하여(Axios API 호출에 대한 간단한 설명), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ohdylan/a-simple-demonstration-of-api-call-using-axios-18fm텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
