前言
在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请求封装了两份。其他的东西的话大家不需要查看。
由于笔者近期较忙,所以,随便抽了一下,日后整理将会更新