Une brève introduction à $.ajax, axios et fetch (avec code)

Cet article vous apporte une brève introduction à $.ajax, axios et fetch (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Qu’est-ce que l’Ajax ?

Réponse : Ajax est une technologie qui peut utiliser le transfert de données asynchrone (requête HTTP) entre le navigateur et le serveur. Utilisez ceci pour permettre à une page de demander une petite quantité de données sans avoir à actualiser la page entière. Afin de rafraîchir une partie du contenu d’une page traditionnelle (sans utiliser Ajax), la page Web entière doit être rechargée.

Sur quoi est basé Ajax ?

Réponse : Elle est basée sur XMLHttpRequest (XHR). Il s'agit d'une API relativement grossière qui ne respecte pas le principe de conception de séparation des préoccupations (Separation of Concerns) et n'est pas si conviviale à configurer et à utiliser.

L'arrière-plan de $.ajax ?

Réponse : Pour les raisons ci-dessus, diverses bibliothèques ajax sont référencées, mais la plus célèbre est $.ajax() dans l'API jQuery. L'un des avantages de $.ajax() est le fonctionnement asynchrone, mais le fonctionnement asynchrone de jQuery est un modèle asynchrone basé sur les événements, ce qui n'est pas aussi convivial que promis.

L'arrière-plan généré par fetch ?

Réponse : Sur la base des différents facteurs mentionnés ci-dessus, l'API fetch a vu le jour. Mais il est facile à utiliser et présente quelques problèmes (ce problème sera discuté en détail ci-dessous et les solutions correspondantes seront expliquées), couplés à des problèmes de compatibilité (IE ne le prend pas du tout en charge), c'est pourquoi de nombreux développeurs utilisent axios . Bibliothèque tripartite.

Bibliothèque qui prend en charge la promesse (axios) ?

Réponse : La bibliothèque axios est désormais une solution industrielle relativement courante. L'une des raisons de la popularité d'axios réside dans les promesses, et une autre raison est la popularité des bibliothèques basées sur des opérations de données (vue.js, angulaire.js , react.js, etc.), alors que jQuery traditionnel est une bibliothèque basée sur les opérations DOM. Mais il a aussi des défauts, c'est-à-dire qu'avant de l'utiliser, nous devons nous assurer que la bibliothèque a été introduite.

En fait, personnellement, je préfère toujours utiliser fetch. Si vous rencontrez des problèmes de compatibilité lors du développement, vous n'avez besoin que d'une récupération isomorphe sans introduire de bibliothèque supplémentaire. Concentrons-nous sur la récupération.

Utilisation de fetch

fetch(url, options)
    .then(response => console.log(responese))
    .catch(err => console.log(err))

url : adresse d'accès
options : paramètres de configuration communs
réponse : demande de retour d'objet

Pour plus de détails sur les options de configuration des paramètres de demande, veuillez vous référer à MDN fetch

Problèmes et solutions lors de la récupération

1. Vous avez besoin de deux étapes pour obtenir les données

fetch('https://api.github.com/users/lvzhenbang/repos')
    .then(res => {
        console.log(res)
        return res.text()
    }).then(data => {
        console.log(data)
    })

Grâce au code ci-dessus, vous pouvez constater qu'il n'y a aucune donnée dans l'objet Response renvoyé par impression directe. Pour obtenir les données requises, vous devez passer par un. méthode intermédiaire Response.text( ) (fetch fournit 5 méthodes)

D'un autre côté, axios est beaucoup plus pratique à utiliser. L'objet Response qu'il renvoie contient des données dans l'attribut data. Le code de référence est le suivant :

axios.get('https://api.github.com/users/lvzhenbang/repos')
    .then(res => console.log(res));

Bien sûr, ce n'est pas un gros problème, mais c'est un peu gênant à utiliser.

1. La demande de récupération n'inclut pas les cookies par défaut

Pour résoudre ce problème, vous devez configurer {credentials : 'include'} dans les options

1. toutes les requêtes Les erreurs seront rejetées

C'est-à-dire que la méthode catch ne peut pas détecter toutes les erreurs Lorsque l'erreur peut être exprimée sous la forme d'un code d'état (tel que : 404, 500, etc.), la promesse renvoyée par fetch n'aura pas de rejet. Catch n'est efficace qu'en cas de panne de réseau ou si la demande est bloquée.

Pour résoudre ce problème, nous pouvons déterminer si ok dans l'objet Response est vrai. Sinon, utilisez Promise pour ajouter manuellement un rejet. Le code de référence est le suivant :

fetch('https://api.github.com/usrs/lvzhenbang/repos')
    .then(res => {
        if (res.ok) {
            return res.text()
        } else {
            return Promise.reject('请求失败')
        }
    }).then(data => {
        console.log(data)
    }).catch(err => {
        console.log(err)
    })

Si vous n'ajoutez pas de rejet manuellement, undefined sera imprimé, ce qui n'est pas ce que nous voulons. Bien sûr, en utilisant axios, vous n'avez pas besoin de considérer ce problème. . Le code est le suivant :

axios.get('https://api.github.com/usrs/lvzhenbang/repos')
    .then(res => console.log(res))
    .catch(err => console.log(err));

Optimisation du fetch

Puisque la méthode res.text() renvoie une promesse, .then peut être appelé directement ; de plus, afin de garantir que toutes les erreurs renvoient un format unifié (toutes renvoient une promesse), le code ci-dessus peut être optimisé comme suit :

fetch('https://api.github.com/usrs/lvzhenbang/repos')
    .then(res => {
        return res.text()
            .then(data => {
                if (res.ok) {
                    return data
                } elese {
                    return Promise.reject(json)
                }
            })
    }).then(data => {
        console.log(data)
    }).catch(err => {
        console.log(err)
    })

Les étudiants qui ont joué à express/koa, ou qui ont un certaine compréhension du backend, sachez que le serveur dans certains cas Certaines informations rapides seront également renvoyées, alors que faut-il faire ? Les invites d'erreur courantes incluent un code d'état (statut) et un message d'invite (msg). Le code est modifié comme suit :

serveur :

res.status(404).send({
    err: 'not found'
})

client :

fetch('https://api.github.com/usrs/lvzhenbang/repos')
    .then(handleResponse).then(data => {
        console.log(data)
    }).catch(err => {
        console.log(err)
    })

function handleResponse (res) { 
    return Promise.reject(Object.assign({}, res.text(), {
        status: res.status,
        msg: res.statusText
    }))
}

<.>

Solutions compatibles

Après avoir résolu les problèmes ci-dessus et optimisé l'utilisation de fetch, j'ai trouvé que fetch est toujours un bon choix. Le traitement suivant peut être effectué pour différentes situations d'utilisation :

Premièrement, es5-shim doit être introduit pour résoudre l'isomorphisme de la nouvelle fonctionnalité de fetch

Deuxièmement, es6-promise doit être introduit ; pour résoudre le problème de compatibilité de promise ;

Ensuite, fetch-ie8 est introduit pour résoudre le problème d'isomorphisme de fech

Enfin, fetch-jsonp est introduit pour résoudre le problème inter-domaines ;

Bien sûr, vous n'avez pas besoin de résoudre ces problèmes spécifiquement. L'équipe GitHub propose une solution polyfill, et vous n'avez pas besoin de la mettre en œuvre étape par étape. Seules deux étapes sont nécessaires :

1. Installer le package fetch

   
   

   npm install whatwg-fetch --save

2. dans Le module utilisé importe chercher

   
   

import 'whatwg-fetch'

window.fetch(url, options)

et les autres utilisations sont les mêmes que

, donc l'API native est la même. fetch

Dans quelles circonstances pouvez-vous renoncer à utiliser fetch

pour obtenir le statut de Promsie, tel que : isRejected, isResolved

Si vous êtes habitué à la progression de jquery ou utilisez certaines méthodes différées

Pour les méthodes spécifiques similaires à jquery implémentées par fetch, veuillez vous référer à whatwg-ftch ou fetch-issue

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!