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

Editor to share with you how to achieve AJAX request in React, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Method one: jQuery $. Ajax

This method is fast and rough. In the old official React tutorial, they used jQuery $. Ajax to demonstrate how to get data from the server. Let's take a look at an example of implementing Ajax. The code is as follows:

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)});}

The code demonstrates how to use jQuery's $.ajax in a component, and in the code our callback function uses this.setState (); that is, how to update state through React's API when jQuery successfully receives the data.

Method 2: Fetch API

It is a new, simple, standardized API for this approach, designed to unify Web communication mechanisms and replace XMLHttpRequest. And if you are using Node.js, you can also use node-fetch to make Node.js support Fetch. Through the example of method 1 above, our code is as follows:

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

Method 3: SuperAgent

For the SuperAgent method, it is a lightweight Ajax Api library, and we also take a look at the following code through the example of method 1:

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

For SuperAgent, it also has a Node.js version, and API is the same. And if you're developing homogeneous applications with Node.js and React, we 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.

Method 4: Axios

For this method, it is a HTTP client based on promise objects, like fetch and SuperAgent, it can also support browsers and Node.js. Through the example in method 1, let's take a look at the usage code of Axios as follows:

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

Method 5: Request

For Request, an ideologically minimalist JS library, it is also one of the most popular Node.js modules. The case code for usage is as follows:

LoadCommentsFromServer: function () {request (this.props.url, function (err, response, body) {/ / implement setState} here);} above is all the content of the article "how to implement AJAX requests in React". 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.