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

preface

In the last few articles, we’ve looked at documenting JavaScript in the browser, as well as summarizing other topics.

After learning the fetch network request method in the introduction above, this article will continue to learn the details about the FETCH () network request method

Js-fetch method in the browser

Fetch () makes it easy to write code that sends basic Get requests: HTTP and HTTPS requests can be sent,

Compare XMLHttpRequest VS Fetch (URL)

Remember the XMLHttpRequest used to encapsulate Ajax? As follows:

let ajax = null
if (window.XMLHttpRequest) {
  ajax = new XMLHttpRequest()
}
// ...
Copy the code

Fetch only needs a simple FETCH (URL) to initiate a GET request. Let’s continue to learn some related matters that fetch should pay attention to

fetch('yourUrl').then((res) = > console.log(res))
Copy the code

Fetch () requests parameters

The simplest fetch request above takes the first parameter as the address of the request. Network requests are still a bit complicated, and fetch takes other parameters as well

Second optional argument: an init object that can control different configurations:

// Example POST method implementation:

postData('http://example.com/answer', { answer: 42 })
  .then((data) = > console.log(data)) // JSON from `response.json()` call
  .catch((error) = > console.error(error))

function postData(url, data) {
  // The default is *
  return fetch(url, {
    method: 'POST'.// *GET, POST, PUT, DELETE, etc.
    body: JSON.stringify(data), // must match 'Content-Type' header
    cache: 'no-cache'.// *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin'.// include, same-origin, *omit
    headers: {
      'user-agent': 'the Mozilla / 4.0 MDN Example'.'content-type': 'application/json',},mode: 'cors'.// no-cors, cors, *same-origin
    redirect: 'follow'.// manual, *follow, error
    referrer: 'no-referrer'.// *client, no-referrer
  }).then((response) = > response.json()) // parses response to JSON
}
Copy the code

Fetch () is powerful

  1. Sends a request with credentials

To get the browser to send a request containing credentials (even if it is a cross-domain source), add the Credentials: ‘include’ to the init object passed to the fetch() method.

fetch('https://example.com', {
  credentials: 'include'.// contains credentials
})
Copy the code
  1. Upload JSON data through POST
  2. through<input type="file"/>Upload a file
  3. through<input type="file" mutiple/>Elements, FormData() and fetch() upload files.
  4. Customize the request object

Read more about it

  1. -number – This is a function
  2. Automatic type conversion
  3. Infix operators in JavaScript
  4. Do you know what JavaScript Typeof is?
  5. Learn a few representative events in JavaScript
  6. Learn to Understand client-side JavaScript- Event Classification (part 1)
  7. Client-side JavaScript- Event Classification (2)
  8. Learn to understand JavaScript events and event loops
  9. Understand JavaScript in the browser – event registration
  10. The javascript-fetch () network request method in the browser

Calm Down & Carry On!

Buy Less by Know More! Come on!

Learning, recording and accumulating is a long process!

Refer to the content

Using-fetch | MDN