react 安装ajax,在 React 如何实现AJAX 请求？实现 AJAX请求的方案！

jQuery 的 $.ajax有学习过前端的小伙伴都知道在前端框架 react 是如今比较受欢迎的，而且是比较好用的一款前端框架，那么今天我们就来说说有关于 “在 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 请求？”这款问题的相关内容的分享，如果你有其他不同的看法也可以和大家一同分享，更多有关于 react 这方面的相关内容我们都可以在 W3Cschool 中进行了解和学习 react。