yyz notes yyz notes
首页
  • RBAC权限设计
  • 架构图标设计
  • 账号体系
  • python基础
  • python高级
  • python模块
  • python设计模式
  • python数据结构与算法
  • django
  • django-DRF
  • flask
  • 直接设计开源pip包
  • 直接设计开源项目
  • python示例题/脚本
  • python面试题
  • golang基础
  • golang高级
  • golang常用组件
  • gin框架
  • es6
  • javascript
  • react
  • vue
  • TypeScript
  • mysql
  • redis
  • minio
  • elasticsearch
  • mongodb
  • 消息队列
  • 自动化测试
  • 操作系统

    • linux
    • windows
  • nginx
  • docker
  • k8s
  • git
  • ldap
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

益章

可乐鸡翅
首页
  • RBAC权限设计
  • 架构图标设计
  • 账号体系
  • python基础
  • python高级
  • python模块
  • python设计模式
  • python数据结构与算法
  • django
  • django-DRF
  • flask
  • 直接设计开源pip包
  • 直接设计开源项目
  • python示例题/脚本
  • python面试题
  • golang基础
  • golang高级
  • golang常用组件
  • gin框架
  • es6
  • javascript
  • react
  • vue
  • TypeScript
  • mysql
  • redis
  • minio
  • elasticsearch
  • mongodb
  • 消息队列
  • 自动化测试
  • 操作系统

    • linux
    • windows
  • nginx
  • docker
  • k8s
  • git
  • ldap
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • ES6 教程笔记

  • JavaScript教程笔记

  • React笔记

  • Vue笔记

  • TypeScript 从零实现 axios

    • 初识 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 基础功能实现
yizhang
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
上次更新: 2023/05/17, 23:08:21
处理响应 header
错误处理

← 处理响应 header 错误处理→

最近更新
01
配置yun源
05-24
02
linux-配置python虚拟环境
05-24
03
linux文件目录管理
05-24
更多文章>
Theme by Vdoing | Copyright © 2023-2023 yizhang | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式