Introduction to Unfetch

Unfetch is a tiny, elegant polyfill for the Fetch API in JavaScript, perfect for making HTTP requests with an impressively small footprint. This article will guide you through dozens of useful API explanations with code snippets to help you understand and implement Unfetch in your projects.

Why Choose Unfetch?

Unfetch is a lightweight alternative to larger Fetch polyfills, making it ideal for performance-conscious developers. With a minified size of just 500 bytes, it ensures your web applications remain fast and efficient.

Installation

First, you need to install Unfetch. You can do this using npm:

  npm install unfetch

Or, include it directly from a CDN:

  <script src="https://unpkg.com/unfetch/dist/unfetch.umd.js"></script>

Basic Usage

To start using Unfetch, you can import it into your project:

  import fetch from 'unfetch';

Here’s a basic example of a GET request:

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

POST Request

Sending data is just as simple:

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

Handling Errors

You can handle errors using the catch method:

  fetch('https://api.example.com/data')
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

Using with Async/Await

Unfetch works seamlessly with async/await syntax:

  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();

App Example

Let’s build a simple app that fetches and displays user data:

  import fetch from 'unfetch';

  async function getUsers() {
    try {
      const response = await fetch('https://api.example.com/users');
      const users = await response.json();
      displayUsers(users);
    } catch (error) {
      console.error('Error:', error);
    }
  }

  function displayUsers(users) {
    const usersList = document.getElementById('users');
    usersList.innerHTML = users.map(user => 
      <li>${user.name}</li>
    ).join('');
  }

  document.addEventListener('DOMContentLoaded', getUsers);

Include the following HTML to display the users:

  <ul id="users"></ul>

This simple app fetches user data from an API and displays it in an unordered list on the webpage.

Unfetch allows you to leverage the power of the Fetch API in a lightweight package, making it perfect for modern web development.

Hash: feb0b287b3e243d3c7212aa9020eb2d3e01a2c01bd6bf8a919c7c848efdf4190