三、处理post请求和请求头

通过上两篇文章的回顾，我们已经把整个项目的框架搭建起来了，并且通过重装url实现get数据请求。本篇我们将要实现post数据请求。

一、需求分析

1、post请求使用的是config中data属性的值

axios({
  method: 'post',
  url: '/base/post',
  headers: {
    'content-type': 'application/json;charset=utf-8'
  },
  data: {
    a: 1,
    b: 2
  }
})

2、post请求中，我们要正确地处理请求头的信息，不然后端是不能正常的返回数据

二、代码实现

1、新建/src/helpers/data.ts

：数据在传输的时候要以字符串的形式传递，所以要调用JSON.stringfy()方法

import { isPlainObject } from './util'
export function transformRequest(data: any): any {
  if (isPlainObject(data)) {
    return JSON.stringify(data)
  }
}

2、在/src/index.ts中调用该方法

function processConfig(config: AxiosRequestConfig):void{
  config.url = transformURL(config)
  config.headers = transformHeaders(config)
  config.data = transformDataRequest(config)
}  

function transformDataRequest(config: AxiosRequestConfig): string {
  return transformRequest(config.data)
}

3、处理请求头

新建/src/helpers/header.ts

import { isPlainObject } from './util'
function normalizeHeaderName(headers: any, normalizedName: string): void {
  if (!headers) {
    return
  }
  Object.keys(headers).forEach(name => {
    if (name !== normalizedName && name.toUpperCase() === normalizedName.toUpperCase()) {
      headers[normalizedName] = headers[name]
      delete headers[name]
    }
  })
}

export function processHeaders(headers: any, data: any): any {
  normalizeHeaderName(headers, 'Content-Type')
  if (isPlainObject(data)) {
    if (headers && !headers['Content-Type']) {
      headers['Content-Type'] = 'application/json;charset=utf-8'
    }
  }
  return headers
}

代码逻辑比较直观，此处不做过多的解释。

三、工具函数简单介绍

在这几篇文章中，我们一直使用一些工具方法，为了代码的完整，我把这些工具函数贴出来。
新建/src/helpers/util.ts

const toString = Object.prototype.toString

export function isDate(val: any): val is Date {
  return toString.call(val) === '[object Date]'
}

export function isPlainObject(val: any): val is Object {
  return Object.prototype.toString.call(val) === '[object Object]'
}

要注意的是，我们在上面的函数中使用到了typescript的类型断言。