Vue中 axios delete请求参数操作


Posted in Javascript onAugust 25, 2020

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对象来封装接收则 参数格式为:

{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 项目中的this.$get,this.$post等$的用法

vue官网上有这么一句话

Vue中 axios delete请求参数操作

结合案例:

// 基于axios 封装的http请求插件
const axios = require('axios');
 
/**
 * 以下这种方式需要调用Vue.use方法 调用的时候调用 this.$fetch, this.$post, this.$axios, this.$put, this.$del 方法
 */
function coverFormData (data) {
 return Object.keys(data).map(key => {
  let value = data[key];
  if (typeof value === 'object') {
   value = JSON.stringify(value);
  }
  return encodeURIComponent(key) + '=' + encodeURIComponent(value);
 })
}
const http = {
 install(Vue, Option) {
  axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
  if (Option) {
   // 超时设置
   axios.defaults.timeout = Option.timeout || 10000;
   // 默认请求地址设置
   axios.defaults.baseURL = Option.baseURL || "";
   // 头部设置
   if (Option.headers && typeof Option.headers === 'object') {
    for (let key in Option.headers) {
     if (!Option.headers.hasOwnProperty(key)) continue;
     axios.defaults.headers[key] = Option.headers[key];
    }
   }
   // 请求/响应拦截器
   Option.inRequest && axios.interceptors.request.use(Option.inRequest, error => {
     Promise.reject(error);
   });
   Option.inResponse && axios.interceptors.response.use(Option.inResponse, error => {
     Promise.reject(error);
   });
  }
  /**
   * @param {string} url
   * @param {object} params={} 参数可以根据需要自行处理
   */
  const fetch = (url, params = {}, config = {}) => {
   const str = coverFormData(params).join('&');
   return new Promise((resolve, reject) => {
    let address = url;
    if (str) {
     address += '?' + str;
    }
    axios.get(address, config).then(res => {
     resolve(res.data);
    }).catch(error => {
     reject(error);
    });
   });
  };
 
  /**
   * @param {string} url
   * @param {object} data={} 参数可以根据需要自行处理
  
   */
  const post = (url, data = {}, config = {}) => {
   let str = coverFormData(data).join('&');
   if (config.headers && config.headers['Content-Type'] && config.headers['Content-Type'].indexOf('application/json') > -1) {
    str = JSON.parse(JSON.stringify(data));
   }
   return new Promise((resolve, reject) => {
    axios.post(url, str, config).then(res => {
     resolve(res.data);
    }).catch(error => {
     reject(error);
    });
   });
  };
 
  /**
   * @param {string} url
   * @param {object} data={} 参数可以根据需要自行处理
   */
  const put = (url, data = {}, config = {}) => {
   const str = coverFormData(data).join('&');
   return new Promise((resolve, reject) => {
    axios.put(url, str, config).then(res => {
     resolve(res.data);
    }).catch(error => {
     reject(error);
    });
   });
  };
 
  /**
   * @param {string} url
   * @param {object} params={}
   */
 
  const del = (url, config = {}) => {
   const str = coverFormData(config).join('&');
   return new Promise((resolve, reject) => {
    axios.delete(url, str).then(res => {
     resolve(res.data);
    }).catch(error => {
     reject(error);
    });
   });
  };
  const data = { axios, fetch, post, put, del };
  // 这个地方说明了为啥使用的时候是this.$fetch, this.$post, this.$axios, this.$put, this.$del 这几个方式
  Object.keys(data).map(item => Object.defineProperty(Vue.prototype, '$' + item, { value: data[item] }));
 }
};
 
export default http;

然后在main.js中导入包使用:

Vue中 axios delete请求参数操作

import http from './assets/js/http';
 
Vue.use(http, {
  timeout: 60000,
  inRequest (config) {
    config.headers['Authorization'] =
      sessionStorage.getItem('TokenType') +" "
      + sessionStorage.getItem('AccessToken');
    return config;
  }, 
  inResponse (response) {
    return response;
  }
});

之后在子组件中就可以直接使用this.$post等了

比如:

this.$post("你的url", {
    CityId: cityid,
    Type: 3
   })
    .then(res => {
     if (res.Success) {
      this.searchSecondary = res.Data;
     }
    })
    .catch(error => {
     console.log(error);
    });

以上这篇Vue中 axios delete请求参数操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery实现的鼠标滑过按钮改变背景图片
Jul 15 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
Nov 20 Javascript
24款热门实用的jQuery插件推荐
Dec 24 Javascript
js实现的彩色方块飞舞奇幻效果
Jan 27 Javascript
一波JavaScript日期判断脚本分享
Mar 06 Javascript
微信小程序获取微信运动步数的实例代码
Jul 20 Javascript
详解node服务器中打开html文件的两种方法
Sep 18 Javascript
让你5分钟掌握9个JavaScript小技巧
Jun 09 Javascript
原生JS实现的跳一跳小游戏完整实例
Jan 27 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
Apr 23 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
Jun 05 Javascript
vue中的.$mount('#app')手动挂载操作
Sep 02 Javascript
React实现轮播效果
Aug 25 #Javascript
React实现全选功能
Aug 25 #Javascript
react实现复选框全选和反选组件效果
Aug 25 #Javascript
js实现数字跳动到指定数字
Aug 25 #Javascript
js实现点击选项置顶动画效果
Aug 25 #Javascript
理解JavaScript中的对象
Aug 25 #Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
Aug 25 #Javascript
You might like
提升PHP执行速度全攻略(上)
2006/10/09 PHP
ThinkPHP、ZF2、Yaf、Laravel框架路由大比拼
2015/03/25 PHP
PHP IDE phpstorm 常用快捷键
2015/05/18 PHP
自动更新作用
2006/10/08 Javascript
改进:论坛UBB代码自动插入方式
2006/12/22 Javascript
js 表格隔行颜色
2009/12/02 Javascript
firefox下对ajax的onreadystatechange的支持情况分析
2009/12/14 Javascript
Javascript 获取链接(url)参数的方法[正则与截取字符串]
2010/02/09 Javascript
基于jQuery的公告无限循环滚动实现代码
2012/05/11 Javascript
js实现鼠标触发图片抖动效果的方法
2015/02/27 Javascript
JavaScript实现网站访问次数统计代码
2015/08/12 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
2015/12/02 Javascript
jQuery中inArray方法注意事项分析
2016/01/25 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
2016/05/25 Javascript
jQuery实现的网页换肤效果示例
2016/09/20 Javascript
Angularjs的键盘事件的绑定
2017/07/27 Javascript
实现jquery放大镜的两种方法
2018/02/22 jQuery
JS打印彩色菱形的实例代码
2018/08/15 Javascript
vue+vant 上传图片需要注意的地方
2021/01/03 Vue.js
原生js中运算符及流程控制示例详解
2021/01/05 Javascript
Python中的模块和包概念介绍
2015/04/13 Python
对Python中列表和数组的赋值,浅拷贝和深拷贝的实例讲解
2018/06/28 Python
在Mac上删除自己安装的Python方法
2018/10/29 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
python bluetooth蓝牙信息获取蓝牙设备类型的方法
2019/11/29 Python
把vgg-face.mat权重迁移到pytorch模型示例
2019/12/27 Python
Django 删除upload_to文件的步骤
2020/03/30 Python
python爬取音频下载的示例代码
2020/10/19 Python
主要的Ajax框架都有什么
2013/11/14 面试题
Delphi软件工程师试题
2013/01/29 面试题
酒店司机岗位职责
2013/12/14 职场文书
领导的自我鉴定
2013/12/28 职场文书
一年级语文下册复习计划
2015/01/17 职场文书
2015年法律事务部工作总结
2015/07/27 职场文书
2015重阳节敬老活动总结
2015/07/29 职场文书
如何利用Matlab制作一款真正的拼图小游戏
2021/05/11 Python