每天学点React - React Ajax基础使用方式（二）

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第23 天，点击查看活动详情

上篇回顾

在《每天学点React - React Ajax基础使用方式（一）》中我们已经实现了基础的axios请求方式，那么在这一篇中，我们再来说一说另一种实现方式吧。

setupProxy.js

上一篇我们是在package.json中添加了proxy属性，其只能代理一个端口，如果我们需要请求多个端口的，例如：5000、5001、5002等等，采用上面等方式无疑是无法实现等，那么我们该如何实现不同接口请求不同的端口呢？

在React中，我们可以通过setupProxy配置文件来配置对应的代理，在这框架中，他会读取该配置文件，并解析里面的内容。

// 引入代理，不用自己安装，React里面已经包含了该库
const proxy = require('http-proxy-middleware')

module.exports = function(app) {
    app.use(
        // 设置代理的接口前缀
        proxy('/api1', {
            // 目标地址
            target: 'http://localhost:5000',
            // 控制服务器收到的请求头中Host的值
            changeOrigin: true,
            // 路径截取
            pathRewrite: {'^/api1': ''}
        })
    )
}

哦吼，竟然无法访问了，这是怎么回事呀，怎么添加了代理反而把应用本身的接口给整没了，凉凉了看来是～

通过一番冥(bai)思(du)苦(cha)想(zhao)，终于发现了这是跟http-proxy-middleware的版本有关，新版本的写法为：

const {createProxyMiddleware} = require('http-proxy-middleware')

module.exports = function(app) {
    app.use(
        reateProxyMiddleware('/api1', {
            target: 'http://localhost:5000',
            changeOrigin: true,
            pathRewrite: {'^/api1': ''}
        })
    )
}

现在让我们再来重启下项目看一下效果吧：

好了，页面终于正常显示出来了。

接下来，修改下我们的请求接口路径吧，请求到/api1的路径下，看能不能实现转发。

getData = () => {
    axios.get('http://localhost:3000/api1/data')
        .then(
            response => { console.log(response.data) },
            error => { console.log(error) }
        )
}

可以正常的拿到服务器给的响应了。

/api1的接口已经通了，那么我们把5001端口的转发也顺便实现一下看看行不行吧，还是老规矩，在setupProxy.js文件中配置上转发参数：

const {createProxyMiddleware} = require('http-proxy-middleware')

module.exports = function(app) {
    app.use(
        createProxyMiddleware('/api1', {
            target: 'http://localhost:5000',
            changeOrigin: true,
            pathRewrite: {'^/api1': ''}
        }),
        createProxyMiddleware('/api2', {
            target: 'http://localhost:5001',
            changeOrigin: true,
            pathRewrite: {'^/api2': ''}
        })
    )
}

然后添加多一个按钮用来向5001端口发起请求

export default class App extends Component {

    getData1 = () => {
        axios.get('http://localhost:3000/api1/data')
            .then(
                response => { console.log(response.data) },
                error => { console.log(error) }
            )
    }

    getData2 = () => {
        axios.get('http://localhost:3000/api2/getData')
            .then(
                response => { console.log(response.data) },
                error => { console.log(error) }
            )
    }

    render() {
        return (
            <div>
                <button onClick={this.getData1}>获取数据1</button>
                <button onClick={this.getData2}>获取数据2</button>
            </div>
        )
    }
}

从效果图中可以看到，我们分别向5000、5001两个接口发起的请求都能正常的得到响应了。

通过setupProxy.js，我们可以非常灵活的根据不同的路径，将请求转发至不同的接口。