美文网首页vue
vue axios封装两种post请求方式

vue axios封装两种post请求方式

作者: 华子_tm | 来源:发表于2019-08-19 11:12 被阅读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请求,后端需要把所有接口改一遍,为了节省时间所以使用了这种方式,如果还有其他方式,欢迎大家留言交流

相关文章

网友评论

    本文标题:vue axios封装两种post请求方式

    本文链接:https://www.haomeiwen.com/subject/kvqssctx.html