http-fetch-client.js

a fetch client for browser

Read this in other languages: 简体中文, English

Installation

npm install --save http-fetch-client

Usage

send a request

import FetchClient from 'http-fetch-client';

let fetch = new FetchClient();
fetch.request(
  '/test',
  {
    method: 'GET',
    data: {}
  }
)

use middleware replace callback

import FetchClient from 'http-fetch-client';

let fetch = new FetchClient();
fetch.request(...).use(({ response }) => {
  if (response.ok) {
    //  response.status in 200 - 300
  } else {
    //
  }
})

set global middleware

global middleware will be called on every request

PS: global middleware is fetch use not fetch.request(...).use

import FetchClient from 'http-fetch-client';

let fetch = new FetchClient();
fetch.use(({ response }) => {
  if (response.ok) {
    //  response.status in 200 - 300
  } else {
    //
  }
})

middleware support async & promise

import FetchClient from 'http-fetch-client';

let fetch = new FetchClient();
fetch.request(...).use(async ({ response, request }, next) => {
  await setTimeout(() => { console.log('first after 1000ms') }, 1000);
  return next();
}).use(({ response }) => {
  console.log('second')
})
// console
// first after 1000ms
// second;

middleware cascade

import FetchClient from 'http-fetch-client';

let fetch = new FetchClient();
fetch.use(async function({ response, request }, next) {
  console.log('global start');
  await next();
  console.log('global end');
});
fetch.request(...).use(async function ({ response, request }, next) {
  console.log('request start');
  await next();
  console.log('request end');
});
// console
// global start
// request start
// request end
// global end

stop next middleware

return Promise or use async function without run next()

import FetchClient from 'http-fetch-client';

let fetch = new FetchClient();
fetch.request(...).use(async function ({ response }) {
  console.log('first');
});
fetch.request(...).use(function ({ response }) {
  console.log('second');
});
// console
// first

other cycle support ( beforeSend/error/success )

• beforeSend: before request send. only global middleware
• error: be called when network error (status === 0)
• success: status 1 - ...

import FetchClient from 'http-fetch-client';

let fetch = new FetchClient();
fetch.use({
  beforeSend: ({ request }) => {
    request.header.set('X-Custom-Header', 'some');
  },
  error: ({ response, request }) => {
    // ...
  },
  success: ({ response, request }) => {
    // ...
  }
}));

REATful api

import FetchClient from 'http-fetch-client';

let fetch = new FetchClient();
fetch.get(url[, options])
fetch.post(url[, options])
fetch.put(url[, options])
fetch.del(url[, options])

Response

Method

• text/json/blob return formated body

fetch.get(...).use(({ response }) => {
  console.log(response.getBody()) // auto format by Content-Type in response's header
  console.log(response.text()) // String: test
  console.log(response.json()) // Object: {a:'..'}
})

• getHeaders return response headers
• isTimeout
• isAborted

Attribute

• status {Number} http status
• ok {Boolean} status >= 200 & status < 300

Request

import { Request } from 'http-fetch-client';
new Request(url, options);

Method

• getHeaders
• setHeaders
• getBody/getBodyForm/getBodyJson/getBodyFormData
• setBody
• getUrl/getUrlWithQuery(for GET)
• getOptions
• setOptions
• getMethod

Options Attribute

• sendType {String} quick set Content-Type in headers. support:

{
  'json': 'application/json; charset=UTF-8', // default
  'form': 'application/x-www-form-urlencoded; charset=UTF-8'
}

• acceptType {String} quick set accept in headers. support:

{
  'json': 'application/json,text/javascript' // default
}

• async {Boolean}
• body|data {Object}
• headers {Object}

PS: no callback to onsuccess or onerror

examples

https://github.com/ignous/http-fetch-client-examples