fetch-s

fetch-s

Fetch-based HTTP requests

简体中文

Features

• Supports the Promise API
• Supports Timeout
• Transform request data
• Analysis response data
• Interceptor
• Custom instance defaults
• Supports JSONP

Installing

Using npm:

$ npm install fetch-s

Using CDN:

<script src="https://unpkg.com/fetch-s/dist/fetchs.min.js" />

Example

Performing a GET request

// Make a request for a user with a given ID
fetchs
	.get('/user?ID=12345')
	.then(function(response) {
		console.log(response);
	})
	.catch(function(error) {
		console.log(error);
	});

// Optionally the request above could also be done as
fetchs
	.get('/user', {
		data: {
			ID: 12345
		}
	})
	.then(function(response) {
		console.log(response);
	})
	.catch(function(error) {
		console.log(error);
	});

Performing a POST request

fetchs
	.post('/login', {
		userName: 'reking',
		password: 'xxx'
	})
	.then(function(response) {
		console.log(response);
	})
	.catch(function(error) {
		console.log(error);
	});

Performing a JSONP request

// Make a request for a user with a given ID
fetchs
	.jsonp('/user?ID=12345')
	.then(function(response) {
		console.log(response);
	})
	.catch(function(error) {
		console.log(error);
	});

// Optionally the request above could also be done as
fetchs
	.jsonp('/user', {
		data: {
			ID: 12345
		}
	})
	.then(function(response) {
		console.log(response);
	})
	.catch(function(error) {
		console.log(error);
	});

Request Config

These are the available config options for making requests. Only the url is required. Requests will default to GET if method is not specified.

{
  // request type
  method: 'GET', // default

  //`url` is the request path
  //If u is a relative path, it will be combined with `origin` to form a complete path
  url:'',

  //`data` are the request parameters
  data:{
	id: 1
  },

  // `responseType` indicates the type of data that the server will respond with
  // options are 'arrayBuffer', 'blob', 'formData', 'text', 'json'
  dataType: 'json',

  //`origin` is the request baseURL
  origin: '',

  //`mode` is the request mode ("same-origin"、"no-cors"、"cors")
  mode: 'cors', // default

  // Sending a request with credentials included
  //To cause browsers to send a request with credentials included, even for a cross-origin call, add credentials: 'include' to the init object you pass to the fetch() method.
  //If you only want to send credentials if the request URL is on the same origin as the calling script, add credentials: 'same-origin'.
  //To instead ensure browsers don’t include credentials in the request, use credentials: 'omit'.
  credentials: 'include',// default

  //`timeout` specifies the number of milliseconds before the request times out
  timeout: 30000, // default

  // `headers` the headers that the server request with
  headers: {}
}

Response Schema

The response for a request contains the following information.

{
  // `data` is the response that was provided by the server
  data: {},

  // `config` is the config that was provided to `fetch-s` for the request
  config: {},

  // `status` is the HTTP status code from the server response
  status: 200,

  // `statusText` is the HTTP status message from the server response
  statusText: 'OK',

  //Contains a boolean stating whether the response was successful (status in the range 200-299) or not.
  ok: true,

  //`redirect` is to identify if the request has redirects
  redirected: false,

  // `headers` the headers that the server responded with
  headers: {},

  // `body` the body that the server responded with
  body: ReadableStream
}

Interceptors

You can intercept requests or responses before they are handled by then or catch.

// Add a request interceptor
fetchs.interceptors.request.use(
	function(config) {
		// Do something before request is sent
		return config;
	},
	function(error) {
		// Do something with request error
		return Promise.reject(error);
	}
);

// Add a response interceptor
fetchs.interceptors.response.use(
	function(response) {
		// Do something with response data
		return response;
	},
	function(error) {
		// Do something with response error
		return Promise.reject(error);
	}
);

Custom instance defaults

// Set config defaults when creating the instance
var instance = fetchs.create({
	origin: 'https://www.example.com'
});

//and use it
instance
	.get('/user?ID=12345')
	.then(function(response) {
		console.log(response);
	})
	.catch(function(error) {
		console.log(error);
	});