import axios from 'axios';
import alert from './alert.js';
import Qs from 'qs' //引入qs 时axios的自带模块 let env = process.env.NODE_ENV;
let root = ''; if (env === 'development') {
console.log("api");
} else if (env === 'production') {
console.log("pro");
root = '';
} else {
throw '请检查process.env.NODE_ENV的值,是否符合这些值之一:development,production';
} Date.prototype.format = function (fmt) {
var o = {
"y+": this.getFullYear(),
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"H+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds() //秒
};
if (!fmt) {
fmt = 'yyyy-MM-dd HH:mm:ss';
}
if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o) {
if (new RegExp("(" + k + ")").test(fmt)) {
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
}
}
return fmt;
} // 自定义判断元素类型JS
function toType(obj) {
return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase();
} // 参数过滤函数
function filterNull(o) {
for (var key in o) {
if (o[key] === null) {
delete o[key];
}
if (toType(o[key]) === 'string') {
o[key] = o[key].trim();
} else if (toType(o[key]) === 'date') {
o[key] = (o[key].format());
} else if (toType(o[key]) === 'object') {
o[key] = filterNull(o[key]);
} else if (toType(o[key]) === 'array') {
o[key] = filterNull(o[key]);
}
}
return o;
} function apiAxios(method, url, params, success, failure, authFail) {
console.log('url:' + url);
if (params) {
params = filterNull(params);
} var base = "";
if (url.indexOf(".html") != -1) {
base = "";
} else {
base = root;
} axios({
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
},
transformRequest: [function(data) {//在请求之前对data传参进行格式转换
data = Qs.stringify(data)
return data
}],
method: method,
url: url,
data: method === 'POST' || method === 'PUT' || method === 'DELETE' ? params : null,
params: method === 'GET' ? params : null,
baseURL: base,
withCredentials: true
}).then(function (res) {
if (res.status >= 200 && res.status <= 210) {
if (success) {
success(res);
}
} else {
//不走
// window.alert('error: ' + JSON.stringify(res.data));
}
}).catch(function (err) {
let res = err.response;
if (err && res) {
console.log(res.status);
if (res.status == 504) {
alert.eduToast("服务器连接失败!请检查您的网络或服务器!!",2000);
return;
} else if (res.status == 401) {
console.log('------------------:status'+res.status);
console.log('------------------:authFail'+authFail);
}
if (failure) {
failure(res);
} else {
alert.eduToast(res.data,2000);
}
} else {
if(authFail){
// localStorage.setItem('login', '');
}else{
console.log(err);
}
}
});
} // 返回在vue模板中的调用接口
export default {
get: function (url, params, success, failure,authFail) {
return apiAxios('GET', url, params, success, failure,authFail);
},
post: function (url, params, success, failure) {
return apiAxios('POST', url, params, success, failure);
},
put: function (url, params, success, failure) {
return apiAxios('PUT', url, params, success, failure);
},
delete: function (url, params, success, failure) {
return apiAxios('DELETE', url, params, success, failure);
},
initHeader: function () {
console.log('------------------:initHeader');
}
};

若传json格式,不用加header,和transformRequest   在合适地方将对象用JSON.stringfiy(),转化即可

axios的post传参时,将参数转为form表单格式的更多相关文章

  1. [js开源组件开发]query组件,获取url参数和form表单json格式

    query组件,获取url参数和form表单json格式 距离上次的组件[js开源组件开发]ajax分页组件一转眼过去了近二十天,或许我一周一组件的承诺有了质疑声,但其实我一直在做,只是没人看到……, ...

  2. URL传参时中文参数乱码的解决方法

    URL传参时,中文参数乱码的解决: 今天在工作中遇到了这样的一个问题,在页面之间跳转时,我将中文的参数放入到url中,使用location进行跳转传参,但是发现接收到的参数值是乱码.我的代码是这样写的 ...

  3. vue中axios的post请求使用form表单格式发送数据

    vue使用插件qs实现 (qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库.) 在jquery中的ajax的方法已将此封装,所以不需要再次序列化 1. 安装   在项目中使用命令行工具输 ...

  4. 防止表单提交时刷新页面-阻止form表单的默认提交行为

    最近在写 ajax 提交的时候遇到一个问题,在执行 ajax 提交之后,浏览器页面自动刷新了,主要是没有 由于form 表单的默认提交行为.一下是几种阻止 form 表单默认提交行为的方式. 1.使用 ...

  5. ANDROID使用MULTIPARTENTITYBUILDER实现类似FORM表单提交方式的文件上传

    最近在做 Android 端文件上传,要求采用 form 表单的方式提交,项目使用的 afinal 框架有文件上传功能,但是始终无法与php写的服务端对接上,无法上传成功.读源码发现:afinal 使 ...

  6. axios用post传参,后端无法获取参数问题

    最近用vue+nodejs写项目,前端使用axios向后台传参,发现后台接收不到参数. 后台是node+express框架,然后使用了body-parser包接收参数,配置如下: const expr ...

  7. mock和axios常见的传参方式

    第一次接手项目,传参方式还有些吃力,因此做一下总结. 首先我们需要会看swagger中的接口.里面写了某个接口需要接收什么样的值,前端怎么传递这个值 在mock中的传参方式: mock中传参的方式有两 ...

  8. C++ 传参时传内置类型时用传值(pass by value)方式效率较高

    来源:唐磊的个人博客<C++ 传参时传内置类型时用传值(pass by value)方式效率较高> 在<Effective C++>里提到对内置(C-like)类型在函数传参时 ...

  9. 详解Python函数参数定义及传参(必备参数、关键字参数、默认可省略参数、可变不定长参数、*args、**kwargs)

    详解Python函数参数定义及传参(必备参数.关键字参数.默认可省略参数.可变不定长参数.*args.**kwargs) Python函数参数传参的种类   Python中函数参数定义及调用函数时传参 ...

随机推荐

  1. Web前端开发JavaScript提高

    JavaScript 一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它的解释器被称为JavaScript引擎,是浏览器的一部分,并且是被广泛用于客户端的脚本语言,JavaS ...

  2. Codeforces 1237D. Balanced Playlist

    传送门 首先显然的,如果一个位置开始播放了两圈还没结束,那么就永远不会结束 先考虑位置 $1$ 开始播放,用一个 $multisetset$ 维护一下当前听的所有歌,直到某一首歌 $r$ 不合法了就停 ...

  3. Spring 的 Bean 管理(XML 方式)

    Spring 的 Bean 管理(XML 方式) 1. 三种实例化 Bean 的方式 使用类构造器实例化(默认无参数) 使用静态工厂方法实例化(简单工厂模式) 使用实例工厂方法实例化(工厂方法模式) ...

  4. 数据库HAVING的使用

    HAVING语句通常与GROUP BY语句联合使用,用来过滤由GROUP BY语句返回的记录集. HAVING语句的存在弥补了WHERE关键字不能与聚合函数联合使用的不足. 记录一下

  5. wpf之二进制资源

    一.当需要添加图片.音频.视屏的资源到wpf项目里是,可以直接把文件添加到项目里 右击add->existing item. 1.如果想将外部文件编异常目标成为二进制资源,在文件的属性窗口 Bu ...

  6. vue入门:(组件)

    模板:(template)模板声明了数据和最终展现给用户的DOM之间的映射关系. 初始数据:(data)一个组件的初始数据状态.对于可复用的组件来说,通常是私有的状态. 接收外部参数:(props)组 ...

  7. javascript学习方法指南

    Javascript看似无限的可能性使得基于HTML和CSS的公共网站成为过去.然而,尽管JavaScript为用户提供了出色的动态体验,但它也为开发人员创建了一个雷区.因此,Javascript搜索 ...

  8. Html-自适应

    自适应 使网页能适应不同终端设备的技术.原理是通过检测视口分辨率来判断是什么终端的,PC,手机还是平板. 做自适应的网页时,需要在代码中加入“祖传代码”,即通用代码. 这是在头部head引入的: &l ...

  9. SQLplus命令中删除键和翻页键不能用的问题

    问题现象: 在进入连接数据库后,如何写错命令,删除键不好使,总是出现^H^H [oracle@master2 ~]$ sqlplus / as sysdba SQL*Plus: Release 12. ...

  10. sourceforge.net

    https://sourceforge.net/ SourceForge.net,又称SF.net,是开源软件开发者进行开发管理的集中式场所. SourceForge.net由VA Software提 ...