前言

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

axios请求requestBody和formData的更多相关文章

  1. nodejs-5.2 axios请求

    1.npm官方文档:https://www.npmjs.com/package/axios 2.axios:用于 浏览器 和 node.js的基于Promise的HTTP客户端 请求 特征 从浏览器制 ...

  2. axios [æk'si:əʊs] 及 axios 请求配置

    特征 比Jquery轻量,但处理请求不多的时候,可以使用 基于Promise语法标准 支持nodejs 自动转换JSON数据 用法 get // Make a request for a user w ...

  3. Vue框架axios请求(类似于ajax请求)

    Vue框架axios get请求(类似于ajax请求) 首先介绍下,这个axios请求最明显的地方,通过这个请求进行提交的时候页面不会刷新 <!DOCTYPE html> <html ...

  4. 10. vue axios 请求未完成时路由跳转报错问题

    axios 请求未完成时路由跳转报错问题 前两天项目基本功能算是完成了,在公司测试时遇到了遇到了一个问题,那就是在请求未完成时进行路由跳转时会报错,想了几种办法来解决,例如加loading,请求拦截, ...

  5. axios请求本地的json文件在打包部署到子目录域名下,路径找不到

    前言: 因为要同时部署两个项目,有一个是部署到域名下面的子目录下,如:https://xxx.com/siot-admin vue 项目中使用axios请求了本地项目的static文件夹下的json文 ...

  6. 记录一次axios请求造成的数组初始化失败

    axios请求是一个异步的请求,简单来讲就是在做其他事情的时候可以把这个先放一边等其他的事情做完后再来做这件事件. 我之前这样调用了一个方法: mounted() { this.first() thi ...

  7. token回话保持,axios请求拦截和导航守卫以及token过期处理

    1:了解token:有时候大家又说token令牌.整个机制是前端第一次登陆发送请求,后端会根据前端的用户名和密码, 通过一些列的算法的到一个token令牌, 这个令牌是独一无二的,前端每次发送请求都需 ...

  8. 解决在vue中axios请求超时的问题

    查看更多精彩内容请访问我的新博客:https://www.cssge.com/ 自从使用Vue2之后,就使用官方推荐的axios的插件来调用API,在使用过程中,如果服务器或者网络不稳定掉包了, 你们 ...

  9. vue 路由拦截、axios请求拦截

    路由拦截 项目中,有些页面需要登录后才能进入,例如,在某页面A,用户在操作前需要先进入登录页(此时需要将上一页的地址(/survey/start)作为query存入login页面的地址中,如: htt ...

随机推荐

  1. PAT 1127 ZigZagging on a Tree[难]

    1127 ZigZagging on a Tree (30 分) Suppose that all the keys in a binary tree are distinct positive in ...

  2. PAT 1044 Shopping in Mars[二分][难]

    1044 Shopping in Mars(25 分) Shopping in Mars is quite a different experience. The Mars people pay by ...

  3. VS2010/MFC编程入门之十九(对话框:颜色对话框)

    鸡啄米在上一节中为大家讲解了字体对话框的使用方法,熟悉了字体对话框,本节继续讲另一种通用对话框--颜色对话框. 颜色对话框大家肯定也不陌生,我们可以打开它选择需要的颜色,简单说,它的作用就是用来选择颜 ...

  4. AtCoder Grand Contest 029 Solution

    A: Solved. 签. #include <bits/stdc++.h> using namespace std; #define ll long long #define N 200 ...

  5. React 函数传参

    import React, { Component } from 'react'; import { render } from 'react-dom'; class GroceryList exte ...

  6. laravel 多图上传

    前台  name="photo[]" 后台获取  $request->file('photo');//获取多个图片循环

  7. 基于std::string的字符串处理

    转自:http://zxdflyer.blog.163.com/blog/static/25664262201322510217495/ C++标准模板库std使用广泛.该库中处理字符串的对象为std ...

  8. Linux 笔记 #04# Installing Tomcat 8 on Debian

    失败一 ※ 失败二  ※ 失败三 ※ 完 1- 确认机型: root@iZwz:~# lsb_release -a LSB Version: core-2.0-amd64:core-2.0-noarc ...

  9. Python3.x:定时获取页面数据存入数据库

    Python3.x:定时获取页面数据存入数据库 #间隔五分钟采集一次数据入库 import pymysql import urllib.request from bs4 import Beautifu ...

  10. GreenOpenPaint的实现(二)打开显示图片

    1.DOC中添加,核心图片文件保存在这里.之所以不用Mat,是因为CVVImage有更好的输入输出函数. 我这里直接使用了public public: CvvImage m_image; 2.重载打开 ...