简单学习了以下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)
}
如有高见,欢迎留言!