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 相关文章推荐
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
Feb 09 Javascript
Javascript attachEvent传递参数的办法
Dec 14 Javascript
JavaScript中的this关键字使用详解
Aug 14 Javascript
jQuery弹出遮罩层效果完整示例
Sep 13 Javascript
jQuery事件与动画基础详解
Feb 23 Javascript
Vue+axios 实现http拦截及路由拦截实例
Apr 25 Javascript
详解基于webpack搭建react运行环境
Jun 01 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
Jan 03 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
Apr 11 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
Dec 06 Javascript
如何正确理解vue中的key详解
Nov 02 Javascript
JavaScript异步操作中串行和并行
Nov 20 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实现的蚂蚁爬杆路径算法代码
2015/12/03 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
JS加ASP二级域名转向的代码
2007/05/17 Javascript
基于jQuery的仿flash的广告轮播
2010/11/05 Javascript
基于JQuery实现CheckBox全选全不选
2011/06/27 Javascript
基于jQuery实现的旋转彩圈实例
2015/06/26 Javascript
AngularJS手动表单验证
2016/02/01 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
2016/09/06 Javascript
利用Node.js+Koa框架实现前后端交互的方法
2017/02/27 Javascript
如何解决vue与传统jquery插件冲突
2017/03/20 Javascript
JS中使用new Option()实现时间联动效果
2018/12/10 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
2019/12/16 Javascript
pycharm 使用心得(三)Hello world!
2014/06/05 Python
python的paramiko模块实现远程控制和传输示例
2017/10/13 Python
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
pytorch实现从本地加载 .pth 格式模型
2020/02/14 Python
浅谈pytorch中torch.max和F.softmax函数的维度解释
2020/06/28 Python
从零开始的TensorFlow+VScode开发环境搭建的步骤(图文)
2020/08/31 Python
Python字符串及文本模式方法详解
2020/09/10 Python
celery在python爬虫中定时操作实例讲解
2020/11/27 Python
将不规则的Python多维数组拉平到一维的方法实现
2021/01/11 Python
html5使用canvas绘制一张图片
2014/12/15 HTML / CSS
英国天然保健品网站:Simply Supplements
2017/03/22 全球购物
Myprotein法国官网:欧洲第一运动营养品牌
2019/03/26 全球购物
三星印度官网:Samsung印度
2019/08/03 全球购物
了解AppleTalk协议吗
2014/04/01 面试题
LINUX下线程,GDI类的解释
2016/12/14 面试题
优秀毕业生求职推荐信范文
2013/11/21 职场文书
同学聚会老师邀请函
2014/01/28 职场文书
运动会稿件50字
2014/02/17 职场文书
成绩单家长评语大全
2014/04/16 职场文书
优秀少先队工作者事迹材料
2014/05/13 职场文书
向女朋友道歉的话
2015/01/20 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书
2019暑假学生安全口号
2019/06/27 职场文书
GTX1660显卡搭配显示器推荐
2022/04/19 数码科技