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
相关产品推荐
相关产品推荐

