Que sont $.ajax, axios et fetch ? Explication détaillée de la façon d'utiliser fetch

Cet article vous présentera respectivement ce que sont $.ajax, axios et fetch, afin que vous puissiez en savoir plus sur la façon d'utiliser fetch. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

• AjaxQu'est-ce que c'est ?

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.

• Ajax Sur base de quoi ?

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. Quel est le parcours 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. $.ajax() L'un de ses avantages est le fonctionnement asynchrone, mais le fonctionnement asynchrone de jQuery est un modèle asynchrone basé sur des événements, ce qui n'est pas aussi convivial que promis.

• fetch Fond généré ?

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 : axios Cette bibliothèque est désormais une solution industrielle relativement courante. axios L'une des raisons de sa popularité est ses promesses, et une autre raison est la popularité de la bibliothèque basée sur les opérations de données. (vue.js, angulaire.js, réagir.js, etc.), alors que le 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 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 : objet de retour de demande

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

Récupérer les problèmes et les solutions

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 une méthode intermédiaire response.text() (fetch propose 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 par défaut est non cookie

pour résoudre ce problème, vous devez configurer options{credentials: 'include'} >

1. Toutes les erreurs de requête ne seront pas

   reject

C'est-à-dire que la méthode

ne peut pas détecter toutes les erreurs lorsqu'une erreur se produit. , vous pouvez utiliser un Lorsqu'il est exprimé sous la forme d'un code d'état (comme 404, 500, etc.), le catch renvoyé par fetch n'aura pas de rejet Promise n'est valable qu'en cas de panne du réseau. ou la demande est bloquée. catch

Pour résoudre ce problème, nous pouvons déterminer si le

dans l'objet Response est vrai. Sinon, utilisez ok pour ajouter manuellement un Promise. Le code de référence est le suivant : reject

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

manuellement, reject sera imprimé, ce qui n'est pas ce que nous souhaitons. Bien sûr, utiliser undefined ne le fait pas. devez considérer ce problème. Le code est le suivant :axios

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

Optimisation de la récupération

Puisque la méthode

renvoie un res.text(), vous pouvez appeler promise directement ; de plus, afin de garantir que toutes les erreurs renvoient un format unifié (toutes renvoient un .then), le code ci-dessus peut être optimisé comme suit : Promise

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 avoir une certaine compréhension du backend, savoir que le serveur est dans un certain Dans certains cas, certaines informations rapides seront renvoyées, alors comment y faire face ? 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
    }))
}

兼容解决方案

以上问题解决并优化fetch的使用后，发现fetch还是一个不错的选择。针对不同使用情况可以作如下处理：

首先，要引入 es5-shim 解决fetch这个新特性的同构；

其次，要引入 es6-promise 解决promise的兼容问题；

然后，引入 fetch-ie8 解决fech的同构问题；

最后，引入 fetch-jsonp 解决跨域问题。

当然，你也不需要针对性的解决这些问题，GitHub团队提供了一个polyfill解决方案，你不需要一步步的是实现。只需要两步：

1. 安装 fetch package

   npm install whatwg-fetch --save

2. 在使用的模块引入 fetch

import 'whatwg-fetch'

window.fetch(url, options)

其他的使用和 fetch 则这个原生的API雷同。

哪些情况可以放弃使用fetch

1. 获取Promsie的状态，如：isRejected, isResolved

2. 如果使用习惯了jquery的progress方法的，或者使用deffered的一些方法

具体 fetch 实现了哪些与jquery类似的方法可参考whatwg-ftch 或者 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!