react网络请求 使用http-proxy-middleware配置路由转发 fetch

一、网络请求

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