axios发送数据的几种方式

axios 发送数据的几种方式

1、最简单的方式是将参数直接拼接在 URL 上，这通常用于传递少量的数据，例如资源的 ID。

const id = 12;
axios.delete(`https://api.example.com/${id}`).then(response => {console.log('Resource deleted successfully:', response.data);}).catch(error => {console.error('Error deleting resource:', error);});

springboot 后端参数的获取:

    /***  发送数据的请求的url:http://localhost:8090/building/10/3请求方式: DELETE* @param id* @return*/@DeleteMapping("/{id}")public String deleteBuilding(@PathVariable("id") int id){System.out.println("id = " + id);return "success";}

2. 使用 params 参数传递参数

axios.delete('https://api.example.com', {params:{id:12}}).then(response => {console.log('Resource deleted successfully:', response.data);}).catch(error => {console.error('Error deleting resource:', error);});
缺陷:1、参数都在url上 大小有限制2、url可以直接查看、存在不安全

springboot 后端参数获取:

    /***    发送请求的路径：  http://localhost:8090/building?id=10*        参数在url上面 键值对*     直接方法上面的参数的名称和key保持一致就可以 * @param id* @return*/@DeleteMapping()public String deleteBuilding(int id){System.out.println("id = " + id);return "success";}

3. 使用 data 参数传递请求体数据

const requestData = { id: 123, name: 'zs' };
axios.delete('https://api.example.com', { data: requestData }).then(response => {console.log('Resource deleted successfully:', response.data);}).catch(error => {console.error('Error deleting resource:', error);});

springboot 后端参数获取：

    /***    发送请求的路径：  http://localhost:8090/building*         请求体的数据: {id:1,name:"zs"}*     发送数据过来的是json格式:*         把前端json对象转成json字符串、把json字符串转成 javaBean*      获取参数的时候:*         1、创建一个javabean对象*         2、使用注解的方式 @RequestBody 进行自动转换** @param id* @return*/@DeleteMapping()public String deleteBuilding(@RequestBody User user){System.out.println("user = " + user);return "success";}