axios request requestBody and formData

Foreword

Management Development in the background of vue, we should demand, the need for information to do a check, you need to pass two parameters of the past, to prevent a body in a prevent formdata in, axios request will default parameter in formdata in transmission.

Just the same front-end, it is nothing more than the format parameters of the problem.

For the back-end

(Form data) can be request.getParameter (reception parameter name)

(Request payload) with request.getParameter is not receiving values ​​must be acquired input stream, in turn resulting string json

Should demand some interfaces are required to be placed on the body in some formdata in the front end of a flexible process needs to be done, because even just change the headers in the field people will always remember. So eventually I will request the file package are as follows:

1. /**
2. Network configuration request * @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 view from 'View'
9. Import VueCookies from 'sight-cookies
10. const moment = require('moment');
11. const Base64 = require('js-base64').Base64;
13. // loading setting the partial refresh frame, and closed after loading block all requests complete
14. var loading ;
15. function startLoading() {
16. loading = Vue.prototype.$loading({
17. lock: true,
18. text: "Loading...",
19. target : Document . querySelector ( '.loading-Area' ) // set the animation loading area
20. });
21. }
22. function endLoading() {
23. loading.close();
24. }
26. // declare an object for storing the number of requests
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. // request interception
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. The Message . Error ({ Message : 'Request Timeout!' });
63. return Promise.resolve(err);
64. })
65. // response interception
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. returnPromise.reject(res);
78. default :
79. returnPromise.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. The Message . Error ({ Message : 'server is eaten ⊙﹏⊙∥' });
89. break;
90. case 404:
91. The Message . Error ({ Message : 'server is eaten ⊙﹏⊙∥' });
92. break;
93. case 403:
94. The Message . Error ({ the Message : 'insufficient permissions, contact your administrator!' });
95. break;
96. default:
97. return Promise.reject(err);
98. }
99. })
100. Axios . Defaults . timeout = 300000 ; // Request Timeout 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. }
     // formdat A
111. export const postRequest = (url, params) => {
112. return axios ({
113. method:'post',
114. url : url ,
115. data:params,
116. transformRequest: [function (data) {
117. easy right = ''
118. for (let it in data) {
119. ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
120. }
121. return right
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 request, then do not need to be set, since requests get back to the default parameters in params in, post the request, then there will be two, so we are here to talk about post encapsulates the request in duplicate.

 

 

Lead to https://www.cnblogs.com/bgwhite/p/9964864.html