axios的post传参时,将参数转为form表单格式

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(),转化即可

原文地址:https://www.cnblogs.com/fqh123/p/10846168.html

时间: 2024-10-11 14:12:32

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

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

query组件,获取url参数和form表单json格式 距离上次的组件[js开源组件开发]ajax分页组件一转眼过去了近二十天,或许我一周一组件的承诺有了质疑声,但其实我一直在做,只是没人看到……,最近项目紧,几个小组,只有我一个前端,公司对前端的定位不清晰,导致前端人员过少的情况.所以还得促进公司前端人员增长,不然再这么玩下去,我要被玩死了,一个公司,不可能靠一个资深前端来支撑二三十个开发的需求,这是不现实的,特别是现在的页面不再是复制粘贴的前况下.我默默耕芸,所以这次我整理了这一个月里所有

在传参时,url参数中包含+、空格、=、%、&amp;、#等特殊符号的处理

url参数中有+.空格.=.%.&.#等特殊符号的问题解决? 解决办法: 将这些字符转化成服务器可以识别的字符,对应关系如下: URL字符转义 +    URL 中+号表示空格                      %2B 空格 URL中的空格可以用+号或者编码           %20 /   分隔目录和子目录                        %2F ?    分隔实际的URL和参数                    %3F %    指定特殊字符           

JSP动态action参数提交form表单到springMVC的示例

关于form表单上传文件的问题

最近在学习php,刚好学到利用表单上传文件这一知识.在学习的过程中,出现了这样几个问题,我是小白,还请高手指点. 大家都知道在上传文件时,我们要设置表单的MIME编码.默认情况,enctype的编码格:application/x-www-form-urlencoded,不能用于文件上传, 只有使用了multipart/form-data,才能完整的传递文件数据,进行下面的操作.但是我在接下来的操作中,遇到了这样的问题. <?php   if (isset($_POST['submit']) &

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

最近在做 Android 端文件上传,要求采用 form 表单的方式提交,项目使用的 afinal 框架有文件上传功能,但是始终无法与php写的服务端对接上,无法上传成功.读源码发现:afinal 使用了某大神写的 MultipartEntity.java 生成 form 表单内容,然而生成的内容格式不够标准,而且还存在诸多问题,如:首先将所有文件读入到内存,再生成字节流写入到 socket.那么问题来了:如果是几百MB的文件怎么办? 几番搜索,受到 这篇文章(已被我转载,但是示例代码已过期)的

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

最近用vue+nodejs写项目,前端使用axios向后台传参,发现后台接收不到参数. 后台是node+express框架,然后使用了body-parser包接收参数,配置如下: const express = require('express') const bodyParser = require('body-parser') const app = express() app.listen(8888, () => { console.log('Server start on 8888...

mock和axios常见的传参方式

第一次接手项目,传参方式还有些吃力,因此做一下总结. 首先我们需要会看swagger中的接口.里面写了某个接口需要接收什么样的值,前端怎么传递这个值 在mock中的传参方式: mock中传参的方式有两个参数,一个是path对象,一个是data对象. path想当于拼接在url地址上的参数, data是url后面的参数. 1.get请求 如果url后面有opts的参数,则说明他需要传递参数.要不就不用传递了,直接写个url就好了,不用拼接参数.(请看下图) 图一是接口 图二是调用了这个接口. 这个

关于SQL Server 2017中使用json传参时解析遇到的多层解析问题

原文:关于SQL Server 2017中使用json传参时解析遇到的多层解析问题 开发新的系统,DB部分使用了SQL Server从2016版开始自带的Json解析方式. 用了快半年,在个人项目,以及公司部分项目上使用了,暂时还没遇到大的问题,和性能问题. 今天在解析Json的多级参数遇到了点小问题,在此记录一下: 传参内容如下: 1 declare @json varchar(max)=N'{"Customer":36,"Positions":[{"I

小程序函数传参时{}的作用

在前台wxml的标签中bind绑定后台方法并传参时,正常情况时如下所示: ondata  (e) { console.log(e) }, 这样输出的是所有的属性结果 如果想要输出的是自己想要的结果,就需要这样: 如:想要 e 中的 detail 属性值: ondata  ({detail}) { console.log(detail) }, 这样只需包裹在 {} 中就可以了,输出的结果就只是你想要的 detail 结果 原文地址:https://www.cnblogs.com/Z_66/p/12