axios.post简单封装

╰半橙微兮° 2021-12-14 22:59 538阅读 0赞

简单学习了以下axios数据传输，习惯性对请求进行了以下封装，以下为封装好的代码(相关js文件的引入不谈)

/**
     * 账号登陆登陆
     * 
     * @param url
     *            方法名
     * @param data
     *            参数
     * @param success
     *            成功回调函数
     * @returns
     */
    function doPostLogin(url, data, success) {
    	axios.post(
    		SERVER_HOST + url,
    		data,
    		{
    			headers: {
    				'Content-Type': 'application/x-www-form-urlencoded',
    				'Authorization': '***********'
    			}
    		}).then(function (response) {
    			// 成功回调函数
    			success(response.data)
    		}).catch(function (error) {
    			console.log(error)
        });
    }

因为后端使用了Spring Security进行安全验证，所以请求头中包含Authorization信息，实际开发中根据个人需要添加，SERVER\_HOST为全局变量，即系统访问前缀，在本文中的值为`'http://127.0.0.1:8001/'`  
现在看一下如何调用这个方法：

/**
     * 点击登陆按钮
     * 
     * @returns
     */
    function loginSubmit(){
    	var data={
    		username:‘18812345678’,
    		password:‘123456’
    	}
    	var url = "login/login"
    	console.log(data)
    	doPostLogin(url,data,loginSuc);
    }
    
    /**
     * 登陆成功回调函数
     * 
     * @param data
     *            后端返回值
     * @returns
     */
    function loginSuc(data){
    	console.log(data)
    	console.log("登陆成功")
    }

首先，以上方式封装是没有问题的，但是如果这样调用**后端无法获取到data里面的参数**！！

正常情况下(ajax)这种方式是没有问题的，但是实际上这里存在问题，原因就出现在请求头的`'Content-Type': 'application/x-www-form-urlencoded',`中，以axios传递此类参数和ajax传递此类参数请求信息是不同的，这个可以F12自己试验一下，现在说一下正确的方式

/**
     * 点击登陆按钮
     * 
     * @returns
     */
    function loginSubmit(){
    	let data="username="+‘18812345678’+"&password="+‘123456’
    	var url = "login/login"
    	console.log(data)
    	doPostLogin(url,data,loginSuc);
    }

将参数data转成字符串即可，这样后端就可以获取到请求中的数据。  
当然，以上操作基于后端`request.getParameter`获取参数

如果你要使用json传输数据可以参考以下封装：

/**
     * post请求
     * 
     * @param url
     *            方法名
     * @param data
     *            参数
     * @param success
     *            成功回调函数
     * @returns
     */
    function doPost(url, data, success) {
    	axios.post(
    		SERVER_HOST + url,
    		data,
    		{
    			headers: {
    				'Content-Type': 'application/json;charset=UTF-8',
    				'Authorization': AUTH_TOKEN
    			}
    		}).then(function (response) {
    			// 成功回调函数
    			success(response.data)
    		}).catch(function (error) {
    			console.log(error)
        });
    }

调用方式

/**
     * 发送短信验证码
     * 
     * @returns
     */
    function sendSms() {
    	var data = {
    		mobile : ‘18812345678’
    	}
    	var url = "code/sms"
    	doPost(url, data, sendSmsSuc)
    }
    /**
     * 短信发送成功回调函数
     * 
     * @param data
     *            返回值
     * @returns
     */
    function sendSmsSuc(data) {
    	console.log(data)
    }

如有高见，欢迎留言！