React学习（4）——向服务器请求数据并显示

时间 2019-12-18

原文原文链接

本文中涉及到的技术包括：node.js/express服务器的搭建、fetch发送数据请求。javascript

在以前的几篇文章中，介绍了如何搭建基础的React项目，以及一些简单知识，如今，咱们还须要掌握如何用React来向后台服务器发起HTTP请求，来获取数据。由于一个网站光有静态的页面是不够的，只能称其为静态网站，咱们须要获取到数据才能让网页呈现更为丰富的内容。html

如今的网站开发通常都采用先后端分离的开发方式。前端人员负责前端页面的实现，后端人员负责提供数据，前端页面将经过访问api接口的方式来连接后台，获取相应的数据，以下图所示：前端

目前很流行的方式是经过JQuery中的 AJAX 方法来获取数据，引入JQuery后使用 $.ajax() 去访问特定的url地址，经过GET、POST等方式进行数据通讯。本文中采用的方式是经过 Fetch 方法来进行数据通讯，一样能够向后台服务器发起GET、POST等请求。各位也能够直接使用原生的 XMLHttpRequest 方法来实现。java

咱们如今有了请求数据的方法，那么咱们请求的对象在哪里呢，就须要咱们亲自动手来搭建后台服务器了。用于构建后台服务器的技术有许多， .NET、JAVA、PHP都是不错的选择。本文咱们将在 node.js 平台中使用 express 框架来搭建本地服务器。为何选择node.js呢，由于咱们的React项目是就跑在node.js环境中的，各位在搭建React项目的同时对node.js应该已经有所熟悉，咱们也不用特意去学习一门后台开发语言（固然，若是你已经掌握了其余的后台开发技术，也能够用本身熟悉的方式来搭建后台服务器，只须要向咱们的React项目提供api接口）node

下面，咱们就来搭建后台服务器，你们能够参照以下连接中的教程，其中讲得很详细：react

http://www.runoob.com/nodejs/nodejs-express-framework.htmlajax

如今咱们来开始搭建 node.js 服务器，建立一个项目文件夹，在CMD命令行中输入：express

cnpm install express --save （cnpm须要另行安装，用npm效果同样，只是慢一点）npm

安装完后咱们来查看一下项目文件夹中的内容json

express相关的依赖包已经被放在了 node_modules 文件夹下，package.json用于记录已安装的项目依赖包等信息。

下面来依次导入依赖包，搭建项目环境。

在CMD命令行中依次输入：

        cnpm install body-parser --save
        cnpm install cookie-parser --save
        cnpm install multer --save

查看一下package.json文件内容，咱们能够看到这些依赖包的信息，json文件不能直接打开，你们可使用各类文本编辑器，这里本人采用的是VScode，文件内容以下：

{
"dependencies": {
"body-parser": "^1.18.2",
"cookie-parser": "^1.4.3",
"express": "^4.16.3",
"multer": "^1.3.0"
}
}

　那么，如今配置好了环境，接下来咱们就要开始搭建服务了，建立一个名称为：myserver.js 的文件，在其中输入以下代码

var express = require('express');
var app = express();
app.get('/', function (req, res) {
res.send('This is test message!');
})
var server = app.listen(8081, function () {
var host = server.address().address
var port = server.address().port
console.log("应用实例，访问地址为 http://%s:%s", host, port)
})

其中建立了一个对于GET请求的监听接口，地址为“/”，因为咱们是在本地搭建服务器，因此这个接口的完整地址就是 localhost:8081/ ，其中的8081就是服务器在本地环境中的访问端口号。在res.send()函数中咱们放入了一条字符串信息，内容为 'This is test message!' ，也就是api接口返回的信息。

保存这个文件并放在项目主目录下，在CMD命令行中输入以下指令：

node myserver.js

而后咱们就成功启动了服务器，端口号为8081，咱们能够直接在浏览器中输入 localhost:8081/ 来访问，内容以下：

咱们能够在浏览器中看到以前保存在 myserver.js 文件中的字符串。如今咱们已经可以从浏览器中看到api接口给出的数据，而后，能够试着在React项目中访问api接口。

用VScode编辑器打开已经建立完成的React项目目录

咱们建立一个组件，内容以下：

import React from 'react';

class Page2 extends React.Component{
constructor(props){ //构造函数
super(props);
this.state = {
mytext : '',
}
}

getData(){ //请求数据函数
fetch(`http://127.0.0.1:8081/`,{
method: 'GET'
}).then(res => res.text()).then(
data => {
this.setState({mytext:data})
}
)
}

componentWillMount(){
this.getData();
}

    render(){
    return(<div><div>{this.state.mytext}</div></div>);
　　}
}

export default Page2;

下面来分析一下代码，首先，在上方的“构造函数”constructor中，设置了State的初值，添加一个mytext属性，初始值为空，其余内容是标准的构造语法，能够参照React官方资料。以后，咱们建立一个getData() 函数，用于实现fetch方法获取后台服务器的数据。

如上所示，fetch方法有两个传入的参数，一个是url，也就是后台api接口所在的地址，另外一个是{method:'GET'}，意思是采用GET方式与后台服务器进行通讯。后面的 .then( ) 方法将上面传回来的结果进行进一步的处理，将结果做为 res这个对象传入，并使用 .text() 方法使其转化为字符串类型，而后再下一个 .then( ) 方法中将上一步的返回值做为data 赋值给 state里的mytext。

（Fetch的详细用法各位能够参照一下网上的资料，本文只是简单使用，不作太多介绍）

如今咱们有了获取数据的函数，须要调用这个函数，这里要注意的是，咱们不能直接在下方的render函数里调用getData( )，那样会形成页面死循环，因为React的特性，在render函数中，每当State被改变时就会从新渲染组件，getData( )函数中涉及到了对State的更改，因此React系统会从新去渲染页面==>加载render函数==>从新调用getData( )==>从新渲染页面==>一直死循环...

因此咱们须要使用到React的生命周期函数，componentWillMount( )，将getData函数放置在其中，这个生命周期函数会在组件被渲染前调用，这个时候改变State就不会形成死循环。

（关于生命周期各位能够参照React官方文档 https://doc.react-china.org/ ）

而后，咱们须要将State中的数据显示出来，在render函数return的标签中如上所示将 this.state.mytext 的内容显示出来。

保存文件，用 npm start 启动项目，输入 localhost:3000 页面将会呈现以下内容：

注意，这里会出现一个问题，没法实现跨域请求，也就是说，咱们的React项目所在的 3000 端口与后台服务应用的 8081 端口不能进行通讯，这是出于安全考虑，为了解决这一问题，能够在后台服务应用 myserver.js 中加入下面这段代码：把rapp.get那替换掉就能够了以后重启一下 node myserver.js

app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",' 3.2.1');
res.header("Content-Type", "application/json;charset=utf-8");
res.send("this is templace!!!")
next();
});

这样就可让React项目进行跨域请求，显示数据。

如今，咱们成功地从后台api中获取并显示字符串信息，那么其余类型的数据也能够这样吗？

下面咱们来实现对json格式数据的获取。

首先要对 node.js/express 服务应用进行改造，代码以下：

var express = require('express');
var app = express();
app.all('/json', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By",' 3.2.1');
    res.header("Content-Type", "application/json;charset=utf-8");
    
    let myjson = {
        name : '盒装牛奶',
        price : '3元',
        date : '2018年1月1日'
        }
        res.send(myjson);
    next();
    });
var server = app.listen(8081, function () {
var host = server.address().address
var port = server.address().port
console.log("应用实例，访问地址为 http://%s:%s", host, port)
})

在代码中，咱们添加了一个get方法，地址为'/json'，也就是 localhost:8081/json ，在方法中建立了一个json格式的数据对象 myjson，而后将其传回。

ctrl+c 退出原来的服务，使用 node myserver.js 从新启动服务后，咱们用浏览器来访问 localhost:8081/json ,内容以下：

咱们成功地从后台服务器中获取了json格式的数据，下面咱们要在react项目中将其显示出来，改造Page2组件，代码以下：

import React from 'react';

class Page2 extends React.Component{
constructor(props){ //构造函数
super(props);
this.state = {
mytext : '',
}
}

getData(){ //请求数据函数
fetch(`http://127.0.0.1:8081/json`,{
method: 'GET'
}).then(res => res.json()).then(
data => {
this.setState({mytext:data})
}
)
}

componentWillMount(){
this.getData();
}


render(){

return(
<div>
<div>{this.state.mytext.name}</div>
<div>{this.state.mytext.price}</div>
<div>{this.state.mytext.date}</div>
</div>
);
}
}
export default Page2;

其中，fetch函数的url要改变为 localhost:8081/json ，在后面的.text( ) 方法要改成 .json( )，将数据转换为json格式，在render函数的return里面建立3对<div>标签，分别显示mytext数据对象的name、price、date属性，在页面中咱们能够看到：

上所示，咱们储存在后台服务器中的json数据被传递了过来，并由React应用渲染在了页面上。

到此，本篇文章的内容就结束了，这次介绍了如何搭建 node.js/express 服务器，以及介绍了如何在React项目中使用Fetch获取数据，存放在State中，并渲染出来。但愿对各位有所帮助，也是对本人学习心得的记录，感谢各位支持。后续还会有React相关文章更新。

记录学习。看一遍不如本身实践一次，勤动手，勤动脑，迈出第一步！

看后续文章的能够点击这个连接，https://blog.csdn.net/daxiazouyizou/article/details/80196815