如何封装axios form-data针对统一的formData入参方式

 更新时间:2023年05月24日 09:01:26   作者:F-Fanger  
这篇文章主要介绍了如何封装axios form-data针对统一的formData入参方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

封装axios form-data 针对统一的formData入参

1. 在axios中,设置请求头的content-type

config.headers.post['Content-Type'] = 'multipart/form-data'

2. 封装请求

//* 封装post请求
export function post(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios({ url, method: 'post', data }).then(
      response => {
        resolve(response.data)
      },
      err => {
        reject(err)
      }
    )
  })
}
//* post2.0请求,针对统一的formData入参方式
export function myRequest(url, data = {}) {
  let formData = new FormData()
  for (let key in data) {
    if (data.hasOwnProperty(key)) {
      let ele = data[key]
      formData.append(key, ele)
    }
  }
  return post(url, formData)
}

3. 在main.js中 引入并挂载到prototype上就可以在全局中用this调用了

    import {  post, myRequest } from './router/axios'
    Vue.prototype.$myRequest = myRequest
    Vue.prototype.$request = request

在组件中的调用例子

        async delHouse(id) {
          const confirmResult = await this.$confirm(
            '此操作将永久删除该条信息, 是否继续?',
            '提示',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }
          ).catch(err => err)
          if (confirmResult !== 'confirm') {
            return this.$message.info('取消删除')
          }
          // this.$api.delSource 是接口api  { id } 是传的参数  如果你需要传数组的话需要用JSON.stringify() 如:{JSON: JSON.stringify(arr) }
          const { message } = await this.$myRequest(this.$api.delSource, { id })
          this.$message({
            message,
            type: 'success'
          })
          this.getList()
        }

说一下怎么在vuex中写请求,直接引入请求然后直接用就行了

import { myRequest } from '../.././router/axios'
actions: {
    async getVillageList(context, payload) {
      const {
        data: { village }
      } = await myRequest(payload)
      context.commit('setVillageList', village)
    }
}

解读axios的form Data的传参方式

form Data的传参方式

axios默认的请求

headers:{Content-type:‘application/json;charset=UTF-8'}

如果想要以form Data的形式传递参数,只要修改

{headers:{‘Content-Type':‘application/x-www-form-urlencoded'}}
axios.post(url,{name:'zhang',age:'15'},
{headers:{'Content-Type':'Content-Type':'application/x-www-form-urlencoded;charset=utf-8'}})

但是,改完以后发送请求,后端怎么都接收不到传过去的参数。我们打开浏览器的调试工具,可以发现这里的form Data形式的参数是将我们想要传的参数整个当成是一个key,其对应的value也是空的。

要想转化成正确的键值对形式的格式也很简单。只要用到qs库就行了,这个是axios中已经包含了的,不需要再下载相应的包了。一定要注意键值形式的转变

使用方法

import qs from 'qs';
axios.post(url,qs .stringify({jobNumber: '430525', password: '123'}), 
{headers: {'Content-Type':'application/x-www-form-urlencoded;charset=utf-8'}});

修改后在请求接口,上传的参数就如下图,

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue项目中使用mock.js的完整步骤

    Vue项目中使用mock.js的完整步骤

    这篇文章主要给大家介绍了关于在Vue项目中使用mock.js的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • 详解vue-cli 本地开发mock数据使用方法

    详解vue-cli 本地开发mock数据使用方法

    这篇文章主要介绍了详解vue-cli 本地开发mock数据使用方法,如果后端接口尚未开发完成,前端开发一般使用mock数据。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • Element Cascader 级联选择器的使用示例

    Element Cascader 级联选择器的使用示例

    这篇文章主要介绍了Element Cascader 级联选择器的使用示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • vue中Axios的封装与API接口的管理详解

    vue中Axios的封装与API接口的管理详解

    这篇文章主要给大家介绍了关于vue中Axios的封装与API接口的管理的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-08-08
  • 详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题

    详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题

    这篇文章主要介绍了详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • vue.js实现照片放大功能

    vue.js实现照片放大功能

    这篇文章主要为大家详细介绍了vue.js实现照片放大功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • vue mounted 调用两次的完美解决办法

    vue mounted 调用两次的完美解决办法

    在开发中发现其中一个页面moutned调用了两次,而其他页面正常,表示很懵逼,然后查找原因,终于找到了,其实归根到底是要知道mounted的调用机制问题。这篇文章主要介绍了vue mounted 调用两次的解决办法,需要的朋友可以参考下
    2018-10-10
  • vuex 动态注册方法 registerModule的实现

    vuex 动态注册方法 registerModule的实现

    这篇文章主要介绍了vuex 动态注册方法 registerModule的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • 解决Vue不能检测数组或对象变动的问题

    解决Vue不能检测数组或对象变动的问题

    下面小编就为大家分享一篇解决Vue不能检测数组或对象变动的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • 浅谈Vue3 defineComponent有什么作用

    浅谈Vue3 defineComponent有什么作用

    本文主要介绍了Vue3 defineComponent作用,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08

最新评论