在React怎么实现AJAX请求

小编给大家分享一下在React怎么实现AJAX请求，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

方法一：jQuery $.ajax

这个方法是比较快而且还粗暴的方法，在旧的官方 React 教程中，他们使用了 jQuery $.ajax 来示范如何从服务器获取数据，我们来看看有关于实现 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)
    });
}

 在代码中演示了如何在一个组件中使用 jQuery 的 $.ajax，而且在代码中我们的回调函数用的是  this.setState() ；即当 jQuery 成功收到数据之后应该如何通过 React 的 API 更新 state 的。

方法二：Fetch API 

对于这个方法来说是个新的、简单的、标准化的API，旨在统一Web通信机制，并替代 XMLHttpRequest。而且如果你在使用 Node.js ，你也可以通过 node-fetch 来使 Node.js 支持 Fetch。 通过上面方法一的案例我们的代码如下所示：

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

方法三：SuperAgent 

对于 SuperAgent 这个方法来说它是一个轻量级的 Ajax Api 库，我们也是通过方法一的案例来看看下面这个代码：

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

对于 SuperAgent 来说它也有 Node.js 版本，API 是一样的。而且 如果你在用 Node.js 和 React 开发同构应用；我们可以用 webpack 之类的东西嵌入 superagent 并让它适用于浏览器端。因为浏览器端和服务器端的 API 是一样的，所以其 Node.js 版本不需要修改任何代码就可以在浏览器上运行。 

方法四： Axios 

对于这个方法的话它是基于 promise 对象的 HTTP 客户端和 fetch 、SuperAgent 一样，它也可以支持浏览器和 Node.js 端。通过方法一中的案例我们来看看 Axios 的用法代码如下所示：

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

方法五：Request 

对于 Request 这是一个在思想上追求极简设计的 JS 库，他也是最流行的 Node.js 模块之一，用法的案例代码如下所示：

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

以上是“在React怎么实现AJAX请求”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！