首页 > 其他分享 >.vue在调用method为delete时,出现了无法传参的情况

.vue在调用method为delete时,出现了无法传参的情况

时间:2024-05-13 18:42:06浏览次数:26  
标签:传参 vue url axios params put 参数 method delete

1.vue在调用method为delete时,出现了无法传参的情况:

调用delete api发现想传入的json格式的参数并没有传入成功,如下:

 

 这其实是vue的delete方法和其他post put get方法不一样导致的,需要修改delete传参格式就行了:

 

Vue中 axios delete请求参数踩坑:

vue中axios 的delete和post,put在传值上有点区别:
post和put有三个参数,url,data和config,所以在使用这两个时,可以写成axios.post(api,{id:1}),axios.put(api,{id:1}),但是delete只有两个参数:url和config,data在config中,所以需要写成 axios.delete(api,{data:{id:1}})

如果是服务端将参数当作Java对象(比如json格式)来封装接收则 参数格式为:{data: param}
var param={id:1,name:'zhangsan'}
this.$axios.delete("/ehrReferralObjPro", {data: param}).then(function(response) {
}

 

 

如果服务端将参数当做url 参数 接收,则格式为:{params: param},这样发送的url将变为http:www.XXX.com?a=…&b=…
var param={id:1,name:'zhangsan'}
this.$axios.delete("/ehrReferralObjPro", {params: param}).then(function(response) {
}

 


axios 数组传值时,我传到后台的是两个字符串数组,但是将参数当成url参数接收时,如果是正常传值,将数组作为一个请求参数传值时,后台接口接收不到匹配的参数,百度之后使用JSON.stringify(),但是使用以后,后台多了一对双引号,最后把后台改成对象封装接收参数,使用的第一种。

下面罗列了vue各个方法的传参方式:

修改vue框架的apis文件夹(一般都是这个文件夹,也可能是其他文件夹)中的api.js文件:
//引入封装好的 axios
import Axios from './axios'

// 实例化:只有一个api服务器请求地址管理
const instance =Axios()

// //vue项目多个不同的服务器请求地址管理
// const instance = Axios.create({
//     baseURL: '/releaseapi'
// })
//
// const externalInstant = Axios.create({
//     baseURL: '/externalApis'
// })

//创建需要的请求方法:get post put delete
//url:请求的接口地址
//params:请求参数
//headers:请求头

export default {
    //创建需要的请求方法:get post put delete
    get(url, params, headers) {
        return instance.get(url, {params, headers})
    },
    post(url, params, headers) {
        return instance.post(url, params, {headers})
    },
    put(url, params, headers) {
        return instance.put(url, params, {headers})
    },
    delete(url, params) {// console.log(url)
        // console.log(params)
        // console.log(headers)
        //正确示例:如果是服务端将参数当作Java对象来封装接收则 参数格式为:{data: param}
        return instance.delete(url, {data: params})
        //正确示例:如果服务端将参数当做url 参数 接收,则格式为:{params: param},这样发送的url将变为http:www.XXX.com?a=…&b=…
        // return instance.delete(url,{params: params})
        //错误示例:下面这是一个错误的传参方式,参数无法被正常的传入给api:
//return instance.put(url, params, {headers})
    }
}

 

标签:传参,vue,url,axios,params,put,参数,method,delete
From: https://www.cnblogs.com/pingguomang/p/18189777

相关文章

  • vue要做权限管理该怎么做?如果控制到按钮级别的权限怎么做?
    一、是什么权限是对特定资源的访问许可,所谓权限控制,也就是确保用户只能访问到被分配的资源而前端权限归根结底是请求的发起权,请求的发起可能有下面两种形式触发页面加载触发页面上的按钮点击触发总的来说,所有的请求发起都触发自前端路由或视图所以我们可以从这两方面入手......
  • Vue3得通信方式
    1父向子props(defibeProps),子向父自定义事件(defineEmits)2时间总线(mitt插件)3v-model(可以绑定多个v-model)a给子组件传递props[modelValue]b给子组件传递自定义事件@update:modelValue列子:<Childv-model:name="name"v-model:sex="sex>4useAttrs(引入useAttr......
  • vue中dicts怎么使用
    1.确定字典获取的接口//根据字典类型查询字典数据信息exportfunctiongetDicts(dictType){returnrequest({url:'/system/dict/data/type/'+dictType,method:'get'})}2.在公共的方法文件中提供一个方法目录在/src/utils/dict/DictData.js/***@c......
  • vue3 - App.vue示例1
    示例1App.vue<!--插入Vue库的CDN链接--><scriptsrc="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script><scriptsetup>importHelloWorldfrom'./components/HelloWorld.vue'</script><templa......
  • Vue创建项目步骤
    步骤:1.检查是否安装了node.js和npm2.安装淘宝镜像命令:npminstall-gcnpm--registry=http://registry.npmmirror.com(使用的更快速)3.cnpminstall-g@vue/cli安装全局vue 再使用vuecreate项目名称选择要配置内容 cd项目名称 npmrunserve即可打开4......
  • Zed——Eslint配置支持Vue
    前言体验下基于Rust的编辑器,看看是不是真的那么快,一个Vue2.0的老项目,其中已经配置好了eslint相应的规则;文档:https://zed.dev/docs/languages/javascript#eslintissue:https://github.com/zed-industries/zed/issues/9934内容配置最开始按着文档来配置,咋搞都没有对Vue.js生......
  • vue 简易导出数据 vue-json-excel
    1、安装插件npminstall-Svue-json-excel2、注册importVuefrom"vue";importJsonExcelfrom"vue-json-excel";Vue.component("downloadExcel",JsonExcel);3、使用<a-buttonv-if="isExport"type="primary&quo......
  • 【问题解决】java.lang.NoSuchMethodError错误
    问题现象近期本人负责的一个SpringBoot模块出现了java.lang.NoSuchMethodError报错,问题情况如下:A类提供了setJumpType(Stringtype),B类调用A类的setJumpType(Stringtype)报错java.lang.NoSuchMethodError:com.xxx.A.setJumpType(Ljava/lang/String;)V在之前的发版的程序中,B......
  • 生命周期---Vue2&Vue3
    生命周期---Vue2&Vue3简单理解为:组件从创建到被销毁的一个过程,就相当于人的一生,从出生到死亡的一个过程。组件的生命周期也称生命周期、生命周期函数、生命周期钩子生命周期在特定的时刻会调用特定的函数生命周期分为四个阶段,每个阶段都有两个钩子,现只讨论这八个钩子V......
  • Vue.js的Vue@Cli入门指南
    Vue.js是一款流行的JavaScript框架,它使得构建交互式的Web界面变得简单和快捷。Vue@Cli是Vue.js官方提供的脚手架工具,它能够帮助我们快速搭建Vue.js项目,并提供了丰富的功能和插件。准备工作在开始之前,确保您已经安装了node.js和npm。然后,您可以通过以下命令安装Vue@Cli:npminsta......