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
Mar 09 Javascript
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
Sep 22 Javascript
JavaScript 页面坐标相关知识整理
Jan 09 Javascript
javascript实现网页端解压并查看zip文件
Dec 15 Javascript
深入学习jQuery Validate表单验证
Jan 18 Javascript
jQuery中的ready函数与window.onload谁先执行
Jun 21 Javascript
JavaScript数组操作函数汇总
Aug 05 Javascript
原生JS实现的放大镜特效示例【测试可用】
Dec 08 Javascript
详解ES7 Decorator 入门解析
Feb 18 Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
Aug 25 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
Sep 04 Javascript
vue data有值,但是页面{{}} 取不到值的解决
Nov 09 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自动跳转中英文页面
2008/07/29 PHP
PHP以指定字段为索引返回数据库所取的数据数组
2013/06/30 PHP
最准确的php截取字符串长度函数
2015/10/29 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
thinkPHP3.x常量整理(预定义常量/路径常量/系统常量)
2016/05/20 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
JavaScript中“+=”的应用
2007/02/02 Javascript
JS在IE和FireFox之间常用函数的区别小结
2010/03/12 Javascript
JS中toFixed()方法引起的问题如何解决
2012/11/20 Javascript
Javascript实现计算个人所得税
2015/05/10 Javascript
javascript跨域的方法汇总
2015/10/23 Javascript
轻松实现JavaScript图片切换
2016/01/12 Javascript
Bootstrap的Refresh Icon也spin起来
2016/07/13 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
2017/03/07 Javascript
详解node HTTP请求客户端 - Request
2017/05/05 Javascript
node.js基于express使用websocket的方法
2017/11/09 Javascript
详解Nuxt.js Vue服务端渲染摸索
2018/02/08 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
2018/04/21 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
2019/01/18 jQuery
Python里disconnect UDP套接字的方法
2015/04/23 Python
OpenCV HSV颜色识别及HSV基本颜色分量范围
2019/03/22 Python
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
解决python 3 urllib 没有 urlencode 属性的问题
2019/08/22 Python
Fresh馥蕾诗英国官网:法国LVMH集团旗下高端天然护肤品牌
2018/11/01 全球购物
英国当代时尚和街头服饰店:18montrose
2018/12/15 全球购物
英国第一摩托车和摩托车越野配件商店:GhostBikes
2019/03/10 全球购物
Easy Spirit官网:美国休闲鞋履中的代表品牌
2019/04/12 全球购物
大学毕业登记表自我鉴定
2013/10/09 职场文书
公司企业表扬信
2014/01/11 职场文书
开展党的群众路线教育实践活动方案
2014/02/05 职场文书
《我不是最弱小的》教学反思
2014/02/23 职场文书
培训班开班仪式主持词
2014/03/28 职场文书
我与祖国共奋进演讲稿
2014/09/13 职场文书
邓小平文选读书笔记
2015/06/29 职场文书
食堂卫生管理制度
2015/08/04 职场文书
评测 | 大屏显示带收音机的高端音箱,JBL TUNE2便携式插卡音箱实测
2021/04/24 无线电