You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Vue.js中如何校验API请求返回的响应字符串值?

Vue API响应值校验失效问题

我尝试用resp.data == "-1"校验Vue API请求的响应值,但没生效,求指导怎么在Vue.js里正确校验响应值。

Vue.js 代码片段

callback: function () {
  this.$http
    .post(`/api/food-item/${data.ItemId}/delete`)
    .then((resp) => {
      if(resp.data == "-1")
      {
        ShowError(this.$toast, "Used Items!!");
      }
      else
      {
        ShowSuccess(this.$toast, "Food item deleted successfully");
        resp.data;
        self.$nextTick(function () {
          self.$refs.vuetable.refresh();
        });
      }
      
    })
    .catch((error) => {
      const errorMsg = error.response.data.ExceptionMessage;
      ShowError(this.$toast, errorMsg);
    });
},

C# 后端代码片段

[Route("{foodItemId}/delete")]
[HttpPost]
public IHttpActionResult Delete(int foodItemId)
{
    if (!foodItemService.IsExist(foodItemId))
    {
        return NotFound();
    }
    if (foodItemService.IsUsed(foodItemId))
    {
        return Ok("-1");    // 这是返回响应的代码行
    }

    foodItemService.Delete(foodItemId);
    return Ok();
}

终端报错信息

312:19  error  Replace `(resp.data·==·"-1")␍⏎···············` with `·(resp.data·==·"-1")`  prettier/prettier
315:18  error  Replace `␍⏎················else␍⏎···············` with `·else`              prettier/prettier
323:18  error  Delete `␍⏎················`                                                 prettier/prettier

问题排查与解决办法

1. 先修正Prettier格式错误

终端的报错是代码格式不符合Prettier规范,先调整格式:

  • 给if后加空格,改成if (resp.data == "-1")
  • 调整else的缩进,和if块保持一致,删除多余换行与空格
  • 清理代码末尾的空行

2. 响应值校验失效的核心排查点

(1)数据类型不匹配

后端返回的"-1"是字符串,但部分HTTP库会自动将响应解析为JSON,导致resp.data变成数字-1而非字符串。先打印类型确认:

.then((resp) => {
  console.log(typeof resp.data, resp.data); // 查看实际类型与值
  // 后续逻辑
})

如果是数字类型,就改成resp.data === -1校验;如果是字符串,建议用严格相等resp.data === "-1"(比==更严谨)。

(2)确认响应结构

打开浏览器开发者工具的「网络」标签,找到该POST请求,查看响应体真实内容:

  • 如果后端返回的不是纯字符串"-1",而是包裹在对象里(比如{"result": "-1"}),则需要改成resp.data.result === "-1"。

(3)修复this指向问题

代码中使用了self,但箭头函数已绑定外部上下文,self可能未正确赋值,直接替换为this即可:

this.$nextTick(() => {
  this.$refs.vuetable.refresh();
});

内容的提问来源于stack exchange,提问作者Kasun sunil

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.21 11:33:45