Fetch API JavaScript
The Fetch API is a modern web API that provides a simple interface for making network requests in JavaScript. It allows you to make HTTP requests to a server and handle the response in a straightforward manner.
The Fetch API uses the fetch()
function to make HTTP requests. The fetch()
function takes one argument: the URL of the resource you want to fetch.
Here's an example of using the fetch()
function to retrieve a JSON file:
fetch('https://example.com/data.json')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
In this example:
- This code makes an HTTP GET request to the URL
'https://example.com/data.json'
. - When the response is received, it is converted to JSON using the
json()
method of theResponse
object. - The resulting JSON data is logged to the console.
- If there's an error, it's logged to the console as well.
The HTTP Method
The Fetch API also allows you to specify options for the request, such as the HTTP method, headers, and request body.
Here's an example of making a POST request with JSON data in the request body:
fetch('https://example.com/api/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: 'John Doe',
email: 'john@example.com'
})
})
.then(response => console.log(response))
.catch(error => console.error(error));
In this example:
- This code makes an HTTP POST request to the URL
'https://example.com/api/data'
. - The request includes a JSON payload in the request body, and the
Content-Type
header is set to'application/json'
. - When the response is received, it is logged to the console.
- If there's an error, it's logged to the console as well.
Async/Await with Fetch
Async/await is a modern JavaScript language feature that allows you to write asynchronous code in a more synchronous style. You can use async/await with the Fetch API to make network requests and handle the response in a more readable and intuitive way.
Here's an example of using async/await with the Fetch API:
async function fetchData() {
try {
const response = await fetch('https://example.com/data.json');
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}
fetchData();
In this example:
- The
fetchData()
function is defined as an async function. - Inside the function, the
await
keyword is used to wait for thefetch()
function to resolve and return a Response object. - Once the
Response
object is obtained, theawait
keyword is used again to wait for thejson()
method to parse the response data as JSON. -If there's an error during the network request, thecatch
block will handle the error.