前端使用axios傳遞數組后端使用List接收

時間: 2020年08月18日

問題

在做項目時遇到一個問題, 前端用axios傳遞id數組給后端, 請求方法是delete, 后端采用@RequestBody來接受List 然后捕捉到異常 Required request body is missing: 意味着后端未能成功接收到參數, 這其中踩了許多坑

1. @DeleteMapping可以使用@RequestBody接收參數

2. 如果不是傳遞字符串, 不要使用JOSN.stringify()把對象轉換成字符串格式再傳參

3. qs.stringify()是針對Get方法傳參, 將對象轉換成一個url, 有大小限制

解決

采用Delete請求方法, Post也是一樣的

Get需要使用qs.stringify()進行參數的轉換, 這里不涉及

直接上正確的傳參方法

// api
/**
 * 禁用User
 * @param userIds
 * @returns {Promise} Promise
 * @constructor
 */
export function deleteDisableUserInBulk(userIds) {
  return request({
    url: '/user/disable-in-bulk',
    method: 'delete',
    data: userIds
  })
}

// 方法調用api
// 不能傳入{userIds:array}這個對象, 直接傳入array即可
// 不能使用JSON.stringify(array), 如果使用會導致后端無法解析
test() {
  const array = [36, 37, 39]
  deleteDisableUserInBulk(array).then(response => {
    // 返回受影響行數
    console.log('受影響行數', response.data.rows)
  })
}

// 后端controller
@ApiOperation(value = "根據用戶id刪除用戶", notes = "邏輯刪除, 置enabled為false")
@DeleteMapping("/disable-in-bulk")
public Dict disableInBulk(@RequestBody @ApiParam(value = "用戶id集合", required = true) List<Long> userIds) {
    int rows = this.userService.disableInBulk(userIds);
    Dict data = Dict.create().set("rows", rows);
    return Result.success(data);
}

測試

---

圖1 后端正確拿到參數

---

圖2 前端返回正確結果

---

測試證明這是正確的傳參方式