npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

chain-xhr

v0.1.4

Published

A XMLHttpRequest is the safest and most reliable way to make HTTP requests and chain-xhr aims to make making XHR requests as simple as possible through a chainable API

Downloads

3

Readme

chain-xhr

Chain XHR aims to make creating XHR requests as simple as possible through a chainable API.

Note: chain-xhr is not final yet and I plan on implementing more features including simplifying the process of sending different types of data such as form data.

NPM version Known Vulnerabilities npm NPM downloads Gitter

Table of contents

Install

To install chain-xhr, you can use

$ npm install chain-xhr

Usage

To use chain-xhr in your application, simply import it as an ES6 module like so:

// Webpack
import ChainXHR from 'chain-xhr';

// Browser
import ChainXHR from './path/to/chain-xhr.js';

const request = new ChainXHR();

Properties

METHODS

The methods property exposes the different http request types that can be used with ChainXHR. While these are not required to be used, they can be used instead of the string representations if you want to be safe.

const requost = new ChainXHR();

console.log(request.METHODS.GET);     // 'GET'
console.log(request.METHODS.POST);    // 'POST'
console.log(request.METHODS.PUT);     // 'PUT'
console.log(request.METHODS.DELETE);  // 'DELETE'

API

url

Sets the URL that this request should be sent to.

| Param | Type | Description | Default | |-------|--------|----------------------------------|---------| | url | string | The url to send this request to. | |

const request = new ChainXHR();

const res = await request
  .url('https://jsonplaceholder.typicode.com/todos/1')
  .send();

method

Sets the http request moethod to be used by this request.

This is set to 'GET' by default. When setting this, you can choose to type in a string directly such as 'GET' or 'get' or you can use the REQUEST constant of ChainXHR to set this.

| Param | Type | Description | Default | |--------|--------|------------------------------------------------------|---------| | method | string | The http request method to use for this XHR request. | |

Using the METHODS property:

const request = new ChainXHR();

const res = await request
  .url('https://jsonplaceholder.typicode.com/todos/1')
  .method(request.METHODS.GET)
  .send();

Using a string:

const request = new ChainXHR();

const res = await request
  .url('https://jsonplaceholder.typicode.com/todos/1')
  .method('GET')
  .send();

withCredentials

Sets this request to be made with credentials such as cookies, authorization headers, or TLS certificates.

By default this is set to false and it also has no effect on same-site requests.

const request = new ChainXHR();

const res = await request
  .url('https://jsonplaceholder.typicode.com/todos/1')
  .withCredentials()
  .send();

contentType

Sets the content type header which indicates what type of content is being send to the endpoint.

By default this is set to 'application/json'.

| Param | Type | Description | Default | |-------------|--------|-------------------------------------------------------|---------| | contentType | string | The type of content that is being sent to the server. | |

const request = new ChainXHR();

const res = await request
  .url('https://jsonplaceholder.typicode.com/posts')
  .contentType('multipart/form-data')
  .send();

queryParam

Adds a query parameter to send with the request.

This should be chained multiple times to add multiple query parameters.

| Param | Type | Description | Default | |-------|--------|----------------------------------------|---------| | key | string | The key of the query parameter to add. | | | value | string | The value of the key added. | |

const request = new ChainXHR();

const res = await request
  .url('https://jsonplaceholder.typicode.com/posts')
  .queryParam('hello', 'world')
  .queryParam('count', 5)
  .send();

data

Sets the data to send through with the request.

| Param | Type | Description | Default | |-------|------|-------------------------------------------|---------| | data | * | The data to send through with the request | |

Sending an Object:

const request = new ChainXHR();

const obj = { hello: 'world', year: 2019 };

const res = await request
  .url('https://jsonplaceholder.typicode.com/posts')
  .data(obj)
  .send();

Sending key value pairs individually:

const request = new ChainXHR();

const res = await request
  .url('https://jsonplaceholder.typicode.com/posts')
  .data('hello', 'world')
  .data('year', 2019)
  .send();

json

Specifies that the data returned should be JSON parsed.

const request = new ChainXHR();

const res = await request
  .url('https://jsonplaceholder.typicode.com/posts')
  .json()
  .send();

abort

Aborts the request if it already has been sent.

When a request is aborted, its readystate is changed to 0 and the status code is set to 0 also.

const request = new ChainXHR();

const res = await request
  .url('https://jsonplaceholder.typicode.com/posts')
  .json()
  .send()
  .abort();

send

Indicates that the XHR request is finished being built and is ready to be sent.

This should always be the final method used in all requests.

const request = new ChainXHR();

const res = await request
  .url('https://jsonplaceholder.typicode.com/posts')
  .send();

Examples

Sending a GET request and returning JSON data:

const request = new ChainXHR();

const res = await request
  .method(request.METHODS.GET)
  .url('https://jsonplaceholder.typicode.com/todos/1')
  .json()
  .send();

Sending a GET request with a query parameter:

const request = new ChainXHR();

const res = await request
  .method(request.METHODS.GET)
  .url('https://jsonplaceholder.typicode.com/posts')
  .queryParam('userId', 1)
  .json()
  .send();

Sending a POST request with JSON data:

const request = new ChainXHR();

const res = await request
  .method(request.METHODS.POST)
  .url('https://jsonplaceholder.typicode.com/posts')
  .data({
    title: 'foo',
    body: 'bar',
    userId: 1
  })
  .json()
  .send()
  .catch(err => { throw new Error(err) });

Sending a POST request with form data:

const request = new ChainXHR();

const formData = new FormData();

formData.append('title', 'foo');
formData.append('body', 'bar');
formData.append('userId', 1);

const res = await request
  .method(request.METHODS.POST)
  .url('https://jsonplaceholder.typicode.com/posts')
  .contentType('multipart/form-data')
  .data(formData)
  .json()
  .send()
  .catch(err => { throw new Error(err) });

Tests

To run all of the available tests use:

$ npm run test

License

MIT