/xhjsonapi

a jsonrpc client for node and browser and react native

Primary LanguageJavaScriptMIT LicenseMIT

xhjsonapi

a jsonrpc client for node/browser/react native

超轻量级的 json-rpc 2.0 协议实现，基于新的标准 fetch api 来实现，另外为了方便使用集成了另外一个库 frisbee，实现了常见的 http 操作

Travis build status Code Climate Test Coverage Dependency Status devDependency Status

环境设置

react native 环境下

  1. 安装依赖项

    

    2. 



npm install zhangxhbeta/xhjsonapi --save
```
2. 然后获取 XHJsonApi 对象


```bash



import XHJsonApi from 'xhjsonapi';
```
3. 查看例子开始使用


如果想在 Node.js 环境执行


与 react native 环境基本类似，区别在于 Node 环境缺少 fetch 和 es6-promise，需要安装


    

  1. 

    安装依赖项
    

    

    2. 



npm install es6-promise --save
npm install isomorphic-fetch --save
npm install zhangxhbeta/xhjsonapi --save
```
2. 然后获取 XHJsonApi 对象


```bash



import 'isomorphic-fetch';


import es6promise from 'es6-promise';
es6promise.polyfill();


import XHJsonApi from 'xhjsonapi';
```
3. 查看例子开始使用


传统浏览器环境


    

  1. 

    下载必要的脚本
    

    es6-promise
    

    fetch
    

    frisbee
    

    xhjsonapi
    

    如果要支持ie8的话，请将 fetch 换成 es5-shim + fetch-ie8
    

    2. 

  2. 

    引入js脚本
    

    

    3. 



<!doctype html>

  
    
      
      
      <title></title>
      
      
      

  <!-- 解决 ie8 下面 es5 的问题 -->
  <!--[if lt IE 9]>
    <script src="scripts/es5-shim.js"></script>
  <![endif]-->
  <!-- 引入 promise 库` -->
  <script src="scripts/es6-promise.js"></script>
  <!-- 引入 fetch 库 -->
  <script src="scripts/fetch.js"></script>
  <!-- 引入 frisbee -->
  <script src="scripts/frisbee.js"></script>
  <!-- 引入 xhjsonapi -->
  <script src="scripts/xhjsonapi.js"></script>
</head>
<body>
</body>


  
	```
3. 接着看[例子](#使用例子)

使用例子


methods 是一个服务端暴漏的方法列表，提供这个列表后会将这些方法按照模块都生成出来，客户端就可以直接调用这些方法


// 初始化 api（仅设置一次即可）
var api = new XHJsonApi({
  baseURI: 'localhost:8080/app',
  rpcPath: 'json-rpc',
  methods: [
    {
      name: 'news',
      remoteName: 'newsInterface',
      methods: ['getHotNews', 'getLatestNews']
    },
    {
      name: 'otherModule',
      methods: ['foo', 'bar']
    }
  ],
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  }
});

// 在需要用的地方调用 api
// 将发送报文 {"jsonrpc":"2.0","method":"newsInterface.getHotNews","id":1,"params":[]}
api.news.getHotNews().then(result) {
  console.log(result);
}.catch(e) {
  console.log(e);
}

// 如果需要传参数可以这样
// 将发送报文 {"jsonrpc":"2.0","method":"otherModule.foo","id":1,"params":["the","best",1]}
api.otherModule.foo('the', 'best', 1).then(result) {
  console.log(result);
}.catch(e) {
  console.log(e);
}


REST 接口


    

  • List of available HTTP methods:

      

    • api.get(path, options, callback) - GET
      • 

    • api.head(path, options, callback) - HEAD (现在暂时不能用)
      • 

    • api.post(path, options, callback) - POST
      • 

    • api.put(path, options, callback) - PUT
      • 

    • api.del(path, options, callback) - DELETE
      • 

    • api.options(path, options, callback) - OPTIONS (现在暂时不能用)
      • 

    • api.patch(path, options, callback) - PATCH
      • 

    

    • 



具体用法，参见 frisbee 的文档