一、网络请求
ajax、axios、fetch
1.配置代理
(1)直接修改package.json
在react项目的package.json中增加一个代理转发规则:
"proxy":"http://域名:端口号"
重启项目
(2)使用http-proxy-middleware插件
安装
npm i http-proxy-middleware --save
在src目录下创建一个setupProxy.js【名字不能写错】,react会自动的加载这个文件
//引入中间件
const proxy = require('http-proxy-middleware');
//定义具体的转发规则
module.exports = function(app){
app.use(proxy.createProxyMiddleware('/api',{
target:'http://localhost:3000',
changeOrigin:true,
pathRewrite: {
'^/api':'' //重写路由
}
}))
}
路由转发
允许跨域
重写路由
要把package.json写的proxy选项去掉,重启项目
2.fetch发起网络请求
fetch是一种HTTP数据请求的方式,是XMLHttpRequest的一种替代方案。fetch不是ajax的进一步封装,而是原生js。fetch函数就是原生js,没有使用XMLHttpRequest对象。
fetch
1、第一个参数是URL:
2、第二个是可选参数,可以控制不同配置的 init 对象
3、使用了 JavaScript Promises 来处理结果/回调
在页面组件发起网络请求
componentDidMount(){
fetch('/api/getbanner').then(req=>req.json()).then(res=>{
console.log(res)
})
}
发起网络请求中不需要写域名和端口号
3.axios发起网络请求
npm i axios --save