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";
    }