react学习系列3 使用koa-router模拟后台接口-阿里云开发者社区

开发者社区> 开发与运维> 正文

react学习系列3 使用koa-router模拟后台接口

简介: 当用create-react-app创建好项目,启动后会自动打开 localhost:3000。 我们希望当访问 localhost:3000/api/todo 会向后台发起一个请求,拿到我们想要的 json 数据。

当用create-react-app创建好项目,启动后会自动打开 localhost:3000。
我们希望当访问 localhost:3000/api/todo 会向后台发起一个请求,拿到我们想要的 json 数据。并渲染到前台。
这样的话需要先创建一个后台服务器。我们使用NodeJS的 express 或 koa 服务器框架。下面以 koa 为例。

实现方法如下:

  1. 安装koa和koa-router。注意我的当前版本是最新的 koa2.3.0 和 koa-router7.2.1
    yarn add koa koa-router

  2. 项目根目录创建一个mock目录,并新建一个server.js
    内容如下:

var Koa = require('koa');
var Router = require('koa-router');

var app = new Koa();
var router = new Router();

router.get('/', function (ctx, next) {
  console.log('say');
  ctx.body = 'hello koa !'
});

// 加前缀
router.prefix('/api');

// 模拟json数据
var todo = require('./todo.js')
router.get('/todos', function (ctx, next) {
  console.log('--todo--')
  ctx.body = todo
});

// 开始服务并生成路由
app.use(router.routes())
   .use(router.allowedMethods());
app.listen(4000);

todo.js

module.exports = [
    {
        title: 'title1',
    },
    {
        title: 'title2',
    }
]
  1. package.json 添加代理信息
    "proxy": "http://localhost:4000",
    这样当我们在create-react-app的代码里调用fetch('api/todos') 会被代理执行http://localhost:4000/api/todos
    并且在 script 节点下添加
    "mock": "node ./mock/server.js"
    这样执行 yarn mock 就启动了这个后台服务

  2. 在 react 中比如入口的 index.js 中添加测试代码。
    我们使用 fetch ,发起客户端请求。

fetch('/api/todos')
  .then(res => res.json())
  .then(res => {
    console.log(res)
  })

参考:

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章