axios請求requestBody和formData

前言

在vue的后台管理開發中，應需求，需要對信息做一個校驗，需要將參數傳遞兩份過去，一份防止在body中，一份防止在formdata中，axios請求會默認將參數放在formdata中進行發送。

對前端而言其實都一樣，無非就是參數的格式問題。

對后端而言

（form data）可以用request.getParameter(接收參數名)

（request payload）用request.getParameter是接收不到值，必須用輸入流獲取，得到字符串在轉json

應需求有的接口是需要放在body中有的要放在formdata中，所以前端需要做一個靈活的處理，因為就算只是更改headers中的字段也會讓人時時刻刻記得。所以最終我將請求文件封裝如下：

/**
* @description 配置網絡請求
* @author luokaibin chaizhiyang
*/
import axios from 'axios'
import { Message} from 'element-ui'
import router from '../router/permission'
import Vue from 'vue'
import VueCookies from 'vue-cookies'
const moment = require('moment');
const Base64 = require('js-base64').Base64;
// loading框設置局部刷新，且所有請求完成后關閉loading框
var loading;
function startLoading() {
loading = Vue.prototype.$loading({
lock: true,
text: "Loading...",
target: document.querySelector('.loading-area')//設置加載動畫區域
});
}
function endLoading() {
loading.close();
}
// 聲明一個對象用於存儲請求個數
var needLoadingRequestCount = 0;
function showFullScreenLoading() {
if (needLoadingRequestCount === 0) {
startLoading();
}
needLoadingRequestCount++;
};
function tryHideFullScreenLoading() {
if (needLoadingRequestCount <= 0) return;
needLoadingRequestCount--;
if (needLoadingRequestCount === 0) {
endLoading();
}
};
// 請求攔截
axios.interceptors.request.use(config => {
let token = "";
showFullScreenLoading();
if(VueCookies.isKey('userinfo')) {
const USERINFO = VueCookies.get('userinfo');
if(config.method == 'get') {
token = Base64.encode(USERINFO.token + '|' + moment().utc().format('YYY-MM-DD HH:mm:ss' + '|' + JSON.stringify(config.params)));
config.params.hospitalId = USERINFO.hospitalId;
} else {
token = Base64.encode(USERINFO.token + '|' + moment().utc().format('YYY-MM-DD HH:mm:ss' + '|' + JSON.stringify(config.data)));
config.data.hospitalId = USERINFO.hospitalId;
}
let TOKENSTART = token.slice(0,10),
TOKENEND = token.slice(10);
token = TOKENEND + TOKENSTART;
config.headers['token'] = token;
}
return config;
}, err => {
tryHideFullScreenLoading();
Message.error({ message: '請求超時!' });
return Promise.resolve(err);
})
// 響應攔截
axios.interceptors.response.use(res => {
tryHideFullScreenLoading();
switch(res.data.code) {
case 200:
return res.data.result;
case 401:
router.push('/login');
VueCookies.remove('userinfo');
return Promise.reject(res);
case 201:
Message.error({ message: res.data.msg });
return Promise.reject(res);
default :
return Promise.reject(res);
}
}, err => {
tryHideFullScreenLoading();
if(!err.response.status) {
return false;
}
switch(err.response.status) {
case 504:
Message.error({ message: '服務器被吃了⊙﹏⊙∥' });
break;
case 404:
Message.error({ message: '服務器被吃了⊙﹏⊙∥' });
break;
case 403:
Message.error({ message: '權限不足,請聯系管理員!' });
break;
default:
return Promise.reject(err);
}
})
axios.defaults.timeout = 300000;// 請求超時5fen
// RequestBody
export const postJsonRequest = (url, params) => {
return axios({
method: 'post',
url: url,
data: params,
headers: {
'Content-Type': 'application/json',
},
});
}
// formData
export const postRequest = (url, params) => {
return axios({
method: 'post',
url: url,
data: params,
transformRequest: [function (data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded' } }); }
export const getRequest = (url, data = '') => {
return axios({
method: 'get',
params: data,
url: url,
});
}

 

Get請求的話是不需要進行設置的，因為get請求回默認將參數放在params中，post請求的話會有兩個，所以我們這里講post請求封裝了兩份。

 

 

引至 https://www.cnblogs.com/bgwhite/p/9964864.html