Shulou(Shulou.com)06/01 Report--

Editor to share with you what the React AJAX request programs are, I believe most people do not know much, so share this article for your reference, I hope you will learn a lot after reading this article, let's go to know it!

React ajax development can use: 1, jQuery's "$. Ajax" method; 2, Fetch API;3, SuperAgent, it is a lightweight AJAX API library; 4, Axios library, mainly used to initiate requests to the background; 5, Request library.

The operating environment of this tutorial: Windows7 system, react17.0.1 version, Dell G3 computer.

5 options requested by React AJAX 1, jQuery $. Ajax

This is a quick and rough plan. In the old version of the official React tutorial (official React tutorial), they used jQuery $. Ajax to demonstrate how to get data from a server. If you are just beginning to learn and play React,jQuery can save you a lot of time to get started and develop, because we are all very familiar with jQuery. This is an example of jQuery implementing AJAX:

LoadCommentsFromServer: function () {$.ajax ({url: this.props.url, dataType: 'json', cache: false, success: function (data) {this.setState ({data: data})) / / notice here} .bind (this), error: function (xhr, status, err) {console.error (this.props.url, status, err.toString ();} .bind (this)});}

P.S. This code snippet is from the old version of the official tutorial.

This demonstrates how to use jQuery's $.ajax in a React component. The only thing to notice is how to call this.setState () in the success callback, that is, how to update the state through React's API when the jQuery successfully receives the data.

However, jQuery is a big boss with a lot of features, and it doesn't make sense to introduce the whole jQuery just to use the AJAX functionality (unless you do a lot of other things with jQuery). So, what should I use? The answer is fetch API.

2 、 Fetch API

Https://github.com/github/fetch

Fetch is a new, simple, standardized API designed to unify Web communication mechanisms and replace XMLHttpRequest. It has been supported by mainstream browsers, and there is a polyfill for older browsers (Benz random entry: polyfill literal translation is a filling tool, that is, the old browser does not support a new JS API, but after the introduction of a piece of js code, this js code "populates" the old browser with an API. I really don't know how to translate this word. I feel that keeping the original word without translation is more understandable to readers. ). If you are using Node.js, you can also use node-fetch to make Node.js support Fetch.

If you change the above code snippet using jQuery $. Ajax to fetch implementation, the code should look like this:

LoadCommentsFromServer: function () {fetch (this.props.url) .then (function (response) {/ / implement setState} here);}

You may find fetch in some popular React tutorials. To learn more about fetch, please refer to the following link (all English):

Mozilla

David Walsh Blog

Google Developers

WHATWG

3 、 SuperAgent

Https://github.com/visionmedia/superagent

SuperAgent is a lightweight AJAX API library created for better readability and flexibility. If for some reason you don't want to use fetch, then SuperAgent is an almost inevitable choice. The usage of SuperAgent is something like this:

LoadCommentsFromServer: function () {request.get (this.props.url) .end (function (err,res) {/ / implement setState} here);}

SuperAgent also has a Node.js version, and API is the same. If you are developing homogeneous applications with Node.js and React (Benz random entry: I added this link to take care of beginners), you can embed superagent with things like webpack and make it work on the browser side. Because the browser-side and server-side API are the same, the Node.js version can run on the browser without modifying any code.

4 、 Axios

Https://github.com/axios/axios

Axios is a HTTP client based on promise objects (Benz intrusions: this link is also added by me); axios is mainly used to make requests to the background, and to do more in the request is a controllable function. Like fetch and superagent, it supports both the browser side and the Node.js side. In addition, you can find it on its Github home page, it has a lot of practical advanced features.

This is the approximate usage of Axios:

LoadCommentsFromServer: function () {axios.get (this.props.url) .then (function (response) {/ / implement setState} here) .catch (function (error) {/ / handle request error});} 5, Request

Https://github.com/request/request

Without the introduction of this request library, it feels like this article will be incomplete. This is an ideologically minimalist JS library with more than 12k star on Github (Benz random entry: I have already 16k + star when I translated this article). It is also one of the most popular Node.js modules. Go to its GitHub home page to learn more.

Usage example:

LoadCommentsFromServer: function () {request (this.props.url, function (err, response, body) {/ / implement setState} here);} above is all the content of the article "what are the solutions requested by React AJAX?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.