持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第22 天,点击查看活动详情
React Ajax
前置说明
React
本身只关注于界面,并不包含发送ajax
请求的代码- 前端应用需要通过
ajax
请求与后台进行交互(json数据) React
应用中需要集成第三方ajax
库(或自己封装)
常用的ajax
请求库
jQuery
:比较重,如果需要另外引入则不建议使用axios
:轻量级- 封装
XmlHttpRequest
对象的ajax
promise
风格- 可以用在浏览器端和
node
服务器端
- 封装
axios
首先,我们需要安装axios
,再使用该库来发起请求。
安装命令(mac系统):sudo npm add axios
React案例代码
import React, { Component } from 'react'
import axios from 'axios'
export default class App extends Component {
// 使用axios请求接口获取数据
getData = () => {
axios.get('http://localhost:8080/')
.then(
response => {console.log(response.data)},
error => {console.log(error)}
)
}
render() {
return (
<div>
<button onClick={this.getData}>获取数据</button>
</div>
)
}
}
从效果图中可以看到,我们有发出请求,但是遇到了跨域的问题,那么该问题应该如何解决呢?
Node启动服务端
首先,我们使用node
+ express
启动一个简单的测试用服务器,便于我们axios
发起请求调用接口。
其中,express
需要我们安装一下,命令(mac系统):sudo npm add express
// 引入express
const express = require('express')
const app = express()
app.use((request, response, next) => {
console.log('服务器接收到请求!')
next()
})
// 定义接口
app.get('/data', (request, response) => {
const data = [
{id: 1, name: 'zhangsan'},
{id: 2, name: 'lisi'}
]
response.send(data)
})
// 监听 5000 端口
app.listen(5000, (err) => {
if(!err){
console.log('服务器启动成功,地址: http://localhost:5000')
}
})
React配置跨域代理
第一种
我们可以在package.json
文件中配置proxy
属性,将请求转发到我们启动的服务器端口上。
"proxy": "http://localhost:5000"
同时,需要将我们发出的请求端口改为当前应用端口
getData = () => {
axios.get('http://localhost:3000/')
.then(
response => {console.log(response.data)},
error => {console.log(error)}
)
}
再测试一下,可以正常到拿到响应信息了。
需要注意的是,我们使用该方式转发的话,只有当本地没有对应路径的,才会转发到服务器端,如果本地有相关接口,则会有限请求到本地资源,例如:http://localhost:3000/index.html
拿到到是本地public
目录下到index.html
文件内容。