知识管理文档 知识管理文档
首页
  • 学习笔记

    • 记录
  • 学习教程

    • ES6
    • Vue
    • Git
  • Java全栈

    • java进阶
    • SpringBoot
  • Golang

    • GoWeb
  • Python

    • Django
  • 总结
  • Docker
  • Linux
  • Mysql
  • Redis
  • Nginx
  • 区块链
  • 后端开发
  • FISCOBCOS

    • JavaSDK快速开发
  • Fabric

    • 链码的使用
  • XuperChain

    • 测试
技术文档
Ocean
GitHub (opens new window)
首页
  • 学习笔记

    • 记录
  • 学习教程

    • ES6
    • Vue
    • Git
  • Java全栈

    • java进阶
    • SpringBoot
  • Golang

    • GoWeb
  • Python

    • Django
  • 总结
  • Docker
  • Linux
  • Mysql
  • Redis
  • Nginx
  • 区块链
  • 后端开发
  • FISCOBCOS

    • JavaSDK快速开发
  • Fabric

    • 链码的使用
  • XuperChain

    • 测试
技术文档
Ocean
GitHub (opens new window)
  • 初识 TypeScript

    • 简介
    • 安装 TypeScript
    • 编写第一个 TypeScript 程序
  • TypeScript 常用语法

    • 基础类型
    • 变量声明
    • 接口
    • 类
    • 函数
    • 泛型
    • 类型推断
    • 高级类型
  • ts-axios 项目初始化

    • 需求分析
    • 初始化项目
    • 编写基础请求代码
  • ts-axios 基础功能实现

    • 处理请求 url 参数
    • 处理请求 body 数据
    • 处理请求 header
    • 获取响应数据
    • 处理响应 header
    • 处理响应 data
      • 需求分析
      • transformResponse 函数实现及应用
  • ts-axios 异常情况处理

    • 错误处理
    • 错误信息增强
  • ts-axios 接口扩展

    • 扩展接口
    • axios 函数重载
    • 响应数据支持泛型
  • ts-axios 拦截器实现

    • 拦截器设计与实现
  • ts-axios 配置化实现

    • 合并配置的设计与实现
    • 请求和响应配置化
    • 扩展 create 静态接口
  • ts-axios 取消功能实现

    • 取消功能的设计与实现
  • ts-axios 更多功能实现

    • withCredentials
    • XSRF 防御
    • 上传和下载的进度监控
    • HTTP 授权
    • 自定义合法状态码
    • 自定义参数序列化
    • baseURL
    • 静态方法扩展
  • ts-axios 单元测试

    • 前言
    • Jest 安装和配置
    • 辅助模块单元测试
    • 请求模块单元测试
    • headers 模块单元测试
    • Axios 实例模块单元测试
    • 拦截器模块单元测试
    • mergeConfig 模块单元测试
    • 请求取消模块单元测试
    • 剩余模块单元测试
  • ts-axios 部署与发布

    • ts-axios 编译与发布
    • 引用 ts-axios 库
  • 《TypeScript 从零实现 axios》
  • ts-axios 基础功能实现
HuangYi
2020-01-05
目录

处理响应 data

# 处理响应 data

# 需求分析

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

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

我们把它转换成:

data: {
  a: 1,
  b: 2
}

# 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
}

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
}

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

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

处理响应 header
错误处理

← 处理响应 header 错误处理→

Theme by Vdoing | Copyright © 2023-2024 Deep Sea | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式