Async

How to Fetch Data from an API

Use async/await with fetch() for clean async code

Quick Answer (2024 ES6+ Way)

javascript

async function fetchUser() {
  const response = await fetch('https://api.example.com/user');
  const data = await response.json();
  return data;
}

Live Example

javascript

async function getPosts() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    const posts = await response.json();
    return posts.slice(0, 3);
  } catch (error) {
    console.error('Error:', error);
  }
}

// Usage
getPosts().then(console.log);

Common Variations

With Error Handling

javascript

async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error('Network error');
    return await response.json();
  } catch (error) {
    console.error('Fetch failed:', error);
    return null;
  }
}

With Custom Headers

javascript

const response = await fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token'
  },
  body: JSON.stringify({ name: 'John' })
});

❌ Don't Do This (Outdated Way)

Avoid using XMLHttpRequest and nested callbacks

javascript

// DON'T DO THIS
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    var data = JSON.parse(xhr.responseText);
    // handle data
  }
};
xhr.send();

Browser Support

✓ Works in all modern browsers (ES2017+)

#async#fetch#api