ssyy-be-request

be-request

基于 axios,为中后台提供前后端通信方案
特点：

• 用法与 axios 保持一致
• 默认配置，开箱即用
• 支持自定义配置，扩展性好
• 集成测试，可测可控

快速开始

安装

$ npm install @luna/be-request --registry=http://registry.npm.lu-fe.com
or
$ npm add @luna/be-request --registry=http://registry.npm.lu-fe.com

配置 baseURL

// ice.config.js
module.exports = {
  chainWebpack: (config) => {
    config
      .plugin('DefinePlugin')
      .tap(([options]) => {
        return [{
          ...options,
          BASEURL: JSON.stringify('/bpi-be-cs-app/service'),
        }];
      });
   },
}

or

// index.js 程序入口
import request from '@luna/be-request';

request.setConfigs({
   baseURL: '/bpi-be-cs-app/service'
});

使用

// class 组件
import request from '@luna/be-request';

 onGetTableList = async () => {
    try {
      const {list} = await request.post('/customer/get-basic-info', { id: 12 }); // 不用加判断，只有code === '0' || code === '0000'才会到这里
      this.setState({tableList: list || [] })
    } catch (error) {
      error.hideError(); // 如果想用
    }
  }

or

// function 组件 hooks
import {useRequest} from '@luna/be-request';

const [tablelist, requestTablelist]  = useRequest({method: 'post', url: '/post'});

async function handleSubmit() {
    try {
      await requestTablelist();
    } catch (err) {
      console.error(err);
    }
}

关于配置

默认如下配置： 若系统存在差异，可以通过 setConfigs 方法配置，全局生效

const defaultConfigs = {
  baseURL: BASEURL || '/wmc-be-iadmin-app/service', // BASEURL webpack definePlugin 定义
  timeout: 6000,
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
    'X-LUFAX-LOCALE': locale.replace('-', '_'),
  },

  luRootUrl: window.mock || `${protocol}//${hostName}${port ? ':' : ''}${port}/api`, // fullUrl = luRootUrl(luRootUrlMedia) + baseURL + url
  luRootUrlMedia: window.mock || `${protocol}//${hostNameMedia}${port ? ':' : ''}${port}/wmc-be-media/forward`, // 共享层文件上传使用 dataType: 'media'
  // 当设置成false时，不会Message.error();
  // 当设置为true 时，会自动Message.error(data.res_msg),
  // 在请求的catch((error)=>{error.hideError()})不会执行Message.error(data.res_msg)
  isShowError: true,
  settleRequest: function settleRequest(config) { // 请求拦截处理
    const {
      luRootUrl, luRootUrlMedia, dataType, baseURL,
    } = config || {};
    let rootUrl = luRootUrl;
    if (config.data && utils.isFormData(config.data) && dataType === 'media') {
      rootUrl = luRootUrlMedia;
    }
    if (config.data && !utils.isFormData(config.data)) { // FormData
      config.data = `param=${JSON.stringify(serialize(config.data))}`;
    }
    config.baseURL = `${rootUrl}${baseURL}`; // axios fullUrl =  baseURL(axios) + url = rootUrl + baseURL + url; 当url 为绝对路径(://) fullUlr = url;
    return config;
  },
  validateStatus: function validateStatus(status) {
    return status >= 200 && status < 400;
  },
  validateCode: function validateCode(code) {
    return code === '0' || code === '0000';
  },
  settle401: (error) => { // status: 401 调用
    if (window.location.href.indexOf('/wmc-be-admin/wmc-web/login') === -1) {
      window.location.href = `/wmc-be-admin/wmc-web/login?fromUrl=${location.href}`;
    }
  },
  settleError: () => { // 不是 validateCode 时 调用

  },
};

具体应用

引用方式跟 axios 一样 参考：https://github.com/axios/axios http://www.axios-js.com/docs/

axios(config)
axios#request(config)
axios#get(url[, config])
axios#delete(url[, config])
axios#head(url[, config])
axios#options(url[, config])
axios#post(url[, data[, config]])
axios#put(url[, data[, config]])
axios#patch(url[, data[, config]])
axios#getUri([config])

使用案例：

一、axios.all(iterable) axios.all = function all(promises) { return Promise.all(promises); };

用例 // hooks all (class 组件一样)

  import request, {useRequest} from '@luna/be-request';

  const [tablelist, requestTablelist]  = useRequest({method: 'post', url: '/post', data: {name:'shangyy', age:18 }});
  const [panellist, requestPanellist]  = useRequest({method: 'post', url: '/post'});

  function handleSubmit() {
    request.all([
      requestTablelist(),
      requestPanellist(),
    ]).then(request.spread(function (list1, list2) {
      console.log(list1);
      console.log(list2);
    }));
  }

二、进度 progress

import request from '@luna/be-request';

request({
  method: 'post',
  url: 'xxx',
  data:{},
  onDownloadProgress: (data)=>{
     console.log('panellist onDownloadProgress',data);
  },
})

三、取消请求 // Expose Cancel & CancelToken axios.Cancel = require('./cancel/Cancel'); axios.CancelToken = require('./cancel/CancelToken'); axios.isCancel = require('./cancel/isCancel');

import React from 'react';
import { Search } from '@alifd/next';
import IceContainer from '@icedesign/container';
import request from '@luna/be-request';

class CancelRequest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      resData: null,
    };
    this.cancelToken = null;
  }

  onSearch = async (val) => {
    if(this.cancelToken){
      this.cancelToken.cancel();
    }
    this.cancelToken = request.CancelToken.source();
    try {
      const resData = await request.post('/post',{val},{cancelToken: this.cancelToken.token});
      this.setState({ resData });
    } catch (err) {
      // err.hideError();
      if(request.isCancel(err)){
        console.log('Request canceled', err.message); 
      }
      this.setState({ resData: null });
    }
  }

  ......

}

export default CancelRequest;

贡献 加入我们

npm run dev
源码在src 中 ，监听代码改动，打包更新到dist

npm run build
打包代码 dist； package.json main: "dist/index"

npm run test
集成jest单元测试, 修改代码写入对应的单元测试

实际项目测试
执行以下命令就可以通过link 的方式在 example 项目中测试，数据可以mock
npm link
cd example
npm install 安装example依赖
npm link @luna/be-request
npm start

提交代码
提交代码会进行 eslint ， commit lint 检测， 不通过则不能提交代码成功
git add filename
npm run cz
git push origin 分支