前端开发中GET、POST、PUT、DELETE四种请求方式的实战解析

一、GET请求

GET 请求主要用于向服务器指定资源发起查询，请求内容包含目标资源的 URL 地址及必要的查询参数。服务器端解析这些参数后返回对应资源，且 GET 请求不会改变服务器端的任何状态。

1.1 使用方式

由于 GET 请求的数据直接拼接在 URL 中，因此容易被浏览器缓存或保存历史记录。然而，正因为参数可见，它不适合用于传输敏感信息。

第一种情形：

前端发起 GET 请求，并通过 data 方式传递参数。

export function empList(query){
  return request({
    url:'/emps/list',
    method:'get',
    data:query
  })
}

后端使用 @GetMapping 注解，且不使用 @RequestBody 接收参数。

@GetMapping("/list")
public Result listEmp(Emp emp){
       List<Emp> emps = empService.listEmp(emp);
       return Result.success(emps);
}

这种配置下，后端实际上无法接收到前端传递的参数。原因在于 GET 请求的参数应通过 params 传递，而非 data。

若后端将接收方式改为 @RequestBody，而前端保持不动，请求将返回 400 错误。后端会报错提示缺少必需的请求体（例如 Emp 参数），因为前端并未通过请求体发送数据。

[org.springframework.http.converter.HttpMessageNotReadableException: Required request body is missing: public cn.cjc.pojo.Result cn.cjc.controller.EmpController.list(cn.cjc.pojo.Emp)

结论：在数据查询场景（如数据库查询）中，使用 GET 请求时，应通过 params 方式传递参数，或使用 URL 占位符。避免在查询操作中使用 POST 方法。

第二种情形：

前端发起 GET 请求，不使用 data 方式传递参数。

export function selectById(id) {
  return request({
    url: '/emps/'+id,
    method: 'get',
  })
}

后端使用 @GetMapping 注解，并通过 @PathVariable 接收参数。

@GetMapping("/{id}")
public Result getById(@PathVariable Integer id){
       log.info("根据ID查询员工信息, id: {}",id);
       Emp emp = empService.getById(id);
       return Result.success(emp);
}

结论：前端发起 GET 请求时，若传递的是对象，后端无需使用 @RequestBody 转换 JSON 串；若传递的是具体值或参数，后端必须使用 @PathVariable 接收。

1.2 优缺点

GET 请求的优点包括：

• 支持浏览器缓存和历史记录保存。
• 对服务器性能影响较小。

GET 请求的缺点包括：

• 不适合提交敏感数据，因为参数会暴露在 URL 中。
• 仅适用于资源查询，无法修改服务器端状态。

1.3 应用场景

• 获取资源信息。
• 对资源进行查询操作。

二、POST请求

POST 请求用于向指定资源提交数据，通常会导致服务器端状态发生变化。例如，在 Web 表单中填写信息并提交时，使用 POST 请求将表单数据发送至服务器存储。

POST 请求的数据包含在请求体中，而非 URL 中。因此，POST 请求可以提交比 GET 更大的数据量，且相对更安全。

2.1 使用方式

第一种情况：前端发送 POST 请求，使用 data 方式传递参数，且传递的是一个对象。

//POST请求，且传递的是一个对象
export function add(emp) {
  return request({
    url: '/emps',
    method: 'post',
    data: emp
  })
}

后端使用 @PostMapping 注解，并使用 @RequestBody 接收参数。

@PostMapping
public Result add(@RequestBody Emp emp){
       empService.add(emp);
       return Result.success();
}

结论：POST 请求通常用于新增或登录操作，传递对象（JSON 串）时，后端必须使用 @RequestBody 注解标识，前端使用 data 方式传递参数。

第二种情况：

前端发送 POST 请求，使用 params 方式传递参数，传递的不是一个对象，而是一组参数，例如登录操作。

export function login(username, password) {
    return request({
        url: '/login',
        method: 'post',
        params: {
            username: username,
            password: password
        }
    })
}

后端使用 @PostMapping 注解，不使用 @RequestBody。

    @PostMapping("/login")
    public Map doLogin(String username, String password) {
        User user = userService.selUserByName(username);
        Map map = new HashMap();
        if (Objects.isNull(user)) {
            map.put("result", "no");
        } else {
            if (Objects.equals(user.getPassword(), password)) {
                map.put("code", 200);
                map.put("result", "登录成功");
                //模拟登录
                System.out.println("登录成功");
                log.info("登录成功");
            } else {
                System.out.println("登录失败");

                map.put("result", "no");
            }
        }

        return map;
    }

结论：POST 请求用于新增或登录操作，当传递一组参数时，后端接收时不使用 @RequestBody 注解标识，前端使用 params 方式传递参数。

2.2 优缺点

POST 请求的优点包括：

• 可以提交比 GET 更大的数据量。
• 相对更安全，因为请求参数不包含在 URL 中。

POST 请求的缺点包括：

• 对服务器性能影响较大。
• 不适用于对同一资源进行多次操作。

2.3 应用场景

• 向服务器提交表单数据。
• 向服务器上传文件。
• 创建资源或提交数据到服务器。

三、PUT请求

PUT 请求用于向服务器更新指定资源，可理解为对服务器上的资源进行修改操作。使用 PUT 请求会覆盖原有资源内容，因此需谨慎使用。

3.1 使用方式

前端发送 PUT 请求，使用 data 方式传递参数。

export function update(emp) {
  return request({
    url: '/emps',
    method: 'put',
    data: emp
  })
}

后端使用 @PutMapping 注解，并使用 @RequestBody 接收参数。

@PutMapping
public Result update(@RequestBody Emp emp){
       empService.update(emp);
       return Result.success();
}

如果前端使用 data 传递参数，而后端不使用 @RequestBody 注解接收参数，则后端无法接收到前端传递的参数（对象为 null）。

如果前端使用 params 传递参数，后端使用 @RequestBody 注解接收参数，则会报请求体缺失异常（请求体中需要 Emp 参数，但是没有）。

如果前端使用 params 传递参数，后端不使用 @RequestBody 注解接收参数，是可以接收到前端传递过来的参数（对象为 null）。

虽然可以使用 POST 代替 PUT，但同样不建议这样使用。

结论：前端发起 PUT 请求时，若传递为对象（JSON 串），后端必须用 @RequestBody 注解标识；若传递参数为具体值，后端接收时不需要任何注解标识。

3.2 优缺点

PUT 请求的优点包括：

• 可以更新指定的资源。

PUT 请求的缺点包括：

• 对服务器性能影响较大。
• 不适用于对同一资源进行多次操作。

3.３ 应用场景

• 更新指定的资源。
• 按照条件更新一组资源。

四、DELETE请求

DELETE 请求用于请求服务器删除指定的资源，可理解为对服务器上的资源进行删除操作。使用 DELETE 方式请求会导致指定的资源被永久删除，因此需谨慎使用。

4.1 使用方式

前端使用 DELETE 请求方式，传输单个参数，URL 中设置占位符参数。

//传输单个参数
export function deleteById(id) {
  return request({
    url: '/depts/' + id,
    method: 'delete'
  })
}

后端使用 @DeleteMapping 注解，@PathVariable 获取 URL 参数。

   @GetMapping("/{id}")
    public Region findRegion(@PathVariable Integer id) {
        return regionService.selectById(id);
    }

如果前端使用 params 传递参数，后端使用 @RequestParam，则前端报 400（请求失败），后端报缺少需要的参数错误；前端使用 data 传递参数，后端使用 @RequestParam 仍然不行，报相同的错误。使用 POST 请求也可以完成 DELETE 的操作，但是不支持这样做。结论：前端发起 DELETE 请求时，传递的是一个具体的值或参数，后端接收参数必须用 @PathVariable 注解进行标识。

4.2 优缺点

DELETE 请求的优点包括：

• 可以永久删除指定的资源。

DELETE 请求的缺点包括：

• 对服务器性能影响较大。
• 不适用于对同一资源进行多次操作。

4.3 应用场景

• 删除指定的资源。
• 按照条件删除一组资源。

五.总结

主要针对于 GET 和 POST 请求：

• GET 拼接 URL，POST 传递 body，GET 限制字符串长度。

• 请求缓存：GET 会被缓存，而 POST 不会，原因是 GET 是 URL 的请求。

• 收藏书签：GET 可以，而 POST 不能，原因是 URL 可以收藏。

• 保留浏览器历史记录：GET 可以，而 POST 不能，原因是 GET 的 URL 请求。

• 用处：GET 常用于取回数据，POST 用于提交数据。

• 安全性：POST 比 GET 安全，是因为 POST 是请求体，不会在 URL 上被劫持！

• 请求参数：querystring 是 URL 的一部分，GET、POST 都可以带上。

• GET 的 querystring 仅支持 urlencode 编码，POST 的参数是放在 body（支持多种编码）。

• 请求参数长度限制：GET 请求限制字符串长度，POST 请求不限制字符串长度。

总结

到此这篇关于前端常用的 4 种请求方式的文章就介绍到这了，更多相关前端常用请求方式内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！