What to use for react ajax development

react ajax development can use: 1. jQuery's "$.ajax" method; 2. Fetch API; 3. SuperAgent, which 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.

Five solutions for React AJAX requests

1. jQuery $.ajax

This is a quick and crude solution. In the old version of the official React tutorial, they used jQuery $.ajax to demonstrate how to get data from the server. If you are just starting to learn and play with React, jQuery can save you a lot of time in getting started and developing, 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});   // 注意这里
        }.bind(this),
        error: function(xhr, status, err) {
            console.error(this.props.url, status, err.toString());
        }.bind(this)
    });
}

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

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

However, jQuery is a big one that contains many functions, and it makes no sense to introduce the entire jQuery just to use the AJAX function (unless you also use jQuery to do a lot of other things). So, what should I use? The answer is fetch API.

2. Fetch API

https://github.com/github/fetch

Fetch is new, Simple, standardized API designed to unify Web communication mechanisms and replace XMLHttpRequest. It has been supported by mainstream browsers, and there is also a polyfill for older browsers (Benz chaos: polyfill literally means filling tool, which means that old browsers do not originally support a new JS API and introduce a piece of js code It will be supported later. This js code "fills in" an API for the old browser. I really don't know how to translate this word, but I feel that leaving the original word untranslated will make it easier for readers to understand.) . If you are using Node.js, you can also enable Node.js to support Fetch through node-fetch.

If the above code segment using jQuery $.ajax is changed to fetch, the code should look like this:

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

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

• Mozilla
• David Walsh Blog
• Google Developers
• WHATWG

3、SuperAgent

https://github.com/visionmedia/superagent

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

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

SuperAgent also has a Node.js version, and the API is the same. If you are using Node.js and React to develop isomorphic applications(Benz messed in: This link was added by me to take care of beginners), you can use something like webpack to embed superagent and make it work on the browser side. Because the browser-side and server-side APIs are the same, its Node.js version can run on the browser without modifying any code.

4, Axios

https://github.com/axios/axios

Axios is a promise-based object(Benz intrusion : This link was also added by me) HTTP client; axios is mainly used to initiate requests to the background, and there are more controllable functions in the request. . Like fetch and superagent, it supports both the browser side and the Node.js side. In addition, you can find on its Github homepage that it has many useful advanced features.

This is the approximate usage of Axios:

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

5, Request

https://github.com/request/request

If I don’t introduce this request library, I feel that this article will be incomplete. This is a JS library that pursues minimalist design in ideology. It has more than 12k stars on Github (Benz messed up: it already had 16k stars when I translated this article) . It is also one of the most popular Node.js modules. Go to its GitHub homepage to learn more.

Usage example:

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

[Related recommendations: Redis video tutorial]

The above is the detailed content of What to use for react ajax development. For more information, please follow other related articles on the PHP Chinese website!