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

Github me permet de faire des recherches par page en triant les données.

Pour tester, ajoutons à l'adresse : ?per_page=100&sort=name&direction=desc

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

https://github.com/dupontdenis/useAPIgit.git

AXIOS

Axios est un client HTTP simple basé sur les promesses pour le navigateur et node.js. Axios fournit une bibliothèque simple à utiliser dans un petit paquet avec une interface très extensible.

Il permet d'écrire simplement dans une application

const {data:films} = await axios.get('https://ghibliapi.herokuapp.com/films');

En lieu et place de notre bon vieux http.request et ses vingt lignes de code.

const http = require('http')
const options = {
hostname: 'localhost',
port: 8000,
path: '/cool/peutimporte',
method: 'GET'
}
const req = http.request(options, res => {
console.log(`statusCode: ${res.statusCode}`)
res.on('data', d => {
process.stdout.write(`GET: ${d}`)
})
})
req.on('error', error => {
console.error(error)
})
req.end()
// Create a local server to receive data from
const server = http.createServer((req, res) => {
res.writeHead(200, { 'Content-Type': 'application/json' });
res.end(JSON.stringify({
data: 'Je suis envoyé par le serveur! '
}));
});
server.listen(8000);

https://nodejs.dev/learn/make-an-http-post-request-using-nodejs

dupontexpress

Pages

ejs like html

Fetch

Connaissance des API

Passons du navigateur à une application en NodeJS

La vue avec pug

git

AXIOS

API

Les films du studio Ghibli

Votre avatar GitHub