Mini XHR

A very lightweight javascript library for HTTP requests.

Language: En | 中文

Install

# via npm
$ npm install @cycjimmy/mini-xhr --save

# or via yarn
$ yarn add @cycjimmy/mini-xhr

Usage

import miniXhr from '@cycjimmy/mini-xhr';

# OR
const miniXhr = require('@cycjimmy/mini-xhr');

miniXhr.get(url [, settings])
  .then((data) => {
    // handle data
  })
  .catch((err) => {
    // handle error
  });

miniXhr supports the following methods:

miniXhr.get(url, [,settings])

• url: [Require][String] The server URL that will be used for the request.
• The settings supports: [Option][Object]
  • params: [Option][Object] The key-value pair for the URL parameters to be sent with the request. Default {}.
  • responseType: [Option][String] The type of data that the server will respond with. Choose one of the options:
    • 'arraybuffer'
    • 'document'
    • 'json'(default)
    • 'text'
    • 'stream'
    • 'blob'
  • headers: [Option][Object] The key-value pair that custom headers to be sent. Default {}.
  • contentType: [Option][String] Content type. Default 'application/json; charset=UTF-8'.
  • timeout: [Option][Number] The number of milliseconds before the request times out. A value of 0 means there will be no timeout. Default 0.
  • timeoutCB: [Option][Function] The time-out callback function. Default null.

miniXhr.post(url, [,settings])

• url: [Require][String] The server URL that will be used for the request.
• The settings supports: [Option][Object]
  • params: [Option][Object] The key-value pair for the URL parameters to be sent with the request. Default {}.
  • data: [Option][Object|FormData|String] The data to be sent as the request body. Default {}.
  • dataType: [Option][String] The type of the data to be sent as the request body. Choose one of the options:
    • 'json'(default)
    • 'formData'
    • 'text'
  • responseType: [Option][String] The type of data that the server will respond with. Choose one of the options:
    • 'arraybuffer'
    • 'document'
    • 'json'(default)
    • 'text'
    • 'stream'
    • 'blob'
  • headers: [Option][Object] The key-value pair that custom headers to be sent. Default {}.
  • contentType: [Option][String] Content type. Default 'application/json; charset=UTF-8'.
  • timeout: [Option][Number] The number of milliseconds before the request times out. A value of 0 means there will be no timeout. Default 0.
  • timeoutCB: [Option][Function] The time-out callback function. Default null.

miniXhr.jsonp(url, [,settings])

• url: [Require][String] The server URL that will be used for the request.
• The settings supports: [Option][Object]
  • params: [Option][Object] The key-value pair for the URL parameters to be sent with the request. Default {}.
  • timeout: [Option][Number] The number of milliseconds before the request times out. A value of 0 means there will be no timeout. Default 5000.

Handling Errors

GET or POST

miniXhr.get('/getData')
  .then((data) => {
    // data handle
  })
  .catch((err) => {
    console.log(err.statusText);  // the text of the response status
    console.log(err.status);      // the numerical HTTP status code
  });

JSONP

miniXhr.jsonp('/getData')
  .then((data) => {
    // data handle
  })
  .catch((err) => {
    console.log(err);  // return 'error' or 'timeout'
  });

Use in browser: E.g.

<script src="mini-xhr.umd.min.js"></script>
<script>
  miniXhr.jsonp('/getData', {
    params: {
      key1: 'value1',
      key2: 'value2',
    }
  })
    .then(function(data) {
      // data handle
    });
</script>

CDN

To use via a CDN include this in your html:

<script src="https://cdn.jsdelivr.net/npm/@cycjimmy/mini-xhr@7/dist/mini-xhr.umd.min.js"></script>