本文介绍了如何在Vue项目中使用axios封装POST请求，处理两种不同类型的POST数据：普通JSON和FormData。通过设置不同的Content-Type，确保上传文件时使用FormData，同时不影响其他POST接口。文中提供了request.js和main.js的代码示例，并展示了两种封装后的post方法：post和postform。
更行了新得封装，可以看下下面得第二种。。。。。
第一种：
项目本来是上传一张pdf或者图片，后来需求变化需要上传多个文件，但是之前上传使用的是转换base64然后传给后端，后端再去转化。这种方式用于多文件的话由于转换base64后体积过大，会造成请求时间过长，上传时间过长等等问题。所以需要改造，上传文件需换成文件流形式，需要换成FormData形式。由于项目所有post接口之前都定义为默认请求头'application/x-www-form-urlencoded'
而FormData需要'multipart/form-data'。所以对项目封装的axios进行了改造。并且不影响之前所有的post请求。代码如下：
request.js代码：
import axios from 'axios';
import qs from 'qs'
import cutModels from './option';
// 切换域名地址。
// todo: 配置全局域名访问地址
// 默认可不填写，默认值为official，official打包，dev本地测试，gray正式环境
window['cutModel'] = cutModels('dev');
//正式
axios.defaults.baseURL = cutModel.baseURL;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// axios.defaults.headers.post['Content-Type'] = 'multipart/form-data';
var instance = axios.create({
headers: {'content-type':'multipart/form-data'}
});
//http request 拦截器
axios.interceptors.request.use((config) => {
if(config.method === 'post'){
config.data = qs.stringify(config.data);
}
return config;
},(error) =>{
return Promise.reject(error);
});
/**
* 封装get方法
* @param url
* @param data
* @returns {Promise}
*/
export function get(url,params={}){
return new Promise((resolve,reject) => {
axios.get(url,{
params:params
})
.then(response => {
resolve(response.data);
})
.catch(err => {
reject(err)
})
})
}
/**
* 封装post请求
* @param url
* @param data
* @returns {Promise}
*/
export function post(url,data = {}){
return new Promise((resolve,reject) => {
axios.post(url,data)
.then(response => {
resolve(response.data);
},err => {
reject(err)
})
})
}
/**
* 封装post请求 FormData方式
* @param url
* @param data
* @returns {Promise}
*/
export function postform(url,data = {}){
return new Promise((resolve,reject) => {
instance.post(url,data)
.then(response => {
resolve(response.data);
},err => {
reject(err)
})
})
}
main.js代码引入
import Vue from 'vue'
import App from './App'
import router from './router'
import { get, post, postform } from './assets/js/request'
import { Loading, AlertModule } from 'vux'
Vue.component('loading', Loading)
Vue.prototype.$get = get;
Vue.prototype.$post = post;
Vue.prototype.$postform = postform;
Vue.config.productionTip = false
//路由守卫
router.beforeEach((to, from, next) => {
// next()
if(to.path == '/' || to.path == '/register') {
if(sessionStorage.getItem('userinfo')) {
AlertModule.show({
title: '提示',
content: "您已登录！"
})
} else {
next()
}
} else {
//判断是否有登录用户信息
if(sessionStorage.getItem('userinfo')) {
next()
} else {
AlertModule.show({
title: '提示',
content: "不好意思，您还未登录！"
})
next({path:"/"})
}
}
});
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: ''
})
页面使用改造post方法
methods: {
//未改造之前的post请求方式，转换成base64
toupload() {
// console.log(this.filesarr)
// console.log(this.filenamearr)
if (!this.option) {
AlertModule.show({
title: '提示',
content: '请选择类型'
})
return false
}
if (!this.filesarr) {
AlertModule.show({
title: '提示',
content: '请上传文件'
})
return false
}
this.showLoading = true
let self = this
// console.log(this.filesarr)
for(let i = 0; i< this.filesarr.length; i++) {
// 文件转换 base64 编码
this.blobToDataURL(this.filesarr[i]).then(res => {
self.fileUrlArr.push(res)
// 判断遍历完后上传文件
if(self.fileUrlArr.length == this.filesarr.length) {
// console.log(self.fileUrlArr)
// 上传文件
var userlogin = {
'ModuleName': 'UploadXCZL',
'TokenId': window['cutModel'].TokenId,
'RequestType': 'UploadData',
'Data':{
'User_Name': self.userinfo.UserName,
'Dept_Code': self.userinfo.Dept_Code, //部门编号
'Pcsh_Id': self.ShList.PKID, //批次收货的编号
'PKID': self.continfo.PKID, //合同明细编号
'File_Type': self.option, //文件类型
'File_Name': self.filenamearr, //文件名
'File_Text': self.fileUrlArr, //文件的base64字符串
'Demo': self.bztext, //备注
}
}
self.$post('/xxxxxx', userlogin)
.then(res => {
self.showLoading = false
var res = JSON.parse(res)
// console.log(res);
if(res.Data.Statu_Code == 200) {
AlertModule.show({
title: '提示',
content: res.Data.Msg,
onHide () {
self.$router.push({
name: "stockdetails",
query: {
page: 0
}
});
}
})
} else if(res.Data.Statu_Code == 100) {
AlertModule.show({
title: '提示',
content: res.Data.Msg,
onHide () {
sessionStorage.clear()
self.$router.push('/')
}
})
} else {
AlertModule.show({
title: '不好意思',
content: res.Data.Msg
})
}
})
.catch(e => {
self.showLoading = false
AlertModule.show({
title: '不好意思',
content: '服务器繁忙'
})
});
}
})
}
},
//改造之后的post请求方式
loadto() {
this.showLoading = true
let self = this
let form = new FormData();
form.append("ModuleName",'UploadXCZL');
form.append("TokenId",window['cutModel'].TokenId);
form.append("RequestType",'UploadData');
form.append("Data['User_Name']",this.userinfo.UserName);
form.append("Data['Dept_Code']",this.userinfo.Dept_Code);
form.append("Data['Pcsh_Id']",this.ShList.PKID);
form.append("Data['PKID']",this.continfo.PKID);
form.append("Data['File_Type']",this.option);
form.append("Data['File_Name']",this.filenamearr);
form.append("Data['Demo']",this.bztext);
this.filesarr.forEach(function (file) {
form.append("Data['File_Text']", file);
})
for (var [a, b] of form.entries()) {
console.log(a, b);
}
this.$postform('/xxxxxxxx', form)
.then(res => {
this.showLoading = false
var res = JSON.parse(res)
console.log(res);
if(res.Data.Statu_Code == 200) {
AlertModule.show({
title: '提示',
content: res.Data.Msg,
onHide () {
this.$router.push({
name: "stockdetails",
query: {
page: 0
}
});
}
})
} else if(res.Data.Statu_Code == 100) {
AlertModule.show({
title: '提示',
content: res.Data.Msg,
onHide () {
sessionStorage.clear()
self.$router.push('/')
}
})
} else {
AlertModule.show({
title: '不好意思',
content: res.Data.Msg
})
}
})
.catch(e => {
this.showLoading = false
AlertModule.show({
title: '不好意思',
content: '服务器繁忙'
})
});
}
}
由于这个多文件是后面改的需求，如果整体项目换post请求，后端需要把所有接口改一遍，为了节省时间所以使用了这种方式，如果还有其他方式，欢迎大家留言交流
第二种：
后记，在看了一些大神得处理后，自己有重新封装了一下这个请求。以前得那种封装总觉得不是很合理。下面只是做了统一得封装，不需要在去新实例化一个axios，效果还是不错得。看代码吧。
import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
// 创建一个AXIOS实例
const service = axios.create({
// baseURL: process.env.VUE_APP_BASE_API // url = base url + request url
// baseURL: 'xxxx' // 线上地址
// baseURL: 'xxxx' // 本地测试地址
baseURL: 'http://xxxxx' // 本地测试地址
// withCredentials: true, // send cookies when cross-domain requests
// timeout: 10000 // 请求超时
})
// 请求拦截器
service.interceptors.request.use(
config => {
// 在发出请求前做点什么
if (store.getters.token) {
// 让每个请求携带令牌
// “X-Token”是自定义头密钥
// 请根据当前情况修改
config.headers['X-Token'] = getToken()
}
// 这里做了统一处理，多加了$_isFormData去判断是什么样得post请求
if (config.data && config.data.$_isFormData === false) {
config.headers['Content-Type'] = 'application/json'
// console.log(JSON.stringify(config.data.dataobj))
config.data = config.data.dataobj
} else {
config.headers['Content-Type'] = 'multipart/form-data'
}
// console.log(config)
return config
},
error => {
// 处理请求错误
console.log(error) // 用于调试
return Promise.reject(error)
}
)
// 响应拦截器
service.interceptors.response.use(
response => {
let res
if (typeof (response.data) === 'string') {
res = JSON.parse(response.data)
} else if (typeof (response.data) === 'object') {
res = response.data
}
if (res.Data.Statu_Code !== '200') {
// 403:令牌过期；
if (res.Data.Statu_Code === '403') {
// 重新登录
MessageBox.confirm(res.Data.Msg, '确认注销', {
confirmButtonText: '重新登录',
// cancelButtonText: '取消',
showCancelButton: false,
showClose: false,
type: 'warning'
}).then(() => {
store.dispatch('user/resetToken').then(() => {
location.reload()
})
})
return Promise.reject(new Error(res.message || 'Error'))
} else if (res.Data.Statu_Code === '401') {
// 重新登录
MessageBox.confirm(res.Data.Msg, '提示', {
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
store.dispatch('user/resetToken').then(() => {
location.reload()
})
})
return Promise.reject(new Error(res.message || 'Error'))
} else {
Message({
message: res.Data.Msg || 'Error',
type: 'error',
duration: 2 * 1000,
offset: 100
})
return Promise.reject(new Error(res.message || 'Error'))
}
} else {
return res
}
},
error => {
console.log('err' + error) // for debug
Message({
message: error.message,
type: 'error',
duration: 2 * 1000,
offset: 100
})
return Promise.reject(error)
}
)
export default service
在实际使用中可以这样。两种post请求。
import request from '@/utils/request'
export function procedureList(data) {
const { PageIndex, PageSize, Sort, Data } = data
const dataobj = {
moduleName: 'aaaaa',
requestType: 'aaa',
tokenId: 'aaaaaa',
PageIndex: PageIndex,
PageSize: PageSize,
Sort: Sort,
Data: Data
}
const postdata = { dataobj, $_isFormData: false }
return request({
url: 'aaaaaa',
method: 'post',
data: postdata
})
}
export function deleteMenu(data) {
const { ID } = data
const form = new FormData()
form.append('ModuleName', 'aaaaa')
form.append('TokenId', 'aaaaa')
form.append('RequestType', 'aaaaaa')
form.append('ID', ID)
return request({
url: 'MENU_DELBYID/MenuDelById',
method: 'post',
data: form
})
}
这样要比之前更好处理。也更合理
扫一扫
1664
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
