vue axios封裝兩種post請求方式

更行了新得封裝，可以看下下面得第二種。。。。。

第一種：

項目本來是上傳一張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
  })
}

這樣要比之前更好處理。也更合理

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
    沈念sama閱讀 230,563評論 6贊 544
  • 死咒
    序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
    沈念sama閱讀 99,694評論 3贊 429
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
    開封第一講書人閱讀 178,672評論 0贊 383
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長。 經常有香客問我，道長，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 63,965評論 1贊 318
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
    茶點故事閱讀 72,690評論 6贊 413
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上，一...
    開封第一講書人閱讀 56,019評論 1贊 329
  • 城市分裂傳說
    那天，我揣著相機與錄音，去河邊找鬼。 笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。 我是一名探鬼主播，決...
    沈念sama閱讀 44,013評論 3贊 449
  • 雙鴛鴦連環套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
    開封第一講書人閱讀 43,188評論 0贊 290
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
    沈念sama閱讀 49,718評論 1贊 336
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,438評論 3贊 360
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,667評論 1贊 374
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
    沈念sama閱讀 39,149評論 5贊 365
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
    茶點故事閱讀 44,845評論 3贊 351
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,252評論 0贊 28
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,590評論 1贊 295
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。 一個月前我還...
    沈念sama閱讀 52,384評論 3贊 400
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 48,635評論 2贊 380