在 React 如何实现AJAX 请求？实现 AJAX请求的方案！

2021-07-12 16:48:14 浏览数 (48)

 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。


React.JS

1 人点赞