基于Vue的场景解决

场景-二次发送失败

场景描述

• 描述
  • 给一个账户更新名称，第一次更新值后端返回已存在，然后修改，重新提交，但是这次都没有接口调用。
• 流程
  • 点击提交后，表单数据formData有一个表单项payType是数组形式，校验后，将payType通过JSON序列化，然后调用接口，axios将请求打到后端。然后路由返回到上一个页面。
  • 当前页面已进入，在created中拉取数据，会将payType反序列化为数组。

技术背景

• axios
• json序列化和反序列化
• promise
  • finally

方案解决

• 表单项形式问题
  • 分析
    • 被卡了一个bug，关键在payType的形式，是序列化后还是反序列化。
    • 一般成功后，会直接到上一个页面，然后再次进入，会反序列化为数组形式。发送请求时，也会先序列化，但是若没有操作成功，也就是后端返回已存在相同值，不会返回上一个页面，payType保持为字符串形式，再次点击时，重新走序列化流程，会调用数组的map拼接一个字符串，但是字符串没有相关函数，然后就会报错，就不会走到发送请求这一步，所以没有调用接口。
  • 处理
    • 每次序列化之后，无论是否成功，还原为数组形式。
• 请求数据格式问题
  • 分析
    • 在上面问题的处理中，我设置了在发送请求后，同步修改表单项payType，还原为数组形式，但是请求返回400错误，请求数据格式有问题，不是我预想的发送前的序列化之后的字符串形式，是数组形式。
    • 我将发送请求后的同步修改payType时，随便设置为任意数据，发送请求中的载体都是该任意数据。
    • 最后是formData传递的是个引用地址，axios网络库是异步发送的，在同步修改后，发送请求读取的该地址中的数据是修改后的。
  • 处理
    • 在请求返回的promise使用finally中还原数据，确保了正确的时序。

参考资料

• application/json 四种常见的 POST 提交数据方式_application json-CSDN博客