JS Puro e Axios와 함께 사용하는 API입니다. (em 3 passos)
4148 단어 axiosjavascriptapitutorial
AXIOS는 API를 사용하기 위해 API를 사용하기 위해 API를 필요로 하기 때문에 HTML을 사용하기 위해 응용 프로그램을 연결합니다.
Vamos는 Github에서 API를 사용하고 HTML 없이 API를 사용하여 디포지토리 형식의 리포지토리를 나열합니다.
1º 파소
Adicione o link da cdn do AXIOS no seu documento HTML, ele será responsável para que se torne possível utilizar o AXIOS na aplicação
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Consumindo API</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input type="text" id="nomeUsuario" placeholder="Usuário do github:">
<button type="submit" onclick="trazerRepositorios()">Pesquisar</button>
<button onclick="location.reload()">Limpar</button>
<ul id="repos"></ul><script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</body>
</html>
2º 파소
Crie um arquivo Javascript e adicione o caminho desse arquivo no HTML utilizando a tag 'script', OBS: É preciso inserir essa tag com o caminho do javascript na última linha da tag 'body' do arquivo HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Consumindo API</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input type="text" id="nomeUsuario" placeholder="Usuário do github:">
<button type="submit" onclick="trazerRepositorios()">Pesquisar</button>
<button onclick="location.reload()">Limpar</button>
<ul id="repos"></ul>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="main.js"></script>
</body>
</html>3º 파소
No arquivo JavaScript cry uma função que chamará o axios para fazer as requisições a API de acordo com o nome do usuário que foi solicitado na busca por repositórios.
var nomeUsuario = document.querySelector("#nomeUsuario");
function trazerRepositorios() {
axios
.get(`https://api.github.com/users/${nomeUsuario.value}/repos`**)
.then((response) => {
const repos = response.data;
console.log(repos);
var lista = document.querySelector("#repos");
for (i in repos) {
console.log(repos[i]);
var elemento = document.createElement("li");
elemento.innerHTML = JSON.stringify(repos[i].url);
lista.appendChild(elemento);
}
})
.catch((error) => console.error(error));**
}
응용 프로그램 전체 동영상:
👇🏻
결과타도 결승
Link do Código
Reference
이 문제에 관하여(JS Puro e Axios와 함께 사용하는 API입니다. (em 3 passos)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/julianafelix/como-consumir-api-com-js-puro-e-axios-em-3-passos-3jnf텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
