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 相关文章推荐
非常漂亮的JS+CSS图片幻灯切换特效
Nov 20 Javascript
FireBug 调试JS入门教程 如何调试JS
Dec 23 Javascript
JavaScript中Cookies的相关使用教程
Jun 04 Javascript
整理AngularJS中的一些常用指令
Jun 16 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
Jul 22 Javascript
AngularJS封装指令方法详解
Dec 12 Javascript
jquery表单验证插件validation使用方法详解
Jan 20 Javascript
浅谈js函数三种定义方式 & 四种调用方式 & 调用顺序
Feb 19 Javascript
jQuery设计思想
Mar 07 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
May 17 Javascript
JS非行间样式获取函数的实例代码
Jun 05 Javascript
js实现转动骰子模型
Oct 24 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采集利器 Snoopy 试用心得
2011/07/03 PHP
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
2013/01/23 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
javascript面向对象之定义成员方法实例分析
2015/01/13 Javascript
jQuery中noconflict函数的实现原理分解
2015/02/03 Javascript
js实现向右横向滑出的二级菜单效果
2015/08/27 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
2016/06/07 Javascript
vue环境搭建简单教程
2017/11/07 Javascript
JavaScript数据结构之单链表和循环链表
2017/11/28 Javascript
详解Vue中watch对象内属性的方法
2019/02/01 Javascript
微信小程序实现的绘制table表格功能示例
2019/04/26 Javascript
微信小程序-form表单提交代码实例
2019/04/29 Javascript
Vue自定义render统一项目组弹框功能
2020/06/07 Javascript
vue使用exif获取图片经纬度的示例代码
2020/12/11 Vue.js
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Windows系统下安装Python的SSH模块教程
2015/02/05 Python
python下载文件时显示下载进度的方法
2015/04/02 Python
Ubuntu 下 vim 搭建python 环境 配置
2017/06/12 Python
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
python2使用bs4爬取腾讯社招过程解析
2019/08/14 Python
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
python字典排序的方法
2019/10/12 Python
Django项目基础配置和基本使用过程解析
2019/11/25 Python
Selenium alert 弹窗处理的示例代码
2020/08/06 Python
pytorch 中forward 的用法与解释说明
2021/02/26 Python
CSS3轻松实现清新 Loading 效果的简单实例
2016/06/06 HTML / CSS
COS美国官网:知名服装品牌
2019/04/08 全球购物
计算机科学与技术应届生求职信
2013/11/07 职场文书
大学毕业感言
2014/01/10 职场文书
给分销商的致歉信
2014/01/14 职场文书
赞美老师的演讲稿
2014/05/22 职场文书
群众路线自查报告及整改措施
2014/11/04 职场文书
佛光寺导游词
2015/02/10 职场文书
2015年学校信息技术工作总结
2015/05/25 职场文书
python实现网络五子棋
2021/04/11 Python
MySql新手入门的基本操作汇总
2021/05/13 MySQL