This is the 18th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

preface

Through the previous several articles, we have learned and recorded the relevant knowledge points of js-fetch () request in the browser. In addition, we have also summarized the relevant reading points of other knowledge points: list:

We learned how to upload files via FETCH (), but while most modernization projects use the AXIos request library to handle requests, we still need to learn the basics. This article continues to learn about specifying the request method and body for fetch

Fetch specifies the request method and body

The Fetch API provides a JavaScript interface for accessing and manipulating specific parts of the HTTP pipeline, such as requests and responses. It also provides a global fetch() method, which provides a simple, reasonable way to fetch resources asynchronously across a network.

The response data of the fetch() request learned in the previous article can be judged by the returned status code to determine whether the correct data is returned. In the previous examples, each fetch request uses the request method ‘GET’ and is a simple request that does not involve complex parameters.

Specify the request method for fetch

In addition to the GET method used to send the request in the previous article, we can use different request methods: for example

POST, PUT, or DELETE to request operation data; GET data (GET or HEAD).

For example, a fetch with only two parameters initiates a request:

fetch(url, {
  method: 'POST',
})
  .then((res) = > res.json())
  .then(handleRes)
Copy the code

The fetch request body

The above request method does not contain a specific request body. POST and PUT requests typically have a request body that sends data to the server. The GET or HEAD methods do not support the request body.

Other methods that support the request body can specify the request body by setting the body property in the options object:

fetch(url, {
  method: 'POST'.body: 'The data that you want to send to the server, in this case, is a string, but of course there are many different kinds of data, such as an object, etc.',})Copy the code

Request header

When you specify a request body, the browser automatically adds an appropriate header to the request. For example, if the string request body is shown above, the browser will automatically add “Content-Type” with a “text/plain “header; charset=UTF-8”.

Of course, the request body may also be a JSON object, as follows:

fetch(url, {
  method: 'POST'.headers: new Headers({ 'Content-Type': 'application/json' }),
  body: JSON.stringfy(requestBody),
})
Copy the code

Read more about it

  1. -number – This is a function
  2. Infix operators in JavaScript
  3. Do you know what JavaScript Typeof is?
  4. Learn a few representative events in JavaScript
  5. Learn to understand client-side JavaScript- event classification
  6. Learn to understand JavaScript events and event loops
  7. Understand JavaScript in the browser – event registration
  8. The javascript-fetch () network request method in the browser
  9. HTTP response code
  10. Js in the browser – upload files via fetch()

Calm Down & Carry On!

Buy Less by Know More! Come on!

Learning, recording and accumulating is a long process!

Refer to the content

  • | MDN network – the fetch method and request body