0. 系列文章

项目源码请猛戳这里!!!

1. 前言

在上篇文章中，我们处理了发送get请求时携带的参数要拼接在url上，另外，我们知道当发送post请求时，所携带的参数是存在于请求体body中的，那么这篇文章我们就来处理下发送post请求时body里的参数。

2. 需求分析

我们通过查阅 mdn 发现: send 方法的参数支持 Document 和 BodyInit 类型，BodyInit 包括了 Blob, BufferSource, FormData, URLSearchParams, ReadableStream、USVString，当没有数据的时候，我们还可以传入 null。

但是我们最常用的场景还是传一个普通对象给服务端，例如：

axios({

  method: 'post',

  url: '/api/handleRequestBody/post',

  data: {

    a: 1,

    b: 2

  }

})

这个时候 data是不能直接传给 send 函数的，我们需要把它转换成 JSON 字符串。

3. 实现 transformRequest 函数

根据需求分析，我们要实现一个工具函数，对 request 中的 data 做一层转换。我们在 helpers 目录新建 data.ts 文件。

// src/helpers/data.ts

import {isObject} from './util'

export function transformRequest (data: any): any {

  if (isObject(data)) {

    return JSON.stringify(data)

  }

  return data

}

4. 利用 transformRequest 函数处理body参数

我们首先定义 transformRequestData函数，去转换请求 body 的数据，内部调用了我们刚刚实现的的 transformRequest 方法。

然后我们在 processConfig 内部添加了这段逻辑，在处理完 url 后接着对 config 中的 data 做处理。

// src/index.ts

import {transformRequest} from "./helpers/data";

function processConfig(config: AxiosRequestConfig): void {

  config.url = transformUrl(config);

  config.data = transformRequestData(config)

}

function transformRequestData(config: AxiosRequestConfig): any {

  const {data} = config

  return transformRequest(data)

}

OK，我们对 body 参数处理逻辑就实现完了，接下来我们编写 demo 来试试效果怎么样。

5. 编写demo

在 examples 目录下创建 handleRequestBody目录，在 handleRequestBody目录下创建 index.html:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>handleRequestBody demo</title>

</head>

<body>

<script src="/__build__/handleRequestBody.js"></script>

</body>

</html>

接着再创建 app.ts 作为入口文件：

import axios from '../../src/index'

axios({

  method: 'post',

  url: '/api/handleRequestBody/post',

  data: {

    a: 1,

    b: 2

  }

})

接着在 server/server.js 添加新的接口路由：

router.post('/api/handleRequestBody/post', function(req, res) {

  res.json(req.body)

})

最后在根目录下的index.html中加上启动该demo的入口：

<li><a href="examples/handleRequestBody">handleRequestBody</a></li>

OK,我们在命令行中执行：

# 同时开启客户端和服务端

npm run server | npm start

接着我们打开 chrome 浏览器，访问 http://localhost:8000/ 即可访问我们的 demo 了，我们点击 handleRequestBody，通过F12的 network 部分我们可以观察发出的请求以及请求的参数。

6. 遗留问题

我们从上图中可以看到，虽然携带的参数已经被正常发出了，但是服务端却返回了一个空对象，感觉服务端好像不能正确解析我们传过去的参数呢，这是什么原因呢？我们下篇文章里继续研究。

(完)

使用Typescript重构axios(四)——实现基础功能：处理post请求参数的更多相关文章

使用Typescript重构axios(五)——实现基础功能：处理请求的header
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
使用Typescript重构axios(三)——实现基础功能：处理get请求url参数
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
使用Typescript重构axios(六)——实现基础功能：获取响应数据
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
使用Typescript重构axios(七)——实现基础功能：处理响应header
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
使用Typescript重构axios(八)——实现基础功能：处理响应data
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
使用Typescript重构axios(九)——异常处理：基础版
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
使用Typescript重构axios(十四)——实现拦截器
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
使用Typescript重构axios(十八)——请求取消功能：总体思路
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
使用Typescript重构axios(十九)——请求取消功能：实现第二种使用方式
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...

随机推荐

[插件化开发] 1. 初识OSGI
初识 OSGI 背景当前product是以solution的方式进行售卖,但是随着公司业务规模的快速夸张,随之而来的是新客户的产品开发,老客户的产品维护,升级以及修改bug,团队的效能明显下降,为了 ...
js完整
jQuery jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行 ...
Java自动化测试框架-02 - TestNG之理论实践 - 纸上得来终觉浅，绝知此事要躬行（详细教程）
理论 TestNG,即Testing, NextGeneration,下一代测试技术,是一套根据JUnit 和NUnit思想而构建的利用注释来强化测试功能的一个测试框架,即可以用来做单元测试,也可以用 ...
X-扫描线算法
多边形的扫描转换多边形有两种重要的表示方法:顶点表示和点阵表示顶点表示是用多边形的顶点序列来表示多边形.这种表示直观.几何意义强.占内存少,易于进行几何变换. 但由于它没有明确指出哪些象素在多边形 ...
再谈Transaction——MySQL事务处理分析
MySQL 事务基础概念/Definition of Transaction 事务(Transaction)是访问和更新数据库的程序执行单元;事务中可能包含一个或多个 sql 语句,这些语句要么都执行 ...
django开发中关于外键设置
django开发中关于外键设置我们建模型的时候会用到ForeignKey 而由于外键的约数会导致一些保存所有我们ctrl+左键进入源码源码 def __init__(self, to, on_d ...
实验吧之【因缺思汀的绕过】(group by with rollup的注入利用)
打开页面,查看源代码,发现存在source.txt(http://ctf5.shiyanbar.com/web/pcat/source.txt),如下: <?php error_reportin ...
Ubuntu php + apache
Ubuntu 环境: 问题1: apache 不能解析 *.php 文件安装apache的扩展模块 : apt-get install libapache2-mod-php 问题2 : 客户端访问 ...
PMBOK(第六版) PMP笔记——《十三》第十三章（项目干系人管理）
PMBOK(第六版) PMP笔记——<十三>第十三章(项目干系人管理) 第十三章项目干系人管理: 了解干系人的需要和期望.解决实际发生的问题.管理利益冲突.促进干系人合理参与项目决策和 ...
opencv实践::切边
问题描述真实案例,扫描仪扫描到的法律文件,需要切边,去掉边缘空白,这样看上去才真实. #include <opencv2/opencv.hpp> #include <iostre ...

使用Typescript重构axios(四)——实现基础功能：处理post请求参数