Introduction to afetch

afetch is a powerful and versatile library used in various applications to handle HTTP requests and responses efficiently. In this guide, we’ll walk you through the basics of afetch, its numerous APIs, and provide you with handy code snippets to illustrate how you can leverage this library in your projects.

Getting Started with afetch

 // Install the afetch library npm install afetch
// Import afetch into your JavaScript/TypeScript project import afetch from 'afetch'; 

Basic Usage

Here’s a simple example of how to make a GET request using afetch:

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

POST Request

To make a POST request:

 afetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
})
  .then(response => response.json())
  .then(data => console.log('Success:', data))
  .catch(error => console.error('Error:', error));

PUT Request

To make a PUT request:

 afetch('https://api.example.com/data/1', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'new value' })
})
  .then(response => response.json())
  .then(data => console.log('Success:', data))
  .catch(error => console.error('Error:', error));

DELETE Request

To make a DELETE request:

 afetch('https://api.example.com/data/1', {
  method: 'DELETE'
})
  .then(response => response.json())
  .then(data => console.log('Item deleted:', data))
  .catch(error => console.error('Error:', error));

Handling Headers

Adding custom headers to requests:

 afetch('https://api.example.com/data', {
  headers: {
    'Custom-Header': 'value',
    'Another-Header': 'another-value'
  }
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Using with Async/Await

afetch supports async/await syntax:

 async function fetchData() {
  try {
    const response = await afetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}
fetchData(); 

App Example with afetch

Let’s build a small app using afetch. This app fetches and displays a list of users from an API.

 import afetch from 'afetch';
// Function to fetch users async function fetchUsers() {
  try {
    const response = await afetch('https://api.example.com/users');
    const users = await response.json();
    displayUsers(users);
  } catch (error) {
    console.error('Error:', error);
  }
}
// Function to display users in the DOM function displayUsers(users) {
  const usersList = document.getElementById('usersList');
  users.forEach(user => {
    const userItem = document.createElement('li');
    userItem.textContent = `${user.name} - ${user.email}`;
    usersList.appendChild(userItem);
  });
}
// Fetch users on page load document.addEventListener('DOMContentLoaded', fetchUsers); 

With these simple steps, you now have a working example of an app that utilizes afetch to fetch and display data dynamically.

Hash: 6802a5951b696d1a853c719643766f1f380baf6a09098c59a4ea1b39c79b2269