React系列学习笔记：8.ajax服务器数据

前言

本节我们将通过redux中间件，用ajax方法对服务器取得数据，用到的包：

• superagent:封装了ajax方法
• http-proxy:解决跨域ajax问题

配置

helpers/ApiClient.js
对superagent进行重新封装，以适应我们应用需要，这里就不贴代码了。

redux/middleware/clientMiddleware.js promise中间件，用于获取服务器数据。

redux/modules/info.js inforBar的reducer文件，主要是action,types

components/InfoBar/InfoBar.js, container/App/App.js有部分修改，这里就不做说明了。

注意：添加新的组件和中间件，要将他们添加到redux/create，redux/modules/reducers.js中

最后在package.json,中添加命令,同时启动APP 与 API SERVER
"dev": "concurrently --kill-others \"npm run start-dev\" \"npm run start-api\""

好了完成以上工作后，启动命令npm run dev,然后访问http://localhost:3000,我们的infobar出现在我们页面的底部。点击后发现并没有出现我们想要的服务器数据，打开chrome的调试工具发现，是不允许我们访问3030，出现跨域的问题，这里我们用代理服务来解决

代理服务

修改src/server.js添加如下代码

...
import httpProxy from 'http-proxy'
const targetUrl = 'http://' + appConfig.apiHost + ":" + appConfig.apiPort;
const proxy = httpProxy.createProxyServer({
  target:targetUrl
})
...

app.use(express.static(path.join(__dirname,'../public')))

//代理服务器
app.use('/api',(req, res) =>{
  proxy.web(req, res, {target: targetUrl})
})

proxy.on('error', (error, req, res) => {
  let json;
  if (error.code !== 'ECONNRESET') {
    console.error('proxy error', error);
  }
  if (!res.headersSent) {
    res.writeHead(500, {'content-type': 'application/json'});
  }

  json = {error: 'proxy_error', reason: error.message};
  res.end(JSON.stringify(json));
});

...

注意：添加api代理服务器后，要把将action中的promise,指向代理服务器，然后再次运行，访问出现服务器时间。

Next

服务器数据异步取得