L'API fetch fournit une interface Javascript pour accéder et manipuler les demandes et les réponses sur un réseau. Elle est fournie par la méthode globale window.fetch() du navigateur.
Dans un fichier index.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>Document</title>
</head>
<body>
<h1>REpos contenant db</h1>
<ol id="repos"></ol>
<script src="./index.js"></script>
</body>
</html>
index.js
async function getFromGitHub() {
try {
const userName = 'dupontdenis';
const url = 'https://api.github.com/users';
const reposResponse = await fetch(`${url}/${userName}/repos`);
const userRepos = await reposResponse.json();
userRepos
.slice(0, 100)
.filter(({ name }) => /db/ig.test(name))
.sort((r1, r2) => {
if (r1.name > r2.name) { return -1 } else return 1;
})
.forEach(({ name }) =>
document
.querySelector("#repos")
.insertAdjacentHTML('afterbegin', `<li> ${name} </li>`))
} catch (error) {
console.log(error);
}
}
getFromGitHub();
Connaissance des API
async function getFromGitHub() {
try {
const userName = 'dupontdenis';
const url = 'https://api.github.com/users';
const reposResponse = await fetch(`${url}/${userName}/repos?per_page=100&sort=name&direction=desc`);
const userRepos = await reposResponse.json();
userRepos
.filter(({ name }) => /db/ig.test(name))
.forEach(({ name }) =>
document
.querySelector("#repos")
.insertAdjacentHTML('afterbegin', `<li> ${name} </li>`))
} catch (error) {
console.log(error);
}
}
getFromGitHub();
Passons du navigateur à une application en NodeJS
const express = require('express');
const { Octokit } = require("@octokit/core");
const path = require('path');
const debug = require('debug')('git');
const app = express();
app.use(express.static(path.join(__dirname, 'public')));
app.set('view engine', 'pug');
const octokit = new Octokit({});
app.get('/users/:id', async (req, res) => {
try {
debug(`id = ${req.params.id}`);
const { data: user } = await octokit.request(`GET /users/{username}`, {
username: req.params.id,
});
debug(`data = ${user.login}, ${user.avatar_url}`);
res.render('index', { user });
} catch (error) {
console.log(error)
}
});
app.get('/users/:id/repos', async (req, res) => {
try {
debug(`id = ${req.params.id}`);
debug(`sort = ${req.url}`);
const { data: repos } = await octokit.request(`GET ${req.url}`);
res.render('repos', { repos });
} catch (error) {
console.log(error)
}
});
const port = process.env.PORT || 3000;
app.listen(port, () => console.log(`Listening on port ${port}...`));
Lig: 33 ${req.url} contient l'ensemble de l'adresse par exemple :
/users/dupontdenis/repos?page2=&sort=name&direction=asc
La vue avec pug
extends layout
mixin list-ord
ul
each repo in repos
li= repo.name
block content
h1 repositories
+list-ord
Testez les adresses :
http://localhost:3000/users/dupontdenis/repos
http://localhost:3000/users/dupontdenis/repos?page2=&sort=name&direction=asc
git
Voir dans la branche amélioration