Getting Data Through Using API in JavaScript.

When building web applications, making HTTP requests is a common task. There are several ways to do this in JavaScript, each with its own advantages and use cases. In this post, we’ll explore four popular methods: fetch(), axios(), $.ajax(), and XMLHttpRequest(), with simple examples for each.

1. Using fetch()
The fetch() function allows you to request HTTP to fetch resources from a network. It uses promises, which makes it easier to handle asynchronous operations.

Example

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

2. Using Axios()
axios() is a popular HTTP client for making requests from browsers or Node.jsapplications. It is similar to the built-in fetch() API but includes additional features such as request and response interceptors, automatic JSONparsing, and more.

Example

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

3. Using $.ajax()
If you’re working with jQuery, you can use the $.ajax() function to make HTTP requests. It provides a simple interface for making AJAX requests and handling responses.

Example

$.ajax({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: function(data) {
    console.log(data);
  },
  error: function(error) {
    console.error('Error:', error);
  }
});

4. Using XMLHttpRequest()
The XMLHttpRequest object provides an easy way to fetch data from a URL without a page refresh. It's a bit lower-level than fetch() or libraries like Axios, but it's still widely used in many applications.

Example

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log(JSON.parse(xhr.responseText));
  } else {
    console.error('Error:', xhr.statusText);
  }
};
xhr.onerror = function() {
  console.error('Request failed');
};
xhr.send();

In this example, we create a new XMLHttpRequest, open a GET request, and handle the response by checking the status code and parsing the response text.

The above is the detailed content of Getting Data Through Using API in JavaScript.. For more information, please follow other related articles on the PHP Chinese website!