vue axios封装两种post请求方式

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

## 第一种： ##

项目本来是上传一张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: '<App/>'
    })

页面使用改造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
      })
    }

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