前言

在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 // RequestBodyexport const postJsonRequest = (url, params) => {  return axios({    method: 'post',    url: url,    data: params,    headers: {      'Content-Type': 'application/json',    },  });} // formDataexport 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请求封装了两份。其他的东西的话大家不需要查看。

由于笔者近期较忙，所以，随便抽了一下，日后整理将会更新