README_zhCN.md

Mini XHR

非常轻量级的HTTP请求库。

语言: En | 中文

---

安装

# 通过 npm 安装
$ npm install @cycjimmy/mini-xhr --save

# 或者通过 yarn 安装
$ yarn add @cycjimmy/mini-xhr

使用

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

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

miniXhr.get(url [, settings])
  .then((data) => {
    // 数据处理
  })
  .catch((err) => {
    // 错误处理
  });

miniXhr支持以下几种请求方法：

miniXhr.get(url, [,settings])

• url: [必选][String] 用于请求的服务器URL.
• settings: [可选][Object] 支持以下设定.
  • params: [可选][Object] 与请求一起发送的URL参数(以键值对形式设定). 默认为 {}.
  • responseType: [可选][String] 服务器响应的数据类型. 可选以下值:
    • 'arraybuffer'
    • 'document'
    • 'json'(默认)
    • 'text'
    • 'stream'
    • 'blob'
  • headers: [可选][Object] 自定义要发送的请求头(以键值对形式设定). 默认为 {}.
  • contentType: [可选][String] 内容类型. 默认为 'application/json; charset=UTF-8'.
  • timeout: [可选][Number] 请求超时前的毫秒数. 设定值为0表示没有不进行超时设定. 默认为 0.
  • timeoutCB: [可选][Function] 自定义超时回调函数. 默认为 null.

miniXhr.post(url, [,settings])

• url: [必选][String] 用于请求的服务器URL.
• settings: [可选][Object] 支持以下设定.
  • params: [可选][Object] 与请求一起发送的URL参数(以键值对形式设定). 默认为 {}.
  • data: [可选][Object|FormData|String] 作为请求主体一起发送的数据. 默认为 {}.
  • dataType: [可选][String] 发送数据的类型. 可选以下值:
    • 'json'(默认)
    • 'formData'
    • 'text'
  • responseType: [可选][String] 服务器响应的数据类型. 可选以下值:
    • 'arraybuffer'
    • 'document'
    • 'json'(默认)
    • 'text'
    • 'stream'
    • 'blob'
  • headers: [可选][Object] 自定义要发送的请求头(以键值对形式设定). 默认为 {}.
  • contentType: [可选][String] 内容类型. 默认为 'application/json; charset=UTF-8'.
  • timeout: [可选][Number] 请求超时前的毫秒数. 设定值为0表示没有不进行超时设定. 默认为 0.
  • timeoutCB: [可选][Function] 自定义超时回调函数. 默认为 null.

miniXhr.jsonp(url, [,settings])

• url: [必选][String] 用于请求的服务器URL.
• settings: [可选][Object] 支持以下设定.
  • params: [可选][Object] 与请求一起发送的URL参数(以键值对形式设定). 默认为 {}.
  • timeout: [可选][Number] 请求超时前的毫秒数. 设定值为0表示没有不进行超时设定. 默认为 5000.

错误处理

GET 或者 POST

miniXhr.get('/getData')
  .then((data) => {
    // 数据处理
  })
  .catch((err) => {
    console.log(err.statusText);  // 响应状态文本
    console.log(err.status);      // HTTP状态码
  });

JSONP

miniXhr.jsonp('/getData')
  .then((data) => {
    // 数据处理
  })
  .catch((err) => {
    console.log(err);  // 返回 'error' 或者 'timeout' (字符串)
  });

在浏览器中使用

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

CDN

使用CDN，请在HTML中添加:

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