KY: A versatile HTTP client tool

Table of Contents

  1. What is KY
  2. Set up and Installation
  3. Usage
  4. Request Cancellation
  5. Retries
  6. General Benefits
  7. Benefits over Regular Fetch
  8. Common Network Errors
  9. Citation + Useful Links

What is KY:

KY HTTP client is a lightweight JavaScript library for making HTTP requests in web applications. It is a wrapper on the Fetch API, a contemporary interface for network-based asynchronous resource fetching. KY HTTP client offers a straightforward and user-friendly API along with capabilities like request cancellation, retries, and automatic JSON parsing in an effort to streamline the process of sending HTTP requests.

Set up and installation

To download using npm run the following command

npm install ky

After installation is complete make sure to add the following line at the top of any document requiring ky

import ky from 'ky'

Usage

const json = await ky.post('https://example.com', {json: {foo: true}}).json();

Get

const apiUrl = 'https://api.example.com/data';

ky.get(apiUrl)
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
  })
  .then(data => {
    console.log('Data received:', data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

Post

const apiUrl = 'https://api.example.com/data';

// Data to send
const postData = {
  name: 'Shaffaan Bin Aamir',
  message: 'Hello if you are reading this you are maybe in CSC301!'
};

ky.post(apiUrl, {
  json: postData
})
  .then(response => {
    // Response is successful (status code 200-299)
    if (response.ok) {
      return response.json();
    } else {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
  })
  .then(data => {
    console.log('Response:', data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

Request Cancellation

Since KY is a wrapper for fetchAPI there is built in support for request cancellations This can be done using the AbortController

Following code is from KY documentation. Link provided at the end of the document

const controller = new AbortController();
const {signal} = controller;

setTimeout(() => {
	controller.abort();
}, 5000);

try {
	console.log(await ky(url, {signal}).text());
} catch (error) {
	if (error.name === 'AbortError') {
		console.log('Fetch aborted');
	} else {
		console.error('Fetch error:', error);
	}
}

Retries

const json = await ky('https://example.com', {
	retry: {
		limit: 10,
		methods: ['get'],
		statusCodes: [413],
		backoffLimit: 3000
	}
}).json();

Implementing HTTP retry mechanisms in scenarios with spotty network conditions can significantly enhance the reliability and availability of distributed systems. By automatically retrying failed requests, applications can mitigate the impact of transient network issues, reducing service disruptions and improving overall user experience. For example, in a mobile application where users may experience intermittent connectivity while traveling, HTTP retries can help ensure that critical requests, such as fetching messages or updating data, are eventually successful despite temporary network outages. This approach minimizes user frustration and maintains seamless functionality, ultimately increasing user satisfaction and retention.

General Benefits

Some of the benefits KY provides are

Benefits over regular Fetch

The above benefits copied from the KY documentation. Link is present below

Common Network Errors

Because of the fact that KY is an HTTP client alot of errors that users usually run in are network errors. I have included a list of common network errors that one may encounter. I have also linked an article that goes in detail about what each error means and how to solve them. Furthermore the KY repo has alot of issues and their solutions are regularly posted. I have linked the repo below

Common API erros and how handle them Detecting Network Failures with fetch

CORS Error and how to handle it with KY

A CORS error, or Cross-Origin Resource Sharing error, occurs when a web application tries to make a request to a resource (like an API) that resides on a different domain, protocol, or port than the one from which the initial web page was served. CORS docs There are many different CORS error and ways of handling them .This article I have linked goes in detail about how to solve them. CORS trouble shooting

A very popular method is using a CORS proxy service to bypass CORS restrictions. Ky allows you to easily configure a custom fetch handler, so you can integrate a CORS proxy with Ky.

import ky from 'ky';

const proxyUrl = 'https://cors-anywhere.herokuapp.com/';
const apiUrl = 'https://example.com/api/data';
// Make a GET request through the CORS proxy
ky.get(proxyUrl + apiUrl).then(response => {
}).catch(error => {
});