vue3开发,axios发送请求是携带params参数的避坑

vue3开发,axios发送请求是携带params参数的避坑!今天一直报错,点击新增购物车,报错,

【Uncaught (in promise) TypeError: target must be an object】。查询了网上的资料说的都不对。都没有解决。最终还是被我整明白了。


网上网友说的是,axios的引用方式,vue3的改变了。必须是配置一下才能用。

app.config.globalProperties.$http = axios

如图所示,是用了这个配置参数来完成了axios的使用。

不能用app.use(axios)。这样是错误的。


复制代码
/**
 * 加入购物车
 */
export function addOneOrders(id){
    return httpInstance({
        url:'/order/addOneOrder?',
        params:{
            id:id
        }
    })
}

这个代码是,修正后的,参数格式。用一个json对象去给接口传递参数。id.

之前我写的是,

params:id。这样写的。不知道为什么昨天是正常的。今天忽然就不行了。

改成json对象的格式传递过去,一切恢复了正常。

接口路径后面,不需要带任何的符号。问号是不需要的。因为有了json对象,它会自动帮你映射到接口里面的参数,只需要您保证参数名字,和json里面的属性名字一致就行了。省心了。


如图,我新增了三条购物车的信息,是正常的。说明改成json对象作为参数传给后端使用,是正确的。

相关推荐
川冰ICE2 分钟前
JavaScript实战②|电商网站交互效果,轮播图与购物车
开发语言·javascript·交互
凌云拓界8 分钟前
状态机与思考循环 ——CogitoAgent开发实战(一)
javascript·人工智能·架构·node.js·设计规范
sugar__salt14 分钟前
Bun 新一代 JavaScript/TypeScript 运行时:从入门到实战
开发语言·javascript·typescript
梦幻通灵1 小时前
Vue3 Element日期控件置灰明天之后日期
前端·javascript·vue.js
lzhdim1 小时前
C盘空间多出来4GB:谷歌服软 Chrome本地AI大模型可禁用、删除了
前端·人工智能·chrome
Monkery1 小时前
WWDC26 全面汇总
前端·人工智能
ANnianStriver1 小时前
PetLumina 03 — 后端目录重构与 Web 管理后台搭建
java·前端·ai·重构·ai编程·claude code
晓13131 小时前
【Cocos Creator 3.x】篇——第一章 简介
前端·javascript·游戏引擎
light blue bird1 小时前
MES/ERP 协同场景导入导出图表展示组件
前端·信息可视化·桌面端winform·多节点端·gdi图表绘制开发