### 彪哥

爱好前端

- 初识 TypeScript

- TypeScript 常用语法

- ts-axios 项目初始化

- ts-axios 基础功能实现

  - 处理请求 url 参数
  - 处理请求 body 数据
  - 处理请求 header
  - 获取响应数据
  - 处理响应 header
  - 处理响应 data
    - 需求分析
    - transformResponse 函数实现及应用

- ts-axios 异常情况处理

- ts-axios 接口扩展

- ts-axios 拦截器实现

- ts-axios 配置化实现

- ts-axios 取消功能实现

- ts-axios 更多功能实现

- ts-axios 单元测试

- ts-axios 部署与发布

- 《TypeScript 从零实现 axios》
- ts-axios 基础功能实现

HuangYi
2020-01-05
目录

# 处理响应 data

# # 处理响应 data

## # 需求分析

在我们不去设置 `responseType` 的情况下，当服务端返回给我们的数据是字符串类型，我们可以尝试去把它转换成一个 JSON 对象。例如：

    data: "{"a":1,"b":2}"

1

我们把它转换成：

    data: {
      a: 1,
      b: 2
    }

1
2
3
4

## # transformResponse 函数实现及应用

根据需求分析，我们要实现一个 `transformResponse` 工具函数。

`helpers/data.ts`：

    export function transformResponse(data: any): any {
      if (typeof data === 'string') {
        try {
          data = JSON.parse(data)
        } catch (e) {
          // do nothing
        }
      }
      return data
    }

1
2
3
4
5
6
7
8
9
10

`index.ts`：

    function axios(config: AxiosRequestConfig): AxiosPromise {
      processConfig(config)
      return xhr(config).then((res) => {
        return transformResponseData(res)
      })
    }

    function transformResponseData(res: AxiosResponse): AxiosResponse {
      res.data = transformResponse(res.data)
      return res
    }

1
2
3
4
5
6
7
8
9
10
11

接着我们再去看刚才的 demo，发现我们已经把响应的 `data` 字段从字符串解析成 JSON 对象结构了。

那么至此，我们的 `ts-axios` 的基础功能已经实现完毕。不过到目前为止，我们都仅仅实现的是正常情况的逻辑，下面一章我们要处理各种异常情况的逻辑。

编辑
(opens new window)
#TypeScript
上次更新: 2022/12/14, 19:36:42
处理响应 header
错误处理

← 处理响应 header 错误处理→

最近更新

  01
Git修改分支名
08-11

  02
CSS给table的tbody添加滚动条
06-29

  03
我做了一个手写春联小网页，祝大家虎年暴富 原创
01-28

更多文章>

Copyright © 2016-2022 Hesb | MIT License

- 跟随系统
- 浅色模式
- 深色模式
- 阅读模式