axios请求requestBody和formData

前言

在vue的后台管理开发中，应需求，需要对信息做一个校验，需要将参数传递两份过去，一份防止在body中，一份防止在formdata中，axios请求会默认将参数放在formdata中进行发送。

对前端而言其实都一样，无非就是参数的格式问题。

对后端而言

（form data）可以用request.getParameter(接收参数名)

（request payload）用request.getParameter是接收不到值，必须用输入流获取，得到字符串在转json

应需求有的接口是需要放在body中有的要放在formdata中，所以前端需要做一个灵活的处理，因为就算只是更改headers中的字段也会让人时时刻刻记得。所以最终我将请求文件封装如下：

1. /**
2. * @description 配置网络请求
3. * @author luokaibin chaizhiyang
4. */
5. import axios from 'axios'
6. import { Message} from 'element-ui'
7. import router from '../router/permission'
8. import Vue from 'vue'
9. import VueCookies from 'vue-cookies'
10. const moment = require('moment');
11. const Base64 = require('js-base64').Base64;
13. // loading框设置局部刷新，且所有请求完成后关闭loading框
14. var loading;
15. function startLoading() {
16. loading = Vue.prototype.$loading({
17. lock: true,
18. text: "Loading...",
19. target: document.querySelector('.loading-area')//设置加载动画区域
20. });
21. }
22. function endLoading() {
23. loading.close();
24. }
26. // 声明一个对象用于存储请求个数
27. var needLoadingRequestCount = 0;
28. function showFullScreenLoading() {
29. if (needLoadingRequestCount === 0) {
30. startLoading();
31. }
32. needLoadingRequestCount++;
33. };
34. function tryHideFullScreenLoading() {
35. if (needLoadingRequestCount <= 0) return;
36. needLoadingRequestCount--;
37. if (needLoadingRequestCount === 0) {
38. endLoading();
39. }
40. };
41. // 请求拦截
42. axios.interceptors.request.use(config => {
43. let token = "";
44. showFullScreenLoading();
45. if(VueCookies.isKey('userinfo')) {
46. const USERINFO = VueCookies.get('userinfo');
47. if(config.method == 'get') {
48. token = Base64.encode(USERINFO.token + '|' + moment().utc().format('YYY-MM-DD HH:mm:ss' + '|' + JSON.stringify(config.params)));
49. config.params.hospitalId = USERINFO.hospitalId;
50. } else {
51. token = Base64.encode(USERINFO.token + '|' + moment().utc().format('YYY-MM-DD HH:mm:ss' + '|' + JSON.stringify(config.data)));
52. config.data.hospitalId = USERINFO.hospitalId;
53. }
54. let TOKENSTART = token.slice(0,10),
55. TOKENEND = token.slice(10);
56. token = TOKENEND + TOKENSTART;
57. config.headers['token'] = token;
58. }
59. return config;
60. }, err => {
61. tryHideFullScreenLoading();
62. Message.error({ message: '请求超时!' });
63. return Promise.resolve(err);
64. })
65. // 响应拦截
66. axios.interceptors.response.use(res => {
67. tryHideFullScreenLoading();
68. switch(res.data.code) {
69. case 200:
70. return res.data.result;
71. case 401:
72. router.push('/login');
73. VueCookies.remove('userinfo');
74. return Promise.reject(res);
75. case 201:
76. Message.error({ message: res.data.msg });
77. return Promise.reject(res);
78. default :
79. return Promise.reject(res);
80. }
81. }, err => {
82. tryHideFullScreenLoading();
83. if(!err.response.status) {
84. return false;
85. }
86. switch(err.response.status) {
87. case 504:
88. Message.error({ message: '服务器被吃了⊙﹏⊙∥' });
89. break;
90. case 404:
91. Message.error({ message: '服务器被吃了⊙﹏⊙∥' });
92. break;
93. case 403:
94. Message.error({ message: '权限不足,请联系管理员!' });
95. break;
96. default:
97. return Promise.reject(err);
98. }
99. })
100. axios.defaults.timeout = 300000;// 请求超时5fen
     // RequestBody
101. export const postJsonRequest = (url, params) => {
102. return axios({
103. method: 'post',
104. url: url,
105. data: params,
106. headers: {
107. 'Content-Type': 'application/json',
108. },
109. });
110. }
     // formData
111. export const postRequest = (url, params) => {
112. return axios({
113. method: 'post',
114. url: url,
115. data: params,
116. transformRequest: [function (data) {
117. let ret = ''
118. for (let it in data) {
119. ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
120. }
121. return ret
122. }],
123. headers: {
124. 'Content-Type': 'application/x-www-form-urlencoded'
125. }
126. });
127. }
128. export const getRequest = (url, data = '') => {
129. return axios({
130. method: 'get',
131. params: data,
132. url: url,
133. });
134. }

Get请求的话是不需要进行设置的，因为get请求回默认将参数放在params中，post请求的话会有两个，所以我们这里讲post请求封装了两份。

 

 

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