TypeScript 从零实现 axios 0x4 基础功能实现——请求body和header、响应数据处理

最新推荐文章于 2023-06-02 15:24:42 发布

cellinlab

最新推荐文章于 2023-06-02 15:24:42 发布

阅读量555

点赞数

分类专栏： TypeScript 文章标签： TypeScript Axios 前端基础 TS实战 Ajax

本文链接：https://blog.csdn.net/funkstill/article/details/104930457

版权

本文介绍了如何使用TypeScript从零开始实现axios的基础功能，包括请求body的数据处理、请求header的设置与类型定义，以及响应数据的处理。通过具体的代码示例和测试用例，详细讲解了每个步骤的实现逻辑和整合过程。

摘要由CSDN通过智能技术生成

请求body数据处理

处理逻辑实现

./src/helpers/data.ts

import { isPlainObject } from './util'

export function transformRequest (data: any) : any {
  if (isPlainObject(data)) {
    return JSON.stringify(data)
  }
  return data
}

./src/helper/util.ts

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

加入处理流程

// ./src/index.ts
import { AxiosRequestConfig } from './types'
import xhr from './xhr'
import { buildURL } from './helpers/url'
import { transformRequest } from './helpers/data'

function axios(config: AxiosRequestConfig): void {
  // TODO
  processConfig(config)
  xhr(config)
}

function processConfig(config: AxiosRequestConfig): void {
  config.url = transformURL(config)
  config.data = transformRequestData(config)
}

function transformURL(config: AxiosRequestConfig): string {
  const { url, params } = config
  return buildURL(url, params)
}

function transformRequestData(config: AxiosRequestConfig): any {
  return transformRequest(config.data)
}
export default axios

测试

./example/base/app.ts

axios({
  method: 'get',
  url: '/base/get?foo=bar',
  params: {
    bar: 'baz'
  }
})

// 请求body数据测试
axios({
  method: 'post',
  url: '/base/post',
  data: {
    a: 1,
    b: 2
  }
})

./examples/server.js

router.post('/base/post', (req, res) => {
  res.json(req.body)
})
router.post('/base/buffer', (req, res) => {
  let msg = []
  req.on('data', chunk => {
    if (chunk) {
      msg.push(chunk)
    }
  })
  req.on('end', () => {