javascript demande au serveur et attend une réponse

Dans le développement d'applications web, il est souvent nécessaire d'obtenir des données du serveur puis de les afficher sur le client. JavaScript est l'un des langages les plus populaires dans le développement Web moderne, et utiliser JavaScript sur le client pour demander un serveur et attendre une réponse est une opération courante. Cet article explique comment utiliser JavaScript pour envoyer une requête HTTP et attendre la réponse du serveur.

1. Envoyer une requête HTTP

L'objet XMLHttpRequest est utilisé en JavaScript pour envoyer des requêtes HTTP. L'objet XMLHttpRequest est la technologie d'échange de données asynchrone la plus couramment utilisée dans les applications Web modernes. Il nous permet de créer des requêtes asynchrones à partir de JavaScript et d'interagir avec le serveur. Voici un exemple simple :

const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:8080/data');
xhr.send();

Le code ci-dessus utilise la méthode GET pour demander des données au point de terminaison http://localhost:8080/data. Lorsque la méthode send() est appelée, la requête est envoyée au serveur. La méthode est asynchrone et ne bloque donc pas l'exécution du code ultérieur.

2. En attente de la réponse du serveur

Après avoir envoyé la demande, nous devons attendre la réponse du serveur. Nous pouvons utiliser des auditeurs pour gérer les réponses. Voici un exemple simple :

const xhr = new XMLHttpRequest();
xhr.onload = function() {
    if (xhr.status === 200) {
        console.log(xhr.responseText);
    } else {
        console.error('Error occurred');
    }
};
xhr.open('GET', 'http://localhost:8080/data');
xhr.send();

Le code ci-dessus envoie une requête au serveur et gère la réponse lorsque le serveur répond. L'écouteur d'événement de chargement se déclenche lorsque l'application reçoit une réponse. Si l'état de la réponse est 200, imprimez la réponse sur la console. Sinon, un message d'erreur sera affiché.

3. Utiliser Promise pour gérer les requêtes asynchrones

L'exemple ci-dessus utilise une fonction de rappel pour gérer la réponse du serveur. Cependant, les fonctions de rappel peuvent conduire à un code imbriqué et déroutant, nous pouvons donc utiliser Promise pour gérer les requêtes asynchrones. Voici un exemple d'utilisation de Promise pour gérer les requêtes asynchrones :

function makeRequest(method, url) {
    return new Promise(function(resolve, reject) {
        const xhr = new XMLHttpRequest();
        xhr.open(method, url);
        xhr.onload = function() {
            if (xhr.status === 200) {
                resolve(xhr.response);
            } else {
                reject(xhr.statusText);
            }
        };
        xhr.onerror = function() {
            reject(xhr.statusText);
        };
        xhr.send();
    });
}

Dans le code ci-dessus, la fonction makeRequest accepte la méthode HTTP et l'URL comme paramètres et renvoie un objet Promise. Cet objet a deux fonctions de gestionnaire : résoudre et rejeter. Lorsque le serveur répond correctement, la fonction de gestionnaire de résolution imprime la réponse sur la console. Lorsqu'une erreur se produit, la fonction de gestionnaire de rejet génère un message d'erreur.

Voici comment utiliser la fonction :

makeRequest('GET', 'http://localhost:8080/data')
    .then(function(response) {
        console.log(response);
    })
    .catch(function(error) {
        console.error(error);
    });

Le code ci-dessus effectuera une requête HTTP GET et appellera la fonction de gestionnaire si le traitement réussit ou échoue. L'écriture de code asynchrone à l'aide du style Promise est plus facile à comprendre et à maintenir que l'utilisation de fonctions de rappel.

Conclusion

Utiliser JavaScript pour envoyer des requêtes HTTP et attendre les réponses du serveur est une compétence essentielle dans les applications Web. JavaScript fournit l'objet XMLHttpRequest pour gérer cette opération et n'empêche pas les développeurs d'utiliser des bibliothèques tierces pour simplifier le code. Cet article présente un exemple d'utilisation de JavaScript natif pour envoyer une requête HTTP et attendre une réponse du serveur, et montre comment écrire du code asynchrone à l'aide du style Promise.

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!