如何封装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'}});

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

总结

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

相关文章

  • Element修改弹窗类组件的层级的实现

    Element修改弹窗类组件的层级的实现

    本文主要介绍了Element修改弹窗类组件的层级的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Vue3.0动态路由No match found for location with path警告解决办法

    Vue3.0动态路由No match found for location with path警告解决办法

    这篇文章主要介绍了Vue3.0动态路由No match found for location with path警告的解决办法,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-01-01
  • vue项目初始化过程中错误总结

    vue项目初始化过程中错误总结

    在Vue.js项目初始化和构建过程中,可能会遇到多种问题,首先,npm install过程中报错,如提示“No such file or directory”,建议删除package-lock.json文件后重新安装,在build或run时,若出现core-js相关错误
    2024-09-09
  • vue+uniapp瀑布流布局多种实现方式示例代码

    vue+uniapp瀑布流布局多种实现方式示例代码

    由于使用uniapp开发的微信小程序不需要考虑响应式,因此瀑布流的实现相对于pc端更为简单,下面这篇文章主要给大家介绍了关于vue+uniapp瀑布流布局多种实现方式的相关资料,需要的朋友可以参考下
    2023-03-03
  • Vue与Axios的传参方式实例详解

    Vue与Axios的传参方式实例详解

    现在vue项目基本上都是使用axios进行请求操作,下面这篇文章主要给大家介绍了关于Vue与Axios的传参方式的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • vue3的ref、isRef、toRef、toRefs、toRaw详细介绍

    vue3的ref、isRef、toRef、toRefs、toRaw详细介绍

    本文详细讲解了vue3的ref、isRef、toRef、toRefs、toRaw,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-09-09
  • Vue3+Spring Framework框架开发实战

    Vue3+Spring Framework框架开发实战

    这篇文章主要为大家介绍了Vue3+Spring Framework框架开发实战详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • Vue实现侧边导航栏于Tab页关联的示例代码

    Vue实现侧边导航栏于Tab页关联的示例代码

    本文主要介绍了Vue实现侧边导航栏于Tab页关联的示例代码,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • vue实现抽奖效果Demo

    vue实现抽奖效果Demo

    这篇文章主要介绍了vue实现抽奖效果Demo,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • Vue之Axios的异步请求问题详解

    Vue之Axios的异步请求问题详解

    总的来说这并不是一道难题,那为什么要拿出这道题介绍?拿出这道题真正想要传达的是解题的思路,以及不断优化探寻最优解的过程。希望通过这道题能给你带来一种解题优化的思路,Axios是一个开源的可以用在浏览器端和Node JS的异步通信框架,主要作用就是实现AJAX异步通信
    2023-02-02

最新评论