SoFunction
Updated on 2025-04-14

Summary of 4 commonly used request methods in front-end

1. GET request

A GET request is used to make a request to a specified resource, which contains the URL and request parameters of the resource. The server side returns the corresponding resource by parsing the request parameters, and will not modify the status of the server side.

1.1 How to use

Data submitted using GET requests are included in the URL, so it is easy to be cached and saved by the browser, but is therefore not suitable for submitting sensitive data.

The first case:

The front-end sends a get request and passes parameters using data.

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

The backend uses @GetMapping annotation, and does not use @RequestBody to receive parameters

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

This method cannot actually receive the parameters passed by the front-end, because the parameter passing of the get request cannot be data, but should beparams

If the backend receives parameters is changed to @RequestBody and the frontend does not change, the request will report a 400 error (the request failed), and the backend will report the required request body, which means that the Emp parameter is required, but the frontend does not transmit it.

[: Required request
body is missing: public
()

in conclusion: When obtaining data, that is, querying the database, use get request method, pass parameters in the form of params, or pass parameters in the form of url placeholders. Do not use post methods in query operations.

The second case:

The front-end sends a get request, and does not use data to pass parameters.

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

The backend uses @GetMapping annotation and uses @PathVariable to receive parameters

@GetMapping("/{id}")
public Result getById(@PathVariable Integer id){
       ("according toIDQuery employee information, id: {}",id);
       Emp emp = (id);
       return (emp);
}

in conclusion: When the current side initiates a GET request, if an object is passed, the backend does not need to use @RequestBody to convert the JSON string when receiving data. If a specific value or parameter is passed, the backend must use @PathVariable to receive it.

1.2 Pros and cons

Advantages of GET requests include:

  • Can be cached and saved by the browser.
  • It has little impact on server performance.

Disadvantages of GET requests include:

  • Not suitable for submitting sensitive data, thinking that the request parameters will appear in the URL.
  • It is only applicable to query resources and cannot modify the status of the server side.

1.3 Application scenarios

  • Get resource information.
  • Query the resource.

2. POST request

POST requests are used to submit data to a specified resource, which usually causes changes in the server-side state. For example, when filling in information in a web form and submitting it, the form data is submitted to the server storage using the POST request method.

Data submitted using POST request method is included in the request body, rather than in the URL as GET request method. Therefore, POST requests can submit a larger amount of data than GET and are relatively safe.

2.1 How to use

The first case:
The front-end sends a post request, usingdataPass parameters in a way, passing an object

//POST request, and the object is passedexport function add(emp) {
  return request({
    url: '/emps',
    method: 'post',
    data: emp
  })
}

The backend uses @PostMapping annotation and uses @RequestBody to receive parameters

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

in conclusion: POST request, generally used for new or login operations, is usually passed as an object, that is, a JSON string. When receiving the backend, you must use the @RequestBody annotation to identify it.dataPass parameters in a way

The second type of situation:

The front-end sends a post request, usingparamsPass parameters in a way, which is not an object, but a set of parameters, such as login operations

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

The backend uses @PostMapping annotation, not @RequestBody

    @PostMapping("/login")
    public Map doLogin(String username, String password) {
        User user = (username);
        Map map = new HashMap();
        if ((user)) {
            ("result", "no");
        } else {
            if (((), password)) {
                ("code", 200);
                ("result", "Login successfully");
                //Simulation login                ("Login successfully");
                ("Login successfully");
            } else {
                ("Login failed");

                ("result", "no");
            }
        }

        return map;
    }

in conclusion: POST request, generally used for adding or login operations. When passing a set of parameters, the backend does not use the @RequestBody annotation to identify it when receiving it.paramsPass parameters in a way

2.2 Pros and cons

Advantages of POST requests include:

  • You can submit a larger amount of data than GET.
  • Relatively safer, because the request parameters are not included in the URL.

Disadvantages of POST requests include:

  • It has a great impact on server performance.
  • Not applicable for multiple operations on the same resource.

2.3 Application scenarios

  • Submit form data to the server.
  • Upload files to the server.
  • Create resources or submit data to the server.

3. PUT request

The PUT request is used to update the specified resource to the server, which can be understood as modifying the resource on the server. Using PUT request method will overwrite the original resource content, so it needs to be used with caution.

3.1 How to use

The front-end sends a put request and passes parameters using data

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

The backend uses @PutMapping annotation and uses @RequestBody to receive parameters

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

If the front-end uses data to pass parameters and the back-end does not use the @RequestBody annotation to receive parameters, the parameters passed by the front-end cannot be received (the object is null).

If the front-end uses params to pass parameters and the back-end uses @RequestBody annotation to receive parameters, it will report missing exceptions for the request body (the Emp parameter is required in the request body, but not).

If the front-end uses params to pass parameters, the back-end does not use the @RequestBody annotation to receive parameters, and it can receive parameters passed by the front-end (the object is null).

Although post can be used instead of put, it is not recommended to use this way.

in conclusion: When the current end initiates a PUT request, if it is passed as an object, that is, a JSON string, the backend must be identified with the @RequestBody annotation; if the passed parameter is a specific value, the backend does not need to identify the task annotation when receiving it.

3.2 Pros and cons

Advantages of PUT requests include:

  • The specified resource can be updated.

Disadvantages of PUT requests include:

  • It has a great impact on server performance.
  • Not applicable for multiple operations on the same resource.

3.3 Application scenarios

  • Updates the specified resource.
  • Update a set of resources according to conditions.

4. DELETE request

The DELETE request is used to request the server to delete the specified resource, which can be understood as deleting the resource on the server. Requesting with DELETE mode will cause the specified resource to be permanently deleted, so it needs to be used with caution.

4.1 How to use

The front-end uses delete request method to transmit a single parameter and set placeholder parameters in the URL

//Transfer a single parameterexport function deleteById(id) {
  return request({
    url: '/depts/' + id,
    method: 'delete'
  })
}

The backend uses @DeleteMapping annotation, and @PathVariable gets URL parameters

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

If the front-end uses params to pass parameters and the back-end uses @RequestParam, the front-end reports 400 (request failed), and the back-end reports the missing required parameters error;
The front-end uses data to pass parameters, and the back-end uses @RequestParam but still does not work, and the same error is reported.
Delete can also be completed using post requests, but this is not supported.
in conclusion: When the current end initiates a DELETE request, it passes a specific value or parameter. The parameters received by the backend must be identified with the @PathVariable annotation.

4.2 Pros and cons

Advantages of DELETE requests include:

  • The specified resource can be permanently deleted.

Disadvantages of DELETE requests include:

  • It has a great impact on server performance.
  • Not applicable for multiple operations on the same resource.

4.3 Application scenarios

  • Delete the specified resource.
  • Delete a set of resources according to the conditions.

5. Summary

Mainly for GET and POST requests:

  • GET splicing url, POST pass body, get limits string length

  • Request cache: GET will be cached, but post will not, because get is a request for url

  • Bookmarks for favorites: GET can do it, but POST cannot, because url can be collected.

  • Keep browser history: GET can, but POST cannot, because the url request of get

  • Use: get is often used to retrieve data, post is used to submit data

  • Security: Post is safer than get, because post is a request body and will not be hijacked on the url!

  • Request parameters: querystring is a part of the url. Get and post can be brought with you.

  • Get's querystring only supports urlencode encoding, and the post parameter is placed in the body (supports multiple encodings)

  • Request parameter length limit: get request limits string length, post request does not limit string length

Summarize

This is the article about the four commonly used request methods for front-end. For more relevant commonly used request methods for front-end, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!