vue axios封装两种post请求方式

た 入场券 2023-01-17 07:32 580阅读 0赞

第一种：

项目本来是上传一张pdf或者图片，后来需求变化需要上传多个文件，但是之前上传使用的是转换base64然后传给后端，后端再去转化。这种方式用于多文件的话由于转换base64后体积过大，会造成请求时间过长，上传时间过长等等问题。所以需要改造，上传文件需换成文件流形式，需要换成FormData形式。由于项目所有post接口之前都定义为默认请求头’application/x-www-form-urlencoded’
而FormData需要’multipart/form-data’。所以对项目封装的axios进行了改造。并且不影响之前所有的post请求。代码如下：
request.js代码：

  1. import axios from 'axios';
  2. import qs from 'qs'
  3. import cutModels from './option';
  4. // 切换域名地址。
  5. // todo: 配置全局域名访问地址
  6. // 默认可不填写，默认值为official，official打包，dev本地测试，gray正式环境
  7. window['cutModel'] = cutModels('dev');
  8. //正式
  9. axios.defaults.baseURL = cutModel.baseURL;
  11. axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
  12. // axios.defaults.headers.post['Content-Type'] = 'multipart/form-data';
  14. var instance = axios.create({
  15.   headers: {'content-type':'multipart/form-data'}
  16. });
  18. //http request 拦截器
  19. axios.interceptors.request.use((config) => {
  20.   if(config.method  === 'post'){
  21.     config.data = qs.stringify(config.data);
  22.   }
  23.   return config;
  24. },(error) =>{
  25.   return Promise.reject(error);
  26. });
  28. /**
  29.  * 封装get方法
  30.  * @param url
  31.  * @param data
  32.  * @returns {Promise}
  33.  */
  34. export function get(url,params={}){
  35.   return new Promise((resolve,reject) => {
  36.     axios.get(url,{
  37.       params:params
  38.     })
  39.     .then(response => {
  40.       resolve(response.data);
  41.     })
  42.     .catch(err => {
  43.       reject(err)
  44.     })
  45.   })
  46. }
  48.   /**
  49.  * 封装post请求
  50.  * @param url
  51.  * @param data
  52.  * @returns {Promise}
  53.  */
  55. export function post(url,data = {}){
  56.   return new Promise((resolve,reject) => {
  57.     axios.post(url,data)
  58.     .then(response => {
  59.       resolve(response.data);
  60.     },err => {
  61.       reject(err)
  62.     })
  63.   })
  64. }
  66.   /**
  67.  * 封装post请求 FormData方式
  68.  * @param url
  69.  * @param data
  70.  * @returns {Promise}
  71.  */
  73. export function postform(url,data = {}){
  74.   return new Promise((resolve,reject) => {
  75.     instance.post(url,data)
  76.     .then(response => {
  77.       resolve(response.data);
  78.     },err => {
  79.       reject(err)
  80.     })
  81.   })
  82. }

main.js代码引入

  1. import Vue from 'vue'
  2. import App from './App'
  3. import router from './router'
  4. import { get, post, postform } from './assets/js/request'
  5. import { Loading, AlertModule } from 'vux'
  7. Vue.component('loading', Loading)
  8. Vue.prototype.$get = get;
  9. Vue.prototype.$post = post;
  10. Vue.prototype.$postform = postform;
  11. Vue.config.productionTip = false
  13. //路由守卫
  14. router.beforeEach((to, from, next) => {
  15.   // next()
  16.   if(to.path == '/' || to.path == '/register') {
  17.     if(sessionStorage.getItem('userinfo')) {
  18.       AlertModule.show({
  19.         title: '提示',
  20.         content: "您已登录！"
  21.       })
  22.     } else {
  23.       next()
  24.     }
  25.   } else {
  26.     //判断是否有登录用户信息
  27.     if(sessionStorage.getItem('userinfo')) {
  28.       next()
  29.     } else {
  30.       AlertModule.show({
  31.         title: '提示',
  32.         content: "不好意思，您还未登录！"
  33.       })
  34.       next({path:"/"})
  35.     }
  36.   }
  37. });
  39. /* eslint-disable no-new */
  40. new Vue({
  41.   el: '#app',
  42.   router,
  43.   components: { App },
  44.   template: '<App/>'
  45. })

页面使用改造post方法

  1. methods: {
  2. //未改造之前的post请求方式，转换成base64
  3.   toupload() {
  4.             // console.log(this.filesarr)
  5.             // console.log(this.filenamearr)
  6.             if (!this.option) {
  7.                 AlertModule.show({
  8.                     title: '提示',
  9.                     content: '请选择类型'
  10.                 })
  11.                 return false
  12.             }
  13.             if (!this.filesarr) {
  14.                 AlertModule.show({
  15.                     title: '提示',
  16.                     content: '请上传文件'
  17.                 })
  18.                 return false
  19.             }
  20.             this.showLoading = true
  21.             let self = this
  22.             // console.log(this.filesarr)
  23.             for(let i = 0; i< this.filesarr.length; i++) {
  24.                 // 文件转换 base64 编码
  25.                 this.blobToDataURL(this.filesarr[i]).then(res => {
  26.                     self.fileUrlArr.push(res)
  27.                     // 判断遍历完后上传文件
  28.                     if(self.fileUrlArr.length == this.filesarr.length) {
  29.                         // console.log(self.fileUrlArr)
  30.                         // 上传文件
  31.                         var userlogin = {
  32.                             'ModuleName': 'UploadXCZL',
  33.                             'TokenId': window['cutModel'].TokenId,
  34.                             'RequestType': 'UploadData',
  35.                             'Data':{
  36.                                 'User_Name': self.userinfo.UserName,
  37.                                 'Dept_Code': self.userinfo.Dept_Code,       //部门编号
  38.                                 'Pcsh_Id': self.ShList.PKID,                //批次收货的编号
  39.                                 'PKID': self.continfo.PKID,                 //合同明细编号
  40.                                 'File_Type': self.option,                   //文件类型
  41.                                 'File_Name': self.filenamearr,              //文件名
  42.                                 'File_Text': self.fileUrlArr,                    //文件的base64字符串
  43.                                 'Demo': self.bztext,                        //备注
  44.                             }
  45.                         }
  46.                         self.$post('/xxxxxx', userlogin)
  47.                         .then(res => {
  48.                             self.showLoading = false
  49.                             var res = JSON.parse(res)
  50.                             // console.log(res);
  51.                             if(res.Data.Statu_Code == 200) {
  52.                                 AlertModule.show({
  53.                                     title: '提示',
  54.                                     content: res.Data.Msg,
  55.                                     onHide () {
  56.                                         self.$router.push({
  57.                                             name: "stockdetails",
  58.                                             query: {
  59.                                                 page: 0
  60.                                             }
  61.                                         });
  62.                                     }
  63.                                 })
  64.                             } else if(res.Data.Statu_Code == 100) {
  65.                                 AlertModule.show({
  66.                                     title: '提示',
  67.                                     content: res.Data.Msg,
  68.                                     onHide () {
  69.                                         sessionStorage.clear()
  70.                                         self.$router.push('/')
  71.                                     }
  72.                                 })
  73.                             } else {
  74.                                 AlertModule.show({
  75.                                     title: '不好意思',
  76.                                     content: res.Data.Msg
  77.                                 })
  78.                             }
  79.                         })
  80.                         .catch(e => {
  81.                             self.showLoading = false
  82.                             AlertModule.show({
  83.                                 title: '不好意思',
  84.                                 content: '服务器繁忙'
  85.                             })
  86.                         });
  87.                     }
  88.                 })
  89.             }
  90.         },
  91. //改造之后的post请求方式
  92.   loadto() {
  93.             this.showLoading = true
  94.             let self = this
  95.             let form = new FormData();
  96.             form.append("ModuleName",'UploadXCZL');
  97.             form.append("TokenId",window['cutModel'].TokenId);
  98.             form.append("RequestType",'UploadData');
  99.             form.append("Data['User_Name']",this.userinfo.UserName);
  100.             form.append("Data['Dept_Code']",this.userinfo.Dept_Code);
  101.             form.append("Data['Pcsh_Id']",this.ShList.PKID);
  102.             form.append("Data['PKID']",this.continfo.PKID);
  103.             form.append("Data['File_Type']",this.option);
  104.             form.append("Data['File_Name']",this.filenamearr);
  105.             form.append("Data['Demo']",this.bztext);
  106.             this.filesarr.forEach(function (file) {
  107.                 form.append("Data['File_Text']", file);
  108.             })
  109.             for (var [a, b] of form.entries()) {
  110.                 console.log(a, b);
  111.             } 
  112.             this.$postform('/xxxxxxxx', form)
  113.             .then(res => {
  114.                 this.showLoading = false
  115.                 var res = JSON.parse(res)
  116.                 console.log(res);
  117.                 if(res.Data.Statu_Code == 200) {
  118.                     AlertModule.show({
  119.                         title: '提示',
  120.                         content: res.Data.Msg,
  121.                         onHide () {
  122.                             this.$router.push({
  123.                                 name: "stockdetails",
  124.                                 query: {
  125.                                     page: 0
  126.                                 }
  127.                             });
  128.                         }
  129.                     })
  130.                 } else if(res.Data.Statu_Code == 100) {
  131.                     AlertModule.show({
  132.                         title: '提示',
  133.                         content: res.Data.Msg,
  134.                         onHide () {
  135.                             sessionStorage.clear()
  136.                             self.$router.push('/')
  137.                         }
  138.                     })
  139.                 } else {
  140.                     AlertModule.show({
  141.                         title: '不好意思',
  142.                         content: res.Data.Msg
  143.                     })
  144.                 }
  145.             })
  146.             .catch(e => {
  147.                 this.showLoading = false
  148.                 AlertModule.show({
  149.                     title: '不好意思',
  150.                     content: '服务器繁忙'
  151.                 })
  152.             });
  153.         }
  154. }

由于这个多文件是后面改的需求，如果整体项目换post请求，后端需要把所有接口改一遍，为了节省时间所以使用了这种方式，如果还有其他方式，欢迎大家留言交流

第二种：

后记，在看了一些大神得处理后，自己有重新封装了一下这个请求。以前得那种封装总觉得不是很合理。下面只是做了统一得封装，不需要在去新实例化一个axios，效果还是不错得。看代码吧。

  1. import axios from 'axios'
  2. import { MessageBox, Message } from 'element-ui'
  3. import store from '@/store'
  4. import { getToken } from '@/utils/auth'
  6. // 创建一个AXIOS实例
  7. const service = axios.create({
  8.   // baseURL: process.env.VUE_APP_BASE_API // url = base url + request url
  9.   // baseURL: 'xxxx' // 线上地址
  10.   // baseURL: 'xxxx' // 本地测试地址
  11.   baseURL: 'http://xxxxx' // 本地测试地址
  12.   // withCredentials: true, // send cookies when cross-domain requests
  13.   // timeout: 10000 // 请求超时
  14. })
  16. // 请求拦截器
  17. service.interceptors.request.use(
  18.   config => {
  19.     // 在发出请求前做点什么
  20.     if (store.getters.token) {
  21.       // 让每个请求携带令牌
  22.       // “X-Token”是自定义头密钥
  23.       // 请根据当前情况修改
  24.       config.headers['X-Token'] = getToken()
  25.     }
  26.     // 这里做了统一处理，多加了$_isFormData去判断是什么样得post请求
  27.     if (config.data && config.data.$_isFormData === false) {
  28.       config.headers['Content-Type'] = 'application/json'
  29.       // console.log(JSON.stringify(config.data.dataobj))
  30.       config.data = config.data.dataobj
  31.     } else {
  32.       config.headers['Content-Type'] = 'multipart/form-data'
  33.     }
  34.     // console.log(config)
  35.     return config
  36.   },
  37.   error => {
  38.     // 处理请求错误
  39.     console.log(error) // 用于调试
  40.     return Promise.reject(error)
  41.   }
  42. )
  44. // 响应拦截器
  45. service.interceptors.response.use(
  46.   response => {
  47.     let res
  48.     if (typeof (response.data) === 'string') {
  49.       res = JSON.parse(response.data)
  50.     } else if (typeof (response.data) === 'object') {
  51.       res = response.data
  52.     }
  53.     if (res.Data.Statu_Code !== '200') {
  54.       // 403:令牌过期；
  55.       if (res.Data.Statu_Code === '403') {
  56.         // 重新登录
  57.         MessageBox.confirm(res.Data.Msg, '确认注销', {
  58.           confirmButtonText: '重新登录',
  59.           // cancelButtonText: '取消',
  60.           showCancelButton: false,
  61.           showClose: false,
  62.           type: 'warning'
  63.         }).then(() => {
  64.           store.dispatch('user/resetToken').then(() => {
  65.             location.reload()
  66.           })
  67.         })
  68.         return Promise.reject(new Error(res.message || 'Error'))
  69.       } else if (res.Data.Statu_Code === '401') {
  70.         // 重新登录
  71.         MessageBox.confirm(res.Data.Msg, '提示', {
  72.           confirmButtonText: '重新登录',
  73.           cancelButtonText: '取消',
  74.           type: 'warning'
  75.         }).then(() => {
  76.           store.dispatch('user/resetToken').then(() => {
  77.             location.reload()
  78.           })
  79.         })
  80.         return Promise.reject(new Error(res.message || 'Error'))
  81.       } else {
  82.         Message({
  83.           message: res.Data.Msg || 'Error',
  84.           type: 'error',
  85.           duration: 2 * 1000,
  86.           offset: 100
  87.         })
  88.         return Promise.reject(new Error(res.message || 'Error'))
  89.       }
  90.     } else {
  91.       return res
  92.     }
  93.   },
  94.   error => {
  95.     console.log('err' + error) // for debug
  96.     Message({
  97.       message: error.message,
  98.       type: 'error',
  99.       duration: 2 * 1000,
  100.       offset: 100
  101.     })
  102.     return Promise.reject(error)
  103.   }
  104. )
  106. export default service

在实际使用中可以这样。两种post请求。

  1. import request from '@/utils/request'
  3. export function procedureList(data) {
  4.   const { PageIndex, PageSize, Sort, Data } = data
  5.   const dataobj = {
  6.     moduleName: 'aaaaa',
  7.     requestType: 'aaa',
  8.     tokenId: 'aaaaaa',
  9.     PageIndex: PageIndex,
  10.     PageSize: PageSize,
  11.     Sort: Sort,
  12.     Data: Data
  13.   }
  14.   const postdata = { dataobj, $_isFormData: false }
  15.   return request({
  16.     url: 'aaaaaa',
  17.     method: 'post',
  18.     data: postdata
  19.   })
  20. }
  22. export function deleteMenu(data) {
  23.   const { ID } = data
  24.   const form = new FormData()
  25.   form.append('ModuleName', 'aaaaa')
  26.   form.append('TokenId', 'aaaaa')
  27.   form.append('RequestType', 'aaaaaa')
  28.   form.append('ID', ID)
  29.   return request({
  30.     url: 'MENU_DELBYID/MenuDelById',
  31.     method: 'post',
  32.     data: form
  33.   })
  34. }

这样要比之前更好处理。也更合理

发表评论

表情：
评论列表 （有 0 条评论，580人围观）

还没有评论，来说两句吧...

相关阅读

    相关 vue-封装axios请求

    最近接手新的vue项目，发现axios竟然没有封装，立马动手封装，这里记录一下完整的封装过程，废话不说，直接上代码 baseConfig.js文件 //存放各个服

    超、凢脫俗超、凢脫俗/ 0 赞/ 112 阅读