README.zh-CN.md

fetch-s

基于 Fetch 的 http 请求库

特征

• 支持 Promise API
• 支持Timeout
• 自动转换请求数据
• 自动解析响应数据
• 拦截器
• 支持自定义实例默认值
• 支持JSONP(推荐使用CORS)

安装

使用 NPM:

$ npm install fetch-s

使用 CDN:

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

例子

执行一个 GET 请求

// 为给定 ID 的 user 创建请求
fetchs
	.get('/user?ID=12345')
	.then(function(response) {
		console.log(response);
	})
	.catch(function(error) {
		console.log(error);
	});

// 或者，上面的请求可以这样做
fetchs
	.get('/user', {
		data: {
			ID: 12345
		}
	})
	.then(function(response) {
		console.log(response);
	})
	.catch(function(error) {
		console.log(error);
	});

执行一个 POST 请求

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

执行一个 JSONP 请求

// 为给定 ID 的 user 创建请求
fetchs
	.jsonp('/user?ID=12345')
	.then(function(response) {
		console.log(response);
	})
	.catch(function(error) {
		console.log(error);
	});

// 或者，上面的请求可以这样做
fetchs
	.jsonp('/user', {
		data: {
			ID: 12345
		}
	})
	.then(function(response) {
		console.log(response);
	})
	.catch(function(error) {
		console.log(error);
	});

请求（Request）

这些是提出请求的可用配置选项。其中只有url是必需的。如果未指定请求方法，请求将默认为GET。

{
  //请求类型
  method: 'GET', // default

  //`url` 是请求路径
  //如果你是一个相对路径，它将与“origin”结合形成一个完整的路径
  url:'',

  //`data` 是请求的参数
  data:{
	id: 1
  },

  // `responseType` 用来指示服务器将响应的数据类型，`fetch-s`会根据`responseType`类型自动对response进行简析格式化
  // 配置选项包括： 'arrayBuffer', 'blob', 'formData', 'text', 'json'
  dataType: 'json',

  //`origin` 是请求的基础路径（url为绝对路径时会忽略此配置）
  origin: '',

  //`mode` 是请求模型 ("same-origin"、"no-cors"、"cors")
  mode: 'cors', // default

  //是否携带cookie等凭证信息，默认携带
  credentials: 'include',// default

  //`timeout` 是指定请求超时的毫秒数
  timeout: 30000, // default

  // `headers` 是服务器请求的标头
  headers: {}
}

响应（Response）

请求的响应包含以下信息。

{
  // `data` 是服务器提供的响应数据
  data: {},

  // `config` 是请求时携带的配置信息
  config: {},

  // `status` 是来自服务器响应的HTTP状态码
  status: 200,

  // `statusText` 是来自服务器响应的HTTP状态消息
  statusText: 'OK',

  //`ok`是一个布尔值，说明响应是否成功（成功的状态码范围为200-299）。
  ok: true,

  //`redirect` 是确定请求是否具有重定向
  redirected: false,

  // `headers` 是服务器的响应头
  headers: {},

  // `body` 是服务器的响应体
  body: ReadableStream
}

拦截器

在请求或响应被 then 或 catch 处理前拦截它们。

// 添加一个请求拦截器
fetchs.interceptors.request.use(
	function(config) {
		// 在发送请求之前做些什么
		return config;
	},
	function(error) {
		// 对请求错误做些什么
		return Promise.reject(error);
	}
);

// 添加一个响应拦截器
fetchs.interceptors.response.use(
	function(response) {
		// 对响应数据做点什么
		return response;
	},
	function(error) {
		// 对响应错误做点什么
		return Promise.reject(error);
	}
);

自定义实例默认值

// 在创建实例时设置配置默认值
var instance = fetchs.create({
	origin: 'https://www.example.com'
});

//使用新的实例
instance
	.get('/user?ID=12345')
	.then(function(response) {
		console.log(response);
	})
	.catch(function(error) {
		console.log(error);
	});