nodejs模拟后端返回

目的：模拟后端对数据的处理，了解服务端

client可以使用fetch或axios发起请求，server可以使用express或koa

可运行代码   GitHub - printlnCout/axios-fetch-demo: 学习fetch与axios与后端的请求

相关介绍

axios: Axios

fetch: Fetch API - Web API 接口参考 | MDN

express: Express - 基于 Node.js 平台的 web 应用开发框架 - Express 中文文档 | Express 中文网

koa: Koa - next generation web framework for node.js

一、请求发起

1. fetch

fetch发起get请求，并在url中携带动态参数与请求参数

const fetchGETConfig = {
  method: 'GET',
  mode: 'cors',
};

fetch('http://localhost:3000/23?name=jake', fetchGETConfig)
  .then(data => data.text())
  .then(res => console.log('fetch: ', res));

fetch发送POST请求并将请求参数放在body中

const paramsBody = {
  name: 'jake',
  age: 26,
};

const fetchConfig = {
  method: 'POST',
  body: JSON.stringify(paramsBody),
  mode: 'cors',
  headers: {
    'Content-Type': 'application/json',
  },
};

fetch('http://localhost:3000/:id', fetchConfig)
  //返回的data是Response类型，调用它上面的json方法返回Promise，解决值为json类型
  .then(data => data.json()) 
  .then(res => console.log('fetch: ', res));

2. axios

修改默认配置

axios.defaults.baseURL = 'http://localhost:3000/';
axios.defaults.timeout = 1000;

发起GET请求

const axiosConfig = {
  method: 'GET',
  url: '/123?name=jake',
};

axios(axiosConfig)
  .then(res => console.log('axios: ', res.data));

发起POST请求

const axiosConfig = {
  method: 'post',
  url: '/123',
  params: {
    ID: 12345
  },
  data: {
    name: 'jake'
  },
};

axios(axiosConfig)
  .then(res => console.log('axios: ', res.data));

二、服务端接受请求并提取信息

1. express

const express = require('express');
const bodyParser = require('body-parser');
const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

// 先设置跨域
app.all('*', (req, res, next) => {
  res.header("Access-Control-Allow-Origin", '*');
  res.header("Access-Control-Allow-Method", 'PUT, GET, POST, DELETE, OPTIONS');
  res.header("Access-Control-Allow-Headers", 'X-Requested-With');
  res.header("Access-Control-Allow-Headers", 'Content-Type');
  next();
});

app.listen(3000);

接收GET请求带上的数据

// 通过路由配置相应的执行函数, res.send返回
// 请求url为： http://localhost:3000/23?name=jake
app.get('/:id', (req, res) => {
  res.send({
    query: req.query, // req.query包含请求参数
    params: req.params, // req.params包含动态参数
  });
});

接收POST请求带上的数据

app.post('/:id', (req, res) => {
  res.send({
    query: req.body, // 拿body中的请求参数
    params: req.params, // 拿动态参数
  });
});

koa

const Koa = require('koa');
const bodyParser = require('koa-bodyparser');
const router = require('koa-router')();
const cors = require('koa2-cors');
const app = new Koa();

const main = async (ctx) => {
  ctx.response.body = 'hello';
};

router.get('/:aid', main);

app.use(cors());
app.use(bodyParser());
app.use(router.routes()); // 启动路由

app.listen(3000);

取数据

const main = async (ctx) => {
  console.log(ctx.params);
  console.log(ctx.query);
  console.log(ctx.request.body);
  ctx.response.body = 'dfd'; // 修改response.body会调用set修改返回的状态码及相关信息
};

router.get('/:id', main);