vue axios封装两种post请求方式

最新推荐文章于 2024-09-24 15:27:59 发布
最新推荐文章于 2024-09-24 15:27:59 发布
阅读量4.5k 收藏 10
点赞数 4
分类专栏： vue 文章标签： vue.js
原文链接：https://www.jianshu.com/p/5e7cd49abad9
版权
这篇博客介绍了在Vue.js项目中如何应对需求变化，将原本的base64文件上传改为多文件流上传。通过改造axios的请求头和实例，实现了FormData的使用，同时确保原有post请求不受影响。博主还分享了两种不同的封装请求的方法，以适应不同类型的post请求，简化了代码并提高了代码的合理性。
摘要由CSDN通过智能技术生成

第一种：

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

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

星月I随心
关注
专栏目录
vue+axios post请求
山鹰的专栏
01-07 485
vue+axios post请求 axios 全局默认配置 axios.defaults.baseURL = 'https://api.example.com'; axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; axios.defaults.headers.post['Content-Type'] = 'applicatio...
vue中axios封装请求
weixin_48115183的博客
05-11 6938
执行 GET 请求 // 向具有指定ID的用户发出请求 axios.get('/user?ID=12345') .then(function (res) { console.log(res); }) .catch(function (error) { console.log(error); }); // 也可以通过 params 对象传递参数 axios.get('/user', { params: { ID: 12345 } }) .then(fun
axios post json_Axios是什么？用在什么场景？如何使用？
weixin_39623355的博客
12-01 175
Axios是什么？Axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post请求。说到get、post，大家应该第一时间想到的就是Jquery吧，毕竟前几年Jquery比较火的时候，大家都在用他。但是由于Vue、React等框架的出现，Jquery也不是那么吃香了。也正是Vue、React等框架的出现，促使了Axios轻量级库的出现，因为Vue等，不需要操作Do...
Vue Get和Post请求封装
最新发布
qq_61632126的博客
09-24 198
本代码实现了两个异步请求函数GetAsync和PostAsync，它们都基于axios库进行网络请求。这些函数提供了与服务器交互的基本功能。
封装axios网络请求模块
wys997的博客
08-24 478
core.js import axios from "axios"; import store from '../store' const instance = axios.create({//实例化axios baseURL: 'https://www.****.com/api', headers: { //设置请求头,这里支持create创建实例时需要带的 } }); //请求来接 instance.interceptors.request.use(funct
vue使用axios对后端接口发送post请求
肖潇不写代码
12-02 1万+
后端接口 /*** * 分页条件查询 * @param current 当前页 * @param limit 每页页数 * @param projectQuery 查询条件 * @return */ @PostMapping("pageCondition/{current}/{limit}") public Result pageCondition(@PathVariable long current,
vue封装请求
m0_74265396的博客
11-09 569
当你在Vue项目中需要封装GET和POST请求时，你可以创建一个专门处理网络请求的模块。下面是一个简单的示例，演示了如何在Vue中封装GET和POST请求。首先，你需要安装axios，一个常用的处理网络请求的库。接下来，你可以在Vue组件中引入这些函数，并使用它们来发起网络请求。然后，在你的Vue项目中创建一个新的JavaScript文件，比如。，用来封装GET和POST请求的函数。
解决vue axios的封装 请求状态的错误提示问题
10-17
本文将详细讲解如何解决Vue与axios结合时，关于请求状态的错误提示问题。 首先，axios提供了拦截器（interceptors）功能，允许我们在请求发送前或响应接收后执行自定义逻辑。在Vue项目中，我们可以利用这个特性来...
vue axios请求频繁时取消上一次请求的方法
10-17
然后发送一个POST请求，并将CancelToken作为参数传递给axios，以确保当上一次请求未完成时可以取消它。如果请求被取消，错误处理函数会被触发，并能够检测到错误的类型是axios.isCancel(err)，从而知道是由于取消...
vue封装Axios的get、post请求
weixin_41897122的博客
02-27 1万+
Axios 在vue项目中用的较多，每次都要写一遍很是不方便，尤其其中的config配置项是公用的，完全可以封装一下，这样下次再用就可以直接CV了！毕竟CV大法香啊！ 封装 Axios 基础配置 创建一个request.is 文件，内容如下，我把解释性文字放在注释里了。 import axios from 'axios' export function request(config) { // 1.创建axios的实例 const instance = axios.create({
详解Vue中Axios封装API接口的思路及方法
10-14
在 Vue 中封装 Axios API 接口的主要目的是为了提高代码复用性和易维护性。以下是一个详细的封装过程： 1. **安装 Axios** 首先，需要在项目中安装 Axios。在命令行中执行 `npm install axios` 来添加 Axios 作为...
Vue为GET或POST请求设置请求头
qq_40947563的博客
04-28 2万+
安装vue-cookies 就通过我写的一个小项目的登录来讲vue-cookies，登陆成功后拿到后台返回的token值，把它保存到vue-cookies中 首先需要安装vue-cookies npm install vue-cookies --save 使用 import Vue from 'vue' import VueCookies from 'vue-cookies' Vue....
vue 封装请求（get post ...）
weixin_42178050的博客
11-12 505
https://zhuanlan.zhihu.com/p/397258337
(新手) Vue2.0 POST 请求
weixin_43854566的博客
04-03 1474
一、准备工作 使用Vue进行POTS请求首先要引入两个JS文件: <script src='../vue.js'></script>//我自己本地导入的 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> //线上的vue <s...
Vue的axios-post的使用
weixin_48462578的博客
03-20 1510
Vue的axios-post的使用 /* post方法1 */ axios({ url: '/api/joke/latest', params: { appCode: 'xxx', pagesize: 10, }, methods: 'post', }).then(res => { console.log(res); console.log("post成功") }).catch(err => { console.log(err); console.
vue中使用axios发送post请求
weixin_44432032的博客
09-13 9812
send3:function(){ // 发送post请求要进行处理，因为发送方式和正常的表单提交不一样 // axios.post(url,data,[options]); // axios默认发送数据时，数据格式是Request Payload，并非我们常用的Form Data格式， // 所以参数必须要以键值对形式传递，不能以json形式传参 // 传参方式： // 1.自己拼接为键值对 //
vue post请求的几种方式 axios
weixin_44180173的博客
02-21 8123
一、axios的post请求 方式 1.方式1拼接 send: function () { axios.post('post.php','name=alice&num=20&').then(resp=>{ console.log(resp); this.josarr=resp.data.jokes //数据赋值 ...
vue.cli项目封装全局axios，封装请求，封装公共的api和调用请求的全过程
热门推荐
JCat的博客
09-03 10万+
vue项目的前期配置 封装axios实例 封装API
Vue中axios 表单POST提交
二十一克阳光！的博客
01-24 1万+
刚开始使用Vue，里面的坑是一个接一个，今天就遇到一个axios POST传参的问题。 因为后端要求是按表单提交的形式给他数据， 我需要在请求中传递参数，然后按官方文档的格式开始操作，代码如下： axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .ca
【vue】利用axios发送请求
python全栈
09-25 1万+
保存到LocalStorage中：永久存储，只有不手动删除，永久保存到LocalStorage中。在main.js中导入index.js，作为全局对象，方便以后的开发项目中使用。保存到sessionStorage中：关闭浏览器之后，删除内容。在api/index.js中对axios对后端请求进行统一封装。请求失败时，控制台输出的对象。请求成功时，控制台输出的对象。保存登录返回的token。固定写法，复制粘贴即可。根组件App.vue。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值