How to use the fetch method in JavaScript

Usage of fetch method in JavaScript

In modern Web development, data interaction with the server is a very common requirement. To meet this need, JavaScript provides the fetch method, which is a powerful and easy-to-use API that can help us send and receive HTTP requests.

The basic usage of the fetch method is as follows:

fetch(url, options)
  .then(response => response.json())
  .then(data => {
    // 对返回的数据进行处理
  })
  .catch(error => {
    // 处理请求错误
  });

In this example, the fetch method accepts two parameters: url and options. URL is the address to send the request, and options are optional parameters used to configure the details of the request, such as request method, request headers, etc.

The fetch method returns a Promise object. We can handle successful responses through the .then() method and handle errors through the .catch() method. In a successful response, we can use the response.json() method to parse the returned data into JSON format and pass the parsed data to the next .then() method.

Let's look at a complete example of getting data from the server by using the fetch method and displaying it in a web page:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    const container = document.getElementById('data-container');
    data.forEach(item => {
      const listItem = document.createElement('li');
      listItem.innerText = item.title;
      container.appendChild(listItem);
    });
  })
  .catch(error => {
    console.error('请求错误:', error);
  });

In this example, we request https://api. example.com/data sends a GET request and then uses the response.json() method to parse the response data into JSON format. Next, we loop through the data array and create the title of each item as a li element and add it to the container with id data-container.

In addition to GET requests, the fetch method also supports other HTTP request methods, such as POST, PUT and DELETE. We can specify the request method by setting the method field in the options parameter. For example, if you want to send a POST request, you can write like this:

const options = {
  method: 'POST',
  body: JSON.stringify({ username: 'admin', password: '123456' }),
  headers: {
    'Content-Type': 'application/json'
  }
};

fetch('https://api.example.com/login', options)
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理请求错误
  });

In this example, we specify the request method as POST in the options parameter, and set the body field to send data in JSON format. In addition, we can also specify request headers by setting the headers field.

It should be noted that the fetch method will only be rejected when an error occurs in the network request. In other words, it does not automatically handle HTTP error status codes (such as 404) as errors. If we need to handle a specific HTTP status code, we can determine it in the successful response.

To summarize, the fetch method is a very convenient way to send and receive HTTP requests in JavaScript. It supports various HTTP request methods, can set the details of the request, and also uses the Promise mechanism to make the code more concise and readable. By mastering the usage of the fetch method, we can interact with the server more flexibly and add more functions and interactive experiences to the web application.

(801 words in total)

The above is the detailed content of How to use the fetch method in JavaScript. For more information, please follow other related articles on the PHP Chinese website!