VueJs-如何使用axios设置动态参数

时间:2018-07-19 07:31:31

标签: post dynamic parameters vuejs2 axios

我有这样的情况

首先我从服务器获取数据,然后响应是

{
 data: {
   id: 4,
   status: A,
   items: {
     child: [
       {
         id: 28,
         product_id: 1
       },
       {
         id: 33,
         product_id: 4
       }
     ]
   }
 },
 status: 200,
 error: 0
}

在那之后,数据响应我想将数组items.child当作POST中的参数发送。 这是在POST中设置的参数格式:

item_id : data.id
item_status: data.status
item_combo_28_0: 1|0
item_combo_33_1: 4|1

item_combo是从响应数据获取的动态参数

nb:item_combo_(child.id)_index:child.product_id |索引

这是我的axios代码

getData() {
  let headers = {
    Authorization: 'Bearer ' + window.accessToken
  }
  let id = val
  axios({
    method: 'GET',
    url: BASE_API('productcombo/' + id),
    headers: headers
  })
    .then(response => {
      this.itemCombo = []
      this.dataResponse = response.data.data
      this.setItemPackage()
      this.loading = false
    })
    .catch(error => {
      this.loading = false
    })
},
setItemPackage() {
  if (this.dataResponse.items.child.length > 0) {
    this.dataResponse.items.child.map((row, idx) => {
      this.$set(row, 'item_combo_' + row.id + '_' + [idx], row.product_id + '|' + idx)
      this.itemCombo.push(row)
      console.log(this.itemCombo)
    })
  }
}

预期:如何为(item_combo_?)设置数组变量以在POST的动态参数中设置

这里是我的POST代码

sendData() {
  this.loadingPackage = true
  let headers = {
    Authorization: 'Bearer ' + window.accessToken
  }
  let data = {
    item_id: this.dataResponse.id,
    item_tatus: this.dataResponse.status,

    ======= Here my expect =========
    item_combo_27_0: 13 | 0,
    item_combo_3_1: 15 | 0
    ================================
  }
  axios({
    method: 'POST',
    url: BASE_API('openorder/additemcombo'),
    headers: headers,
    data: data
  })
    .then(response => {
      this.result = response.data
      }
      if (response.data.error) {
        this.$message({
          message: 'Error Network',
          type: 'error'
        })
      }
    })
    .catch(() => {
      this.$notify({
        message: 'Error Connections',
        type: 'warning'
      })
    })
},

1 个答案:

答案 0 :(得分:1)

我不确定我是否理解正确,但是在您的setItemPackage函数中,您已经有了将responseData转换为变量的代码。因此,您只需要在sendData函数中使用该函数,即可创建将通过axios发送的对象。

sendData() {
  this.loadingPackage = true
  let headers = {
    Authorization: 'Bearer ' + window.accessToken
  }
  let data = {
    item_id: this.dataResponse.id,
    item_tatus: this.dataResponse.status,
  }
  if (this.dataResponse.items.child.length > 0) {
    this.dataResponse.items.child.map((row, idx) => {
      data['item_combo_' + row.id + '_' + idx] = row.product_id + '|' + idx);
    })
  }
  axios({
    method: 'POST',
    url: BASE_API('openorder/additemcombo'),
    headers: headers,
    data: data
  })....