数据请求
live-server
什么是live-server
live-server
是一个具有实时加载功能的小型服务器,可以使用它来破解html/css/javascript
,但是不能用于部署最终站点。也就是说我们可以在项目中实时用live-server
作为一个实时服务器实时查看开发的网页或项目效果。
所以这个就当做我们的mock
的服务
安装
npm
的安装方式(推荐)
npm i -g live-server
修改package.json
,添加mock
"scripts": {
"mock": "live-server ./src/mock --port=9000"
},
当然在src/mock
下你得有一个json
文件,然后只需要在终端输入npm run mock
,你的服务就可以启动了。
- 使用
vscode
插件安装
在插件仓库查找live server
,并安装
点击右下角的Go Live
即可启动服务,默认的端口是5500。
axios
Axios
是一个基于promise
的HTTP
库,可以用在浏览器和node.js
中。
- 支持浏览器和
node.js
- 支持
promise
- 能拦截请求和响应
- 能转换请求和响应数据
- 能取消请求
- 自动转换
JSON
数据 - 浏览器端支持防止
CSRF
(跨站请求伪造)
npm install --save axios
安装完成以后引用axios
import axios from "axios"
我们在componentDidMount
这个钩子函数中调用axios
去请求数据,完整代码如下
import React, { Component } from "react";
import axios from "axios"
export default class Api extends Component {
constructor(props){
super(props)
this.state = {
param: ""
}
}
// 钩子函数,当这个Component 渲染完成后自动调用
componentDidMount(){
axios.get("http://127.0.0.1:9000/data.json")
.then((data)=>{
console.log(data.data.log_pb.impr_id)
this.setState({
param: data.data.log_pb.impr_id
})
})
}
render(){
return ( <div>
Api 组件
<div> { this.state.param}</div>
</div> )
}
}
跨域问题
前端代理
/node_modules/react-scripts/config/webpackDevServer.config.js
修改
proxy:{
"/api":{
// target : "http://www.weather.com.cn/data/cityinfo/"
target: "地址",
// changeOrigin
changeOrigin: true,
"pathRewrite":{
"^/api": ""
}
}
},
请求
cityInfo(cityId){
axios.get("/api/"+cityId+".html")
.then((data)=>{
console.log(data.data)
})
}
注意,记得重启一次。
一般情况我们都是让后端允许跨域的。
比如java
的springboot
在contoller
类上标注@CrossOrigin(value = "*")
,等等很多方式。