Wiidede's blog Wiidede's blog
  • 前端
  • Python
  • 算法
  • 生活
  • 其他
  • 分类
  • 标签
  • 归档
  • 关于我
  • 赞赏
  • 我的小站 (opens new window)
GitHub (opens new window)

Wiidede

小的的写前端
  • 前端
  • Python
  • 算法
  • 生活
  • 其他
  • 分类
  • 标签
  • 归档
  • 关于我
  • 赞赏
  • 我的小站 (opens new window)
GitHub (opens new window)
  • 整理一些css样式
  • vue隔代组件层层动态插槽并且附带数据
  • vue判断字符串是否溢出来显示弹窗、解决el-table tooltip 内过多导致无法显示,内容闪烁
  • 整理一些js写法
  • ElementUI timePicker 增加此刻按钮 引发的dom操作的学习
  • 毕业设计(水表识别)前端知识整理
  • html小知识
  • axios请求api然后下载文件
  • vue3+ts根据高度改变元素的透明度
  • vue3 + ElementPlus 换肤方案(Css变量)
  • Moment的一些使用方法
  • echarts基础vue组件
  • element UI el-date-picker 年月日切换组件
  • 可以不选择的el-radio单选框
  • vue的小技巧总结
  • 全局动态权限判断(Vue指令)
  • vue-anchor 探索
  • Deep Dive with Evan You 笔记
  • 前端基础知识查漏补缺
  • WebPack 知识总结
  • 我写的一些可以日后参考的代码
  • 接口变化后,封装接口函数,改变返回内容
    • 背景
  • 项目组件整理
  • 前端框架设计想发
  • 全局进度条
  • 带有token的图片vue组件:authImg,使用axios下载图片
  • 前端npm包推荐
  • 给ElInputNumber添加prefix
  • ElPagination添加页数总数
  • el-tab做成chrome类似的tab样式
  • vue-grid-layout-组件配置
  • 项目数据字典封装
  • 图表组件响应式探索
  • ElementPlus表格table列自动合并composition
  • 简单的curd组件封装
  • ElementPlus表格自定义合计列composition
  • 一些处理表格数据composition api
  • div内容溢出后,内容向左悬浮,vue组件封装
  • 文本数字溢出后,按比例缩小,vue组件封装
  • 表格使用async-validator检验composition
  • ElementPlus Form一些简单的组件整合
  • arco-design快速使用tailwind的颜色、unocss动态颜色
  • 前端
wiidede
2022-04-22

接口变化后,封装接口函数,改变返回内容

# 接口变化后,封装接口函数,改变返回内容

# 背景

我们的项目升级到了一个更高的版本,后端把一些模块废弃后,有些接口需要整体修改,我这次遇到的就是升级获取服务器时间接口

原本返回的数据格式是:

{
  data: {
    serverTime: 1650626081000
  }
}
1
2
3
4
5

这次修改,接口变成这样了:

{
  data: {
    isoTimestamp: 2022-04-22T11:17:02.638Z
  }
}
1
2
3
4
5

接口的字段变了,而且我看这个接口,本项目的处理方式都是moment.utc(res.data.isoTimestamp).valueOf();咱也不知道为啥,就跟着做呗

但是如果要修改每个接口的返回处理函数、引入moment,那么工作量还是挺大的,毕竟这个接口好多地方都用到了,那么有没有什么方法可以直接修改一处就能达成目的呢?

观察原来的请求方法

service.servertime = () => {
    return requestUtil.ajax(Global.getBaseUrl() + '/project/servertime', 'post');
};
1
2
3

也就是最后返回了一个promise,那么我们封装一下这个promise就可以了:

import moment from 'moment';

service.servertime = () => {
 return new Promise((resolve, reject) => {
  requestUtil.ajax(Global.getBaseUrl() + '/project/now', 'get').then((res) => {
   if (res && res.data) {
    // 解析新接口的格式,按照旧接口的格式返回
    res.data.serverTime = moment.utc(res.data.isoTimestamp).valueOf();
   }
   resolve(res); // 返回结果
  }).catch((err) => {
   reject(err); // 有错返回错误
  });
 });
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#前端#axios
上次更新: 2023/06/01, 12:40:50

← 我写的一些可以日后参考的代码 项目组件整理→

Theme by Vdoing | Copyright © 2021-2023 Wiidede | Website use MIT License | Article content & logo use CC-BY-SA-4.0 License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式