Vue项目中，关于Axios使用的总结

用户9914333

发布于 2022-07-22 14:29:02

5620

发布于 2022-07-22 14:29:02

文章被收录于专栏：bug收集

Vue项目中，遇到了很多关于 axios 传参的问题。

今天做了一个总结，一共6点. 请向下文

1、POST 传参收不到数据

需要对参数进行转换，转换成字符串格式

推荐使用qs模块

步骤1：npm install qs --save-dev // 安装qs模块步骤2：import qs from 'qs' 步骤3：使用qs

代码如下：

let postData=qs.stringify({
          size:6,
          current:1
        })
this.$axios.post('/api/studentlist.do',postData).then().catch()

2、修改请求头(request header)

有时，需要将请求头设置为： Content-Type: 'application/json'

this.$axios.post('/api/user/login',
  JSON.stringify({
    jobNumber: 'GL001',
    password: '123'
  }),
  {
    headers: {
      'Content-Type': 'application/json',
      auth: '123'
    }
  }).then((res) => {
  console.log(res)
})

3、如何传formData数据

如果有文件,请使用FormData的形式传递数据，且设置: Content-Type: 'multipart/form-data'

//    1、首先定义一个formData对象
    var fd = new FormData()
    //    2、将需要传的参数append到formData对象中
    fd.append('startTime', '2020-01')
    fd.append('endTime', '2020-06')
    //    3、向后台直接传定义的formData对象fd
    this.$axios.post('/api/all/order/money', fd,
    {
      headers: {
        //     4、如有文件，请将请求头改为multipart/form-data
        'Content-Type': 'multipart/form-data'
      }
    }).then((response) => {
      console.log(response.data.data)
      }
    })

4、POST传参有两种 Params 与Data 两种形式

params是添加到url的请求字符串中的，一般用于get请求。

data是添加到请求体（body）中的，一般用于post请求。

上面，只是一般情况. 其实，post请求也可以使用params方式传值，但是get请求没有data方式

第一种：data 传参

this.$axios({
   url: '/api/user/login' ,
   method: 'post',
   headers: {
      'Content-Type': 'application/json'
   },
   data:{
      username: this.user,
      pwd: this.pwd
   }
}).then((res) => {
  console.log(res)
})

下面的方式，也属于 data 方式传参

  this.$axios.post('/api/all/order/list', qs.stringify({
          currentPage:1,
          pageSize:10
      })
  });

第二种：params传参

this.$axios({
   url: '/api/user/login' ,
   method: 'post',
   headers: {
      'Content-Type': 'application/json'
   },
   params:{
      username: this.user,
      pwd: this.pwd
   }
}).then((res) => {
  console.log(res)
})

注：可以同时使用两种方式传参

5、如果只传一个值，不要键只要值

不写成对象，直接写值就好。

this.$axios.post('/api/chuli/deleteByIds',this.ids,
  {
    headers: {
      'Content-Type': 'application/json'
    }
  }).then((res) => {
  console.log(res)
})

6、传递数组

情况一：简单数组

方案：使用qs.stringify() 方法，进行转换，根据你想到的形式，设置arrayFormat的值 .

1、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' })
// 输出结果：'a[0]=b&a[1]=c'
2、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' })
// 输出结果：'a[]=b&a[]=c'
3、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' })
// 输出结果：'a=b&a=c'
4、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'comma' })
// 输出结果：'a=b,c'

问题二：数组中存储的是对象

数组中的元素是对象，传递过去的JSON格式如下：