初学react(3)——请求数据

在日常开发中，是离不开前后端交互的，普遍场景下，react应用和后端的交互使用ajax请求，在react中如何去发起一个ajax请求呢？在没有后端接口的情况下，我们可以在项目中加入JSON文件，直接访问开发环境开启的服务，这样又不会涉及到跨域问题。所以，第一步先在项目的public目录创建JSON文件：

我这里创建了一个static目录，这个目录是随意创建的，到时请求时写入对应的目录即可。我的users.JSON写入的内容是：

[{
    "name": "小明",
    "age": 16
}, {
    "name": "小红",
    "age": 15
}, {
    "name": "小花",
    "age": 17
}]

在MyComponent组件中，发起一个请求,代码如下：

import React, { Component } from 'react'
import './index.css'
class MyComponent extends Component {
    constructor(props) {
        super(props)
        this.state = { count: 1, users: [] }
    }
    componentWillMount() {
        fetch('/static/users.json').then(res => {
            return res.json()
        }).then(data => {
            this.setState({users: data})
        })
    }
    add() {
        this.setState(preState => ({count: preState.count + 1}))
    }
    render() {
        return (<ul className="my-component">
           {this.state.users.map((user, index) => {
               return (<li key={index}>   
                姓名：{user.name}
                &nbsp;&nbsp;
                年龄：{user.age}
            </li>)
           })}
        </ul>)
    }
}

export default  MyComponent

再修改index.css的width属性为300px，就得到以下的效果：

以上的情况是把JSON文件写到了react项目里，然后发送请求获取数据，若是需要在开发环境对接其它服务时，又如何实现？

我利用nodejs搭建一个服务，文件内容如下：

users.json的文件与上面react项目里面的一样，然后，把创建服务的代码写到app.js里，代码如下：

const http = require('http')
const users = require('./static/users')
http.createServer((req, res) => {
    if(req.url === '/api/users') {
        res.writeHead(200,{'Content-Type':'text/html;charset=utf-8'})
        res.end(JSON.stringify(users))
    }
    res.end()
}).listen(8000)

代码解释：引入了http模块，创建一个监听8000端口的服务，对url为“/api/users”的访问，返回users.json里面的内容。

首先，我们开启上面的服务：在目录下输入命令行：node app。接下来，我们在react项目中取上面的数据，这里访问的接口服务端口号与项目所在的服务端口号不一样，涉及到跨域问题，要在开发环境中，想要正常访问到8000端口的服务，我们需要代理。代理的做法是：在项目的package.json文件添加“proxy”属性，并重新运行npm start，我的设置是：

接着在原来的请求改写一下url：

到这里，应用就正确通过请求取到数据并渲染到页面上。

初学react(3)——请求数据

猜你喜欢