http-client-axios v1.0.2

axios对请求的封装和API接口管理

1. 进入项目的根目录，执行命令: npm install --save http-client-axios 下载到项目本地来。

使用方式如下： 比如我们现在脚手架会生成如下目录：

  |---- 项目文件夹
  | |--- src
  | | |--- server
  | | | |--- config.js    
  | | | |--- domain.js
  | | |--- js
  | | | |--- app.js  // 入口文件

src/server/config.js 是管理我们API的接口，比如使用方式如下：

/**
 * api 接口统一管理
*/
// 域名引入
import { namespace } from './domain';
import HttpClient from 'http-client-axios';

// 统一处理异常信息
const exception = {
  responseException(err) {
    console.log('返回异常', err);
  }
};
const httpClient = new HttpClient(exception);
const params = function(options) {
  const obj = {};
  for (const i in options) {
    obj[i] = options[i];
  }
  return obj;
};
// 请求
export const getWidget = options => httpClient.request({
  url: `${namespace}/api/widget`,
  params: params(options),
  method: 'post',
  // 请求拦截器回调函数
  requestCallBack(cfg) {
    console.log('xxxx--请求拦截器添加参数----');
    console.log(cfg);
    cfg.headers['Accept'] = 'application/x-www-form-urlencoded';
    cfg.headers.common['Authorization'] = 'AUTH_TOKEN';
  },
  // 响应拦截器回调函数
  responseCallBack(cfg) {
    // cfg.status = 404;
    console.log('---响应拦截器可以对返回的数据进行构造---', cfg);
    // cfg.data = {'xx': 11};
  }
});

src/server/domain.js 是配置我们的域名的，比如如下代码：

export const namespace = 'http://localhost:9000';
export const namespace2 = 'http://www.baidu.com';

src/js/app.js 页面的js调用我们的API如下方式：

import { getWidget } from '../server/config';

getWidget({
  'id': 'LocalNews',
  'ajax': 'json'
}).then((data) => {
  console.log('data---');
  console.log(data);
}).catch(err => {
  console.log(err);
});

了解更多 查看API文档，请点击这里