vue中axios的参数位置整理

最新推荐文章于 2026-05-20 09:56:31 发布

原创最新推荐文章于 2026-05-20 09:56:31 发布 · 2.9k 阅读

10 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端

本文详细讲解了Vue2和Vue3中axios的接口请求头区别，GET、POST请求参数处理技巧，包括路径、查询和body，以及特殊情况下如文件上传的FormData用法。通过实例帮助开发者解决前后端联调中参数问题。

每次在进行前后端联调的时候，总是因为参数放不对而影响进度，我人都麻了，真的记不住，还是整理一下以便后续开发

一、vue2和vue3的接口请求头

// vue 2
const res = await this.$axios.get(``,{})

// vue 3
const { proxy } = getCurrentInstance()
const res = await proxy.$axios.get(``,{})

主要区别就是this不能用了

二、不同请求类型

我目前所接触到的就是GET, POST, PUT, DELETE, 其中get,post最多，其他的以后再增加，

GET请求

一般用于从后端获取数据，参数位置一般为path或query

const { proxy } = getCurrentInstance()

const onLogin = () => {
    const iccid = '11111'
    try{
        const res = await proxy.$axios.get(`/userInfo/${iccid}`)
    }catch(e){
     proxy.$message.error(e.message)
    }
}

如果传参位置在路径里面，就直接写在路径里

对于放在query的参数，需要在路径后面，用params传递

const { proxy } = getCurrentInstance()

const onLogin = () => {
    const userId= 1
    try{
        const res = await proxy.$axios.get(`/userInfo`,{
            params:{
                userId            
            }
        }
        )
    }catch(e){
     proxy.$message.error(e.message)
    }
}

POST请求

传参一般有path，query，body三种形式，path跟get一致,

之前query传参写错了，与get不同，要放在第三个括号里，并且要用params包裹起来

const { proxy } = getCurrentInstance()

const onLogin = () => {
    const endTime = '2021/12/6'
    const iccid = '1111111'
    try{
        const res = await proxy.$axios.post(`/userInfo`,{},
        {
            params:{
                endTime,
                iccid            
            }
        })
    }catch(e){
     proxy.$message.error(e.message)
    }
}

query同样也是放进param里面

const { proxy } = getCurrentInstance()

const onLogin = () => {
    const name = '糯米w'
    const phone = '1111111'
    try{
        const res = await proxy.$axios.post(`agents`, {
              name,
              phone,
            })
        )
    }catch(e){
     proxy.$message.error(e.message)
    }
}

如果参数是放在body里面，就不需要params，而是直接放参数就好

三、特殊处理的接口

上面提到的都是封装好的接口，有时候必须要使用原装接口，最常用的就是图片，文件的传输

这是一个文件传输的接口，因此出现了formData这种数据格式

 var Data = new FormData()
 Data.append('file', cardMessage.uploadMsg)
const res = await proxy.$axios({
              url: `Transfer`,
              method: 'POST',
              data: Data,
              headers: {
                'Content-Type': 'multipart/form-data',
              },
              params: {
                type: 'BACK',
              }
            })

对于数据必须用FormData处理，是为了将数据编译成键值对