Quoi utiliser pour le développement de React Ajax

Le développement React ajax peut utiliser : 1. la méthode "$.ajax" de jQuery ; 2. l'API Fetch ; 3. SuperAgent, qui est une bibliothèque API AJAX légère, 4. la bibliothèque Axios, principalement utilisée pour envoyer des données au backend ; demande ; 5. Demander une bibliothèque.

L'environnement d'exploitation de ce tutoriel : système Windows 7, React version 17.0.1, ordinateur Dell G3.

5 solutions pour les requêtes React AJAX

1 jQuery $.ajax

C'est une solution rapide et sale. Dans l'ancienne version du didacticiel officiel React, ils utilisaient jQuery $.ajax pour montrer comment obtenir des données du serveur. Si vous commencez tout juste à apprendre et à jouer avec React, jQuery peut vous faire gagner beaucoup de temps lors du démarrage et du développement, car nous connaissons tous très bien jQuery. Ceci est un exemple de jQuery implémentant AJAX : $.ajax 来示范如何从服务器获取数据。如果你是刚刚开始学习和把玩 React，jQuery 可以节省你大量入门和开发的时间，因为我们都对 jQuery 非常熟悉了。这是 jQuery 实现 AJAX 的例子：

loadCommentsFromServer: function() {
    $.ajax({
        url: this.props.url,
        dataType: 'json',
        cache: false,
        success: function(data) {
            this.setState({data: data});   // 注意这里
        }.bind(this),
        error: function(xhr, status, err) {
            console.error(this.props.url, status, err.toString());
        }.bind(this)
    });
}

P.S. 这代码段摘自旧版本的官方教程

这里演示了如何在一个 React 组件里面使用 jQuery 的 $.ajax。唯一需要注意的是如何在 success 回调里面调用 this.setState() ，即当 jQuery 成功收到数据之后应该如何通过 React 的 API 更新 state 的。

然而，jQuery 是一个包含很多功能的大头儿，只为了用一下 AJAX 功能而引入整个 jQuery 是没有意义的（除非你还使用 jQuery 做了很多别的事情）。So，用什么才好？答案是 fetch API。

2、Fetch API

https://github.com/github/fetch

Fetch 是个新的、简单的、标准化的API，旨在统一Web通信机制，并替代 XMLHttpRequest。它已经被主流浏览器所支持，针对较旧的浏览器也有了一个 polyfill （Benz乱入：polyfill 直译是填充工具，就是旧浏览器本来不支持某个新的JS API，引入一段js代码后就支持了，这一段js代码给旧浏览器”填充“了一个API。这个单词我实在不知道怎么翻译 ，感觉反而保留原单词不翻译更能让读者理解。）。如果你在使用 Node.js ，你也可以通过 node-fetch 来使 Node.js 支持 Fetch。

若把上述用 jQuery $.ajax 的代码段改成 fetch 实现的话，代码应该长这样子：

loadCommentsFromServer: function() {
    fetch(this.props.url).then(function(response){
        // 在这儿实现 setState
    });
}

在一些流行的 React 教程中你也许会发现 fetch 的身影。要了解更多关于 fetch 的情况，可参考下列链接（全英文）：

• Mozilla
• David Walsh Blog
• Google Developers
• WHATWG

3、SuperAgent

https://github.com/visionmedia/superagent

SuperAgent 是一个轻量级的 AJAX API 库，为更好的可读性和灵活性而生。如果某些原因让你不太想用 fetch，那么 SuperAgent 就几乎是必然的选择了。SuperAgent 的用法大概是这样的：

loadCommentsFromServer: function() {
    request.get(this.props.url).end(function(err,res){
        // 在这儿实现 setState
    });
}

SuperAgent 也有 Node.js 版本，API 是一样的。如果你在用 Node.js 和 React 开发同构应用（Benz 乱入：这个链接是我加的，旨在照顾初学者），你可以用 webpack 之类的东西嵌入 superagent 并让它适用于浏览器端。因为浏览器端和服务器端的 API 是一样的，所以其 Node.js 版本不需要修改任何代码就可以在浏览器上运行。

4、Axios

https://github.com/axios/axios

Axios 是一个基于 promise 对象（Benz 乱入：这个链接也是我加的）的 HTTP 客户端；axios主要是用于向后台发起请求的，还有在请求中做更多是可控功能。。与 fetch 和 superagent

loadCommentsFromServer: function() {
    axios.get(this.props.url).then(function(response){
        // 在这儿实现 setState
    }).catch(function(error){
        // 处理请求出错的情况
    });
}

P.S. Cet extrait de code est tiré d'une ancienne version du tutoriel officiel

Cela montre comment utiliser le $.ajax de jQuery dans un composant React. . La seule chose qui nécessite une attention particulière est de savoir comment appeler this.setState() dans le rappel success, c'est-à-dire comment mettre à jour l'état via l'API React une fois que jQuery a reçu avec succès les données.

Cependant, jQuery est un gros package qui contient de nombreuses fonctions, et cela n'a pas de sens d'introduire l'intégralité de jQuery juste pour utiliser la fonction AJAX (à moins que vous n'utilisiez également jQuery pour faire beaucoup d'autres choses). Alors, que dois-je utiliser ? La réponse est l'API fetch.

2. Fetch API

https://github.com/github/fetch

Fetch est une nouvelle API simple et standardisée conçue pour unifier les mécanismes de communication Web et remplace XMLHttpRequest. Il a été pris en charge par les navigateurs grand public, et il existe également un polyfill pour les navigateurs plus anciens

(Benz a fait une erreur : polyfill est littéralement un outil de remplissage, ce qui signifie que les anciens navigateurs ne prennent pas en charge à l'origine une nouvelle API JS. Après avoir introduit un morceau de js code, il sera pris en charge. Ce morceau de code js « remplit » une API pour les anciens navigateurs. Je ne sais vraiment pas comment traduire ce mot, mais je pense qu'il serait préférable que les lecteurs le comprennent en laissant l'original. mot non traduit. ). Si vous utilisez Node.js, vous pouvez également utiliser node-fetch pour permettre à Node.js de prendre en charge Fetch.

Si le segment de code ci-dessus utilisant jQuery $.ajax est remplacé par fetch, le code devrait ressembler à ceci : 🎜

loadCommentsFromServer: function() {
    request(this.props.url, function(err, response, body){
        // 在这儿实现 setState
    });
}

🎜Dans certains didacticiels React populaires, vous trouverez peut-être récupérer inclus. Pour en savoir plus sur fetch, veuillez vous référer au lien suivant (tout en anglais) : 🎜

• Mozilla
• Blog David Walsh
• Développeurs Google
• WHATWG

🎜🎜3, SuperAgent🎜🎜🎜https:/ /github.com/visionmedia/superagent🎜🎜SuperAgent est une bibliothèque API AJAX légère, née pour une meilleure lisibilité et flexibilité. Si pour une raison quelconque vous ne souhaitez pas utiliser fetch, alors SuperAgent est presque un choix inévitable. L'utilisation de SuperAgent est à peu près la suivante : 🎜rrreee🎜SuperAgent a également une version Node.js, et l'API est la même. Si vous utilisez Node.js et React pour développer des applications isomorphes🎜(Benz a foiré : ce lien a été ajouté par moi pour m'occuper des débutants)🎜, vous pouvez utiliser quelque chose comme webpack pour intégrer superagent Et faites-le fonctionner du côté du navigateur. Étant donné que les API côté navigateur et côté serveur sont les mêmes, sa version Node.js peut s'exécuter sur le navigateur sans modifier aucun code. 🎜🎜🎜4, Axios🎜🎜🎜https://github.com/axios/axios🎜🎜Axios est un client HTTP basé sur des objets de promesse🎜(Benz a foiré : j'ai aussi ajouté ce lien)🎜 axios est principalement utilisé dans en plus de faire des requêtes en arrière-plan, il existe des fonctions plus contrôlables dans la requête. . Comme fetch et superagent, il prend en charge à la fois le navigateur et Node.js. De plus, vous pouvez constater sur sa page d'accueil Github qu'il dispose de nombreuses fonctions avancées utiles. 🎜🎜Voici l'utilisation approximative d'Axios : 🎜rrreee🎜🎜5, Request🎜🎜🎜https://github.com/request/request🎜🎜Si nous ne présentons pas cette bibliothèque de requêtes, il semble que cet article sera incomplet. Il s'agit d'une bibliothèque JS qui poursuit un design minimaliste en termes d'idéologie. Elle compte plus de 12 000 étoiles sur Github 🎜 (Benz a fait une erreur : lorsque j'ai traduit cet article, elle avait déjà plus de 16 000 étoiles) 🎜. C'est également l'un des modules Node.js les plus populaires. Accédez à sa page d'accueil GitHub pour en savoir plus. 🎜🎜Exemple d'utilisation : 🎜rrreee🎜[Recommandations associées : 🎜Tutoriel vidéo Redis🎜]🎜

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!