前端常用的4种请求方式实例总结-牛翰网

一、GET请求

GET 请求用于向指定资源发出请求，请求中包含了资源的 URL 和请求参数。服务器端通过解析请求参数来返回相应的资源，不会修改服务器端的状态。

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请求参数传递不能是data，而应该是params。

如果把后端接收参数方式改为@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 请求方式提交的数据会被包含在请求体中，而不像 GET 请求方式那样包含在 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注解进行标识。