Most modern web apps fetch data from servers via APIs. This page shows how to do that in JavaScript using the Fetch API.
What are APIs?
APIs (Application Programming Interfaces) are rules and protocols that let software applications talk to each other. On the web, an API usually means a service that responds to requests with data – often in JSON format.
Fetch API: the modern standard
JavaScript’s Fetch API is the standard way to request resources from the web. It replaces the older XMLHttpRequest.
Basic fetch usage
fetch() sends a request and returns a promise.
Example – basic fetch request:
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => console.error('Error:', error));This requests data from https://api.example.com/data and logs it to the console.
Handling JSON data
Most APIs return JSON. You will need to parse it before you can use it.
Example – parsing JSON:
fetch('https://api.example.com/users')
.then(response => response.json())
.then(users => {
users.forEach(user => {
console.log(user.name);
});
});Here we parse a list of users and log each name.
Error handling
Always handle errors in API requests. A failed request should not silently break your app.
Example – error handling:
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok ' + response.statusText);
}
return response.json();
})
.then(data => {
// Process data
})
.catch(error => {
console.error('Fetch error:', error);
});POST requests
Fetch can also send data to a server – for example when submitting a form.
Example – POST request:
fetch('https://api.example.com/submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ name: 'Alice', job: 'Developer' })
})
.then(response => response.json())
.then(data => {
console.log('Success:', data);
})
.catch(error => {
console.error('Error:', error);
});Working with headers and other options
Fetch accepts options for headers, credentials, and more.
Example – custom headers:
fetch('https://api.example.com/data', {
headers: {
'Authorization': 'Bearer YOUR_TOKEN_HERE'
}
})
.then(response => response.json())
.then(data => {
// Process data
});Async/await syntax
async/await makes fetch code easier to read than chaining .then() calls.
Example – using async/await:
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Error:', error);
}
}
fetchData();Handling CORS issues
Cross-Origin Resource Sharing (CORS) can block requests to a different domain. You will run into this when calling external APIs from the browser.
Example – dealing with CORS:
fetch('https://api.example.com/data', {
mode: 'cors' // 'cors' by default
})
.then(response => response.json())
.then(data => {
// Process data
});Fetching data from APIs is a core skill for front-end work. Once you are comfortable with Fetch, JSON parsing, and error handling, you can wire up most data-driven features.