江苏龙网

  1. 主页 > 生活百科 > >

我的朋友因为 JSON.stringify 差点丢了奖金

JSON


我的朋友因为 JSON.stringify 差点丢了奖金

文章插图
英文 | https://medium.com/frontend-canteen/my-friend-almost-lost-his-year-end-bonus-because-of-json-stringify-9da86961eb9e
翻译 | 杨小爱
这是发生在我朋友身上的真实故事 ， 他的绰号叫胖头 。由于JSON.stringify的错误使用 ， 他负责的其中一个业务模块上线后出现了bug ， 导致某个页面无法使用 ， 进而影响用户体验 ， 差点让他失去年终奖 。
在这篇文章中 ， 我将分享这个悲伤的故事 。然后我们还将讨论 JSON.stringify 的各种功能 ， 以帮助您避免将来也犯同样的错误 。
我们现在开始
故事是这样的 。
他所在的公司 ， 有一位同事离开了 ， 然后胖头被要求接受离开同事的工作内容 。
没想到 ， 在他接手这部分业务后不久 ， 项目中就出现了一个bug 。
当时 ， 公司的交流群里 ， 很多人都在讨论这个问题 。
产品经理先是抱怨：项目中有一个bug ， 用户无法提交表单 ， 客户抱怨这个 。请开发组尽快修复 。
然后测试工程师说：我之前测试过这个页面 ， 为什么上线后就不行了？
而后端开发者说：前端发送的数据缺少value字段 ， 导致服务端接口出错 。
找到同事抱怨后 ， 问题出在他负责的模块上 ， 我的朋友胖头真的很头疼 。
【我的朋友因为 JSON.stringify 差点丢了奖金】经过一番检查 ， 我的朋友终于找到了这个错误 。
事情就是这样 。
发现页面上有一个表单允许用户提交数据 ， 然后前端应该从表单中解析数据并将数据发送到服务器 。
表格是这样的：（下面是我的模拟）
我的朋友因为 JSON.stringify 差点丢了奖金

文章插图
这些字段是可选的 。
通常 ， 数据应如下所示：
 
  1. let data = https://www.isolves.com/it/cxkf/bk/2022-11-07/{
  2. signInfo: [
  3. {
  4. "fieldId": 539,
  5. "value": "silver card"
  6. },
  7. {
  8. "fieldId": 540,
  9. "value": "2021-03-01"
  10. },
  11. {
  12. "fieldId": 546,
  13. "value": "10:30"
  14. }
  15. ]
  16. }

我的朋友因为 JSON.stringify 差点丢了奖金

文章插图
然后它们应该转换为：
我的朋友因为 JSON.stringify 差点丢了奖金

文章插图
但问题是 ， 这些字段是可选的 。如果用户没有填写某些字段 ， 那么数据会变成这样：
 
  1. let data = https://www.isolves.com/it/cxkf/bk/2022-11-07/{
  2. signInfo: [
  3. {
  4. "fieldId": 539,
  5. "value": undefined
  6. },
  7. {
  8. "fieldId": 540,
  9. "value": undefined
  10. },
  11. {
  12. "fieldId": 546,
  13. "value": undefined
  14. }
  15. ]
  16. }

我的朋友因为 JSON.stringify 差点丢了奖金

文章插图
他们将变成这样：
我的朋友因为 JSON.stringify 差点丢了奖金

文章插图
JSON.stringify 在转换过程中忽略其值为undefined的字段 。
因此 ， 此类数据上传到服务器后 ， 服务器无法解析 value 字段 ， 进而导致错误 。
一旦发现问题 ， 解决方案就很简单 ， 为了在数据转换为 JSON 字符串后保留 value 字段 ， 我们可以这样做：
我的朋友因为 JSON.stringify 差点丢了奖金

文章插图
 
  1. let signInfo = [
  2. {
  3. fieldId: 539,
  4. value: undefined
  5. },
  6. {
  7. fieldId: 540,
  8. value: undefined
  9. },
  10. {
  11. fieldId: 546,
  12. value: undefined


    推荐阅读


上一篇：TypeScript 4.9 发布！重点新特性解读

下一篇：手把手教你如何自己在线制作及上传驾驶证证件照片