Was für die React-Ajax-Entwicklung zu verwenden ist

React Ajax-Entwicklung kann Folgendes verwenden: 1. die „$.ajax“-Methode von jQuery; 3. SuperAgent, eine leichtgewichtige AJAX-API-Bibliothek; 4. Axios-Bibliothek, die hauptsächlich zum Senden von Daten an das Backend verwendet wird Anfrage; 5. Bibliothek anfordern.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Reaktionsversion 17.0.1, Dell G3-Computer.

5 Lösungen für React AJAX-Anfragen

1. jQuery $.ajax

Dies ist eine schnelle und schmutzige Lösung. In der alten Version des offiziellen React-Tutorials verwendeten sie jQuery $.ajax, um zu demonstrieren, wie man Daten vom Server erhält. Wenn Sie gerade erst anfangen, mit React zu lernen und damit zu spielen, kann Ihnen jQuery beim Einstieg und bei der Entwicklung viel Zeit sparen, da wir alle mit jQuery bestens vertraut sind. Dies ist ein Beispiel für die Implementierung von AJAX durch jQuery: $.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. Dieser Codeausschnitt stammt aus einer alten Version des offiziellen Tutorials

Dies zeigt, wie man $.ajax von jQuery in einer React-Komponente verwendet . Das Einzige, was Aufmerksamkeit erfordert, ist, wie this.setState() im success-Rückruf aufgerufen wird, d. h. wie der Status über die React-API aktualisiert wird, nachdem jQuery erfolgreich empfangen hat die Daten.

JQuery ist jedoch ein großes Paket, das viele Funktionen enthält, und es macht keinen Sinn, die gesamte jQuery einzuführen, nur um die AJAX-Funktion zu verwenden (es sei denn, Sie verwenden jQuery auch für viele andere Dinge). Was soll ich also verwenden? Die Antwort ist die fetch API.

2. Fetch API

https://github.com/github/fetch

Fetch ist eine neue, einfache, standardisierte API, die zur Vereinheitlichung von Webkommunikationsmechanismen entwickelt wurde und ersetzt XMLHttpRequest. Es wurde von Mainstream-Browsern unterstützt, und es gibt auch ein Polyfill für ältere Browser

(Benz hat es vermasselt: Polyfill ist im wahrsten Sinne des Wortes ein Fülltool, was bedeutet, dass alte Browser ursprünglich keine neue JS-API unterstützen. Nach der Einführung eines Teils von js Code, es wird unterstützt, dieser Teil des JS-Codes „füllt“ eine API für den alten Browser aus. Ich weiß wirklich nicht, wie man dieses Wort übersetzt, aber ich denke, dass es den Lesern leichter fällt, das ursprüngliche Wort unübersetzt zu lassen verstehen.). Wenn Sie Node.js verwenden, können Sie Node.js auch mit Node-Fetch aktivieren, um Fetch zu unterstützen.

Wenn das obige Codesegment mit jQuery $.ajax in fetch geändert wird, sollte der Code wie folgt aussehen: 🎜

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

🎜In einigen beliebten React-Tutorials finden Sie möglicherweise fetch enthalten. Um mehr über fetch zu erfahren, klicken Sie bitte auf den folgenden Link (alle auf Englisch): 🎜

• Mozilla
• David Walsh Blog
• Google-Entwickler
• WHATWG

🎜🎜3, SuperAgent🎜🎜🎜https:/ /github.com/visionmedia/superagent🎜🎜SuperAgent ist eine leichte AJAX-API-Bibliothek, die für bessere Lesbarkeit und Flexibilität entwickelt wurde. Wenn Sie fetch aus irgendeinem Grund nicht verwenden möchten, ist SuperAgent fast eine unumgängliche Wahl. Die Verwendung von SuperAgent ist ungefähr so: 🎜rrreee🎜SuperAgent hat auch eine Node.js-Version und die API ist dieselbe. Wenn Sie Node.js und React verwenden, um isomorphe Anwendungen zu entwickeln🎜 (Benz-Einbruch: Dieser Link wurde von mir hinzugefügt, um sich um Anfänger zu kümmern)🎜, können Sie so etwas wie Webpack zum Einbetten von superagent verwenden Es funktioniert auf der Browserseite. Da die browserseitigen und serverseitigen APIs identisch sind, kann die Node.js-Version im Browser ausgeführt werden, ohne dass Code geändert werden muss. 🎜🎜🎜4, Axios🎜🎜🎜https://github.com/axios/axios🎜🎜Axios ist ein HTTP-Client, der auf Promise-Objekten basiert🎜 (Benz hat es vermasselt: Ich habe diesen Link auch hinzugefügt)🎜; Neben der Durchführung von Anfragen im Hintergrund gibt es auch steuerbare Funktionen, um weitere Aufgaben in der Anfrage zu erledigen. . Wie fetch und superagent unterstützt es sowohl Browser als auch Node.js. Darüber hinaus können Sie auf der Github-Homepage feststellen, dass es über viele nützliche erweiterte Funktionen verfügt. 🎜🎜Dies ist die ungefähre Verwendung von Axios: 🎜rrreee🎜🎜5, Request🎜🎜🎜https://github.com/request/request🎜🎜Wenn ich diese Request-Bibliothek nicht vorstelle, fühlt es sich an, als würde dieser Artikel es sein unvollständig. Dies ist eine JS-Bibliothek, die ideologisch minimalistisches Design verfolgt. Sie hat mehr als 12.000 Sterne auf Github 🎜 (Benz-Chaos: Als ich diesen Artikel übersetzt habe, hatte sie bereits 16.000+ Sterne) 🎜. Es ist auch eines der beliebtesten Node.js-Module. Besuchen Sie die GitHub-Homepage, um mehr zu erfahren. 🎜🎜Anwendungsbeispiel: 🎜rrreee🎜[Verwandte Empfehlungen: 🎜Redis-Video-Tutorial🎜]🎜

Das obige ist der detaillierte Inhalt vonWas für die React-Ajax-Entwicklung zu verwenden ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!