小白学react之restful api获取服务器数据实战

Posted 2022-05-07 天地会珠海分舵

天地会珠海分舵注:随着微信应用号的呼之欲出，相信新一轮的APP变革即将发生。作为行业内人士，我们很应该去拥抱这个趋势。其中Reactjs相信是开发webapp的佼佼者，这段时间将会通过改造官方实例alt-tutorial来学习Reactjs相关的知识。

通过上一篇文章《小白学react之React Router实战》我们学习了在React Router的基本功能，并根据路由功能建立了一个导航栏，可以方便的切换查看Locations和About。

但是，这里Locations的数据还是在客户端模拟出来的。作为前端应用，和服务器端打交道是在所难免的了。

所以，今天我们准备做一个事情，从服务器端获取真实的Locations数据。

1. Express提供数据

上一篇文章中，我们为了解决React Router的BrowserHistory引发的404 Page Not Found问题，编写了一个Express的服务器。我们可以在该服务器的基础上加入相应的代码来提供数据给前端。

我们先回顾下原来的server.js的代码:

var express = require('express')
var path = require('path')

var app = express()

// serve our static stuff like index.css
app.use(express.static(path.join(__dirname, 'build')))

var PORT = 8080
app.listen(PORT, function() 
  console.log('Production Express server running at localhost:' + PORT)
)

我们这里要做的就是截获用户请求，当用户请求“/api/locations”的时候，将Locations的数据发送回客户端。

所以需要增加的代码非常简单:

let locations = [
   id: 0, name: 'Abu Dhabi' ,
   id: 1, name: 'Berlin' ,
   id: 2, name: 'Bogota' ,
   id: 3, name: 'Buenos Aires' ,
   id: 4, name: 'Cairo' ,
   id: 5, name: 'Chicago' ,
   id: 6, name: 'Lima' ,
   id: 7, name: 'London' ,
   id: 8, name: 'Miami' ,
   id: 9, name: 'Moscow' ,
   id: 10, name: 'Mumbai' ,
   id: 11, name: 'Paris' ,
   id: 12, name: 'San Francisco' 
];
app.get("/api/locations", function(req,res) 
  res.send(locations);
)

• 定义Locations数据
• 截获用户访问请求，如果请求是”/api/locatiions”，则将Locations 数据返回给客户端

这里为两个更好的显示效果，我们通过Promise和setTimeout来加入同步和延时，让客户端感觉到这个网络数据的获取需要一定的时间，而不是像在本地一样立刻有返回。

app.get("/api/locations", function(req,res) 

  new Promise(function (resolve, reject) 
    // simulate an asynchronous flow
    setTimeout(function () 

      // change this to `false` to see the error action being handled.
      if (true) 
        // resolve with some mock data
        res.send(locations);
        resolve();
       else 
        reject('Things have broken');
      
    , 1000);
  );

)

这段代码大概的意思就是，通过setTimeout来设置一定时间的延时，因为setTimeout是异步的操作，所以我们通过Promise来将其变成同步。当睡眠1秒钟之后，将数据locations发回客户端。

到此，Express服务器的代码就准备完毕了，最终代码如下:

var express = require('express')
var path = require('path')

var app = express()

let locations = [
   id: 0, name: 'Abu Dhabi' ,
   id: 1, name: 'Berlin' ,
   id: 2, name: 'Bogota' ,
   id: 3, name: 'Buenos Aires' ,
   id: 4, name: 'Cairo' ,
   id: 5, name: 'Chicago' ,
   id: 6, name: 'Lima' ,
   id: 7, name: 'London' ,
   id: 8, name: 'Miami' ,
   id: 9, name: 'Moscow' ,
   id: 10, name: 'Mumbai' ,
   id: 11, name: 'Paris' ,
   id: 12, name: 'San Francisco' 
];

// serve our static stuff like index.css
app.use(express.static(path.join(__dirname, 'build')))

app.get("/api/locations", function(req,res) 

  new Promise(function (resolve, reject) 
    // simulate an asynchronous flow
    setTimeout(function () 

      // change this to `false` to see the error action being handled.
      if (true) 
        // resolve with some mock data
        res.send(locations);
        resolve();
       else 
        reject('Things have broken');
      
    , 1000);
  );

)

// send all requests to index.html so browserHistory works
app.get('*', function (req, res) 
  res.sendFile(path.join(__dirname, 'build', 'index.html'))
)

var PORT = 8080
app.listen(PORT, function() 
  console.log('Production Express server running at localhost:' + PORT)
)

2. 客户端通过restful api获取数据

客户端获取服务器端的数据的方法有很多实现，这里我们用到的是superagent的两个模块:

• superagent-defaults: 发送网络请求的一个模块。
• superagent-promise-plugin: 可以将superagent的网络请求方法封装成Promise，让我们更好的做同步控制。配合上es6的co模块，代码将会变得异常简洁。

这两个模块的详细使用方法请点击上面的两个链接进去查看。我们这里的使用非常简单，就不做过多的研究和详述。

我们打开src/sources/LocationSource.js文件，将代码修改如下:

import defaults from 'superagent-defaults';
import superagentPromisePlugin from 'superagent-promise-plugin';
var LocationActions = require('../actions/LocationActions');
import co from 'co';
const request = superagentPromisePlugin(defaults());

var mockData = [
   id: 0, name: 'Abu Dhabi' ,
   id: 1, name: 'Berlin' ,
   id: 2, name: 'Bogota' ,
   id: 3, name: 'Buenos Aires' ,
   id: 4, name: 'Cairo' ,
   id: 5, name: 'Chicago' ,
   id: 6, name: 'Lima' ,
   id: 7, name: 'London' ,
   id: 8, name: 'Miami' ,
   id: 9, name: 'Moscow' ,
   id: 10, name: 'Mumbai' ,
   id: 11, name: 'Paris' ,
   id: 12, name: 'San Francisco' 
];

var LocationSource = 
  fetchLocations() 
    return 
      remote() 
        return co(function *() 
          const resp = yield request.get(`/api/locations`);
          return resp.body;
        );
      ,

      local() 
        // Never check locally, always fetch remotely.
        return null;
      ,

      success: LocationActions.updateLocations,
      error: LocationActions.locationsFailed,
      loading: LocationActions.fetchLocations
    
  
;

module.exports = LocationSource;

事实上我们改动的关键代码只有以下这小部分:

      remote() 
        return co(function *() 
          const resp = yield request.get(`/api/locations`);
          return resp.body;

        );
      ,

可以看出来，通过这两个模块来处理网络请求是非行简单的。大家可以自己亲手尝试下。

当然，尝试之前别忘记把这两个模块通过npm给安装上。

这里因为我们使用了一些es6的特性，我们前几章安装babel的那些基本模块是没有完整支持上的。所以这里我们还需要加入babel-polyfill模块的支持。

通过npm安装上babel-polyfill后，我们在入口文件App.jsx上直接加入以下这行代码，整个项目就能顺利跑起来了。

import "babel-polyfill";

如果没有这个包的支持的话，浏览器调试的时候将会收到”regeneratorRuntime is not defined”的错误。

3. 源码获取

git clone https://github.com/kzlathander/alt-tutorial-webpack.git
cd alt-tutorial-webpackgit
checkout 05
npm install
npm run prod

另外：

本文由天地会珠海分舵编写，转载需授权，喜欢点个赞，吐槽请评论，进一步交流请关注公众号techgogogo。

《未完待续》