axios中delete传参的两种方式及对应的接收方式

一 、axios自动拼接到url后

        1 前端 多参数 （请求参数）

axios.delete('/api/delete', {
  params: {
    id: id,
    name: name
  }
})
.then(res=> {
  代码逻辑
})
.catch(error => {
  console.error('Error:', error);
});

后端

@RestController
public class MyController {

    @DeleteMapping("/api/delete")
    public ResponseEntity<String> deleteById(@RequestParam Integer id,
            @RequestParam String name) {
        
    }
}

2 路径传参

axios.delete(`/api/delete/${id}/${name}`)
  .then(res => {
    // 代码逻辑
  })
  .catch(error => {
    console.error('Error:', error);
  });

后端接收

import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/api")
public class MyController {

    @DeleteMapping("/delete/{id}/{name}")
    public ResponseEntity<String> deleteById(
            @PathVariable Integer id,
            @PathVariable String name) {
        
        // 处理删除逻辑
        return ResponseEntity.ok("删除成功");
    }
}

二、在请求体中传参

1 前端

 const axios = require('axios');

// 发送带有请求体参数的 DELETE 请求
const data = {
  id: 123
};

axios.delete('/api/resource', {
  data: data
})
.then(response => {
  console.log('Response:', response.data);
})
.catch(error => {
  console.error('Error:', error);
});
    

2 后端

@RestController
public class MyController {

    @DeleteMapping("/api/resource")
    public ResponseEntity<String> deleteResource(@RequestBody Object object) {
        
    }
}