React系列学习笔记：7.简单api服务器

前言

本节我们将创建一个简单的后端API服务器，以便我们的应用进行相应的测试。仅仅只用express创建一个服务器就行，将用到几个express中间件：

• body-parser：用于服务器body的内容解析

服务器

actions/loadInfo.js
一个简单的时间加载信息，用于测试。非常简单，仅仅就是返回一个Promise的信息

export default function loadInfo(){
  return Promise.resolve({
    message:'This came from the api server',
    time:Date.now()
  })
}

以后因为还要添加其他API接口，所以这里我们要编写一个针对不同的url访问不同API的能用函数utils/url.js

export default function mapUrl(availableActions={},url=[]){
  //错误url或没有api接口时反回错误
  const notFound = {action:null,params:[]}
  if (url.length === 0 || Object.keys(availableActions).length === 0 ){
    return notFound
  }

  const reducer = (prev, current) => {
    if (prev.action && prev.action[current]) {
      return {action: prev.action[current], params: []}; // go deeper
    } else {
      if (typeof prev.action === 'function') {
        return {action: prev.action, params: prev.params.concat(current)}; // params are found
      } else {
        return notFound;
      }
    }
  };

  const actionAndParams = url.reduce(reducer,{action:availableActions,params:[]})

  return (typeof actionAndParams.action === 'function') ? actionAndParams : notFound

}

api.js
服务器入口文件，通过上面的mapUrl函数简单的将url与action对应起来。

import express from 'express';
import bodyParser from 'body-parser';

import mapUrl from './utils/url'
import * as actions from './actions'
import config from '../config/appConfig'

const app = express()


app.use(bodyParser.json());

app.use((req,res) =>{


  //比如请求url为/loadInfo/param1/param2?user=John 结果为['loadInfo','pamam1','param2']
  const splitteUrlPath = req.url.split('?')[0].split('/').slice(1)
  const {action, params} = mapUrl(actions,splitteUrlPath)

  if(action){
    action(req,params)
      .then((result) => {
        if (result instanceof Function){
          result(req)
        }else{
          res.json(result)
        }
      },(reason) => {
          if(reason && reason.redirect){
            reason.redirect(reason.redirect)
          }else{
            res.status(reason.status || 500).json(reason)
          }
      })
  }else{
    res.status(404).end('Not Found')
  }
})

if(config.apiPort){
  app.listen(config.apiPort,(err)=>{
    if (err) { console.log(err)}
    console.log('Api server listen at %s', config.apiPort)
  })
}

最后在package.json里添加启动命令，然后访问http://localhost:3030看到反回的时间，说明我们的服务器正常运行