色空大师 2024-06-28 14:19 采纳率: 40.9%
浏览 14

vue如何接收后端自定义的响应体

后端自定义的响应体,使用vue怎么接收

后端返回响应如下:

img


前端接收代码如下

methods: {
      getDataFromApi() {
        this.$http.post("/draw/pet",
          {
            num: this.num, // 搜索条件
            uid: this.uid, // 搜索条件
            hid: this.hid,
            //pageIndex: this.pagination.page,// 当前页
            //pageSize: this.pagination.rowsPerPage,// 每页大小
          }, {
          emulateJSON:true
          }).then(resp => { // 这里使用箭头函数
            console.log(resp)
          this.giftList = resp.data;
          this.totalGifts = resp.data.total;
          // 完成赋值后,把加载状态赋值为false
          //this.loading = false;
        })

当后端直接返回list集合时,前端能显示,返回自定义响应时,前端该如何改造

  • 写回答

3条回答 默认 最新

  • 专家-赤兔[在线] 全栈领域优质创作者 2024-06-28 14:19
    关注

    引自免费微信小程序:皆我百晓生

    要处理后端自定义响应体并将其在Vue前端正确展示,你需要对HTTP请求和响应处理进行适当改造。基于你给出的代码示例和描述,以下是前端改造的指南:

    1. 确保后端确实返回了自定义响应格式,包括状态码、消息和数据字段。从你提供的响应内容来看,后端返回的是一个包含codemsgdata字段的响应体。

    2. 修改Vue中的getDataFromApi方法来处理自定义响应体。在你的示例代码中,看起来后端响应数据是在.then(resp => {...})这个箭头函数中处理的。你需要根据后端的响应格式来解析数据。以下是修改后的代码示例:

    methods: {
      getDataFromApi() {
        this.$http.post("/draw/pet", { // 请求参数保持不变...
          // ...其他请求参数...
        }, { // 配置项中添加响应类型处理,如果需要的话还可以添加其他配置如headers等
          transformResponse: (data) => { // 自定义转换函数来处理响应数据
            // 假设后端返回的数据格式如上所述,包含code、msg和data字段
            if (data && typeof data === 'object') {
              if (data.code === 200) { // 检查状态码是否成功
                // 如果状态码成功,则处理数据部分
                this.giftList = data.data; // 将后端返回的数据赋值给前端变量giftList
                this.totalGifts = data.total; // 将后端返回的数据赋值给前端变量totalGifts,注意这里假设后端有返回total字段
                // 其他逻辑处理...比如更新UI状态等
              } else {
                // 状态码非200时的处理逻辑(比如提示错误信息)
                console.error('请求失败:', data.msg); // 打印错误信息或其他处理逻辑
              }
            } else {
              // 非预期响应格式处理逻辑(例如服务器错误或其他未知状态)
              console.error('未知的响应格式:', data); // 打印异常信息以便调试等处理逻辑
            }
            return data; // 返回原始数据以保持Vue请求链的继续执行(如有必要)
          }
        }).catch(error => { // 错误处理逻辑(可选)处理网络错误等异常情况
          console.error('网络请求错误:', error); // 打印错误信息或提示用户等处理逻辑
        });
      }
    }
    

    请注意,上述代码中的transformResponse函数是自定义的转换函数,用于处理后端返回的响应数据。你需要根据实际的响应格式来调整这个函数。此外,确保后端确实返回了你期望的数据结构(如包含total字段),以便前端正确处理和展示。同时请检查状态码是否为成功状态(通常是HTTP 2xx状态码),并根据需要进行错误处理。

    展开全部

    评论 编辑记录
  • 山顶风景独好 2024-06-28 15:05
    关注

    评论
  • 色空大师 2024-07-07 02:44
    关注

    img


    按照你的写法,提示未知的格式

    评论
编辑
预览

报告相同问题?

问题事件

  • 创建了问题 6月28日

悬赏问题

  • ¥15 PADS Logic 原理图
  • ¥15 PADS Logic 图标
  • ¥15 电脑和power bi环境都是英文如何将日期层次结构转换成英文
  • ¥20 气象站点数据求取中~
  • ¥15 如何获取APP内弹出的网址链接
  • ¥15 wifi 图标不见了 不知道怎么办 上不了网 变成小地球了
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部