Comment appeler l'interface avec javascript

JavaScript est un langage de programmation très puissant qui peut étendre ses fonctionnalités en appelant des API et des services Web. Dans cet article, nous verrons comment appeler des interfaces à l'aide de JavaScript.

1. Concept d'interface

L'interface est le canal de communication entre différents systèmes logiciels, également appelé API (Application Programming Interface). Grâce aux API, les programmeurs peuvent même permettre la communication entre différents langages de programmation. Ainsi, si nous voulons utiliser JavaScript pour appeler des interfaces, nous devons comprendre les concepts de base des interfaces.

2. Méthode d'appel

JavaScript peut appeler l'API de différentes manières. Les méthodes les plus couramment utilisées sont AJAX (JavaScript asynchrone et XML) et Fetch API. Fetch API est une nouvelle API intégrée aux navigateurs modernes qui peut envoyer des requêtes HTTP côté serveur et recevoir des réponses.

3. Fetch API

Fetch API est une API basée sur Promise, elle est donc très adaptée à une exécution dans un environnement asynchrone. À l'aide de l'API Fetch, vous pouvez envoyer une requête HTTP et traiter les résultats de la réponse à l'aide des fonctions de résolution et de rejet. Par exemple :

fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(err => console.error(err));

Le code ci-dessus envoie une requête GET à https://api.example.com/data, puis analyse la réponse JSON et l'envoie à la console du navigateur. Si la requête réussit, la fonction de rappel then sera déclenchée ; si une erreur se produit, la fonction de rappel catch sera déclenchée.

4. AJAX

AJAX est une technologie qui interagit avec le système du serveur back-end et la page Web frontale. Elle peut réaliser des mises à jour asynchrones sans avoir besoin de mettre à jour les données une fois la page Web complètement chargée. Cette technologie est basée sur l'objet XMLHttpRequest, qui interagit avec le serveur en envoyant des requêtes HTTP, reçoit des données du serveur et utilise JavaScript pour mettre à jour le contenu de la page Web sans actualiser la page entière. Par exemple :

const xhr = new XMLHttpRequest();
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  } else {
    console.error(xhr.statusText);
  }
};
xhr.open('GET', 'https://api.example.com/data');
xhr.send();

Le code ci-dessus crée un objet XMLHttpRequest, envoie une requête GET à https://api.example.com/data et renvoie la réponse à la console du navigateur. Si la demande réussit, la sortie du texte de réponse recevra une réponse ; si la demande échoue, la sortie du texte d'état recevra une réponse.

5. Appel d'interface de base

Ensuite, nous utiliserons JavaScript pour appeler un exemple d'API.

fetch('https://swapi.dev/api/people/1/')
.then(response => response.json())
.then(data => console.log(data))
.catch(err => console.error(err));

Le code ci-dessus appelle https://swapi.dev/api/people/1/, qui renvoie des informations sur un personnage de "Star Wars". Si la réponse réussit, la fonction de rappel sera déclenchée, la réponse JSON sera analysée et affichée sur la console du navigateur.

6. Autorisation API

Certaines API nécessitent une autorisation pour y accéder. Assurez-vous d'obtenir une autorisation complète avant d'appeler l'API. Par exemple, de nombreuses API utilisent le cadre d'authentification OAuth 2.0 pour protéger leurs ressources. OAuth 2.0 est une norme ouverte populaire pour accéder aux API protégées, qui permet aux utilisateurs d'autoriser les applications et d'accéder aux ressources requises. OAuth 2.0 autorise quatre processus d'autorisation typiques : le processus de code d'autorisation, le processus implicite, le processus d'identification par mot de passe et le processus d'identification du client.

7. Résumé

Dans cet article, nous avons examiné en profondeur comment utiliser JavaScript pour appeler des API. Nous avons présenté les deux méthodes Fetch API et AJAX et fourni un exemple d’appel d’interface de base. Les interfaces sont un élément essentiel du développement Web moderne, donc comprendre comment utiliser JavaScript pour appeler des interfaces vous aidera à développer des applications Web plus puissantes. En parallèle, pensez à obtenir une autorisation suffisante avant d’utiliser l’API.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!