axhr

XHR is configurable based on axios ⏲ 🚀

---

中文文档

Installing

# npm
npm install axhr axios --save
# yarn
yarn add axhr axios

config

xhr({
  url: '/add',
  type: 'GET',
  headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
  baseUrl: 'https://some-domain.com/api/',
  data: {},
  config: {
    ...others
  },
  cancelMsg: '',
  success: (res, response) => {},
  error: res => {},
  cancel: err => {},  
});

• url: url [required] is the server URL that will be used for the request
• type: type [required] is the request method to be used when making the request, default GET
• header: header are custom headers to be sent, default 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
• baseUrl: baseURL will be prepended to url unless url is absolute.
• data: data is the data to be sent as the request body
• success: Callback after successful request and xhr.success intercept returns true
• error: Callback after failed request or xhr.success intercept returns false
• cancel: Callback after cancel request
• cancelMsg: cancel request message
• config: refer to https://github.com/axios/axios#request-config
  • cancelToken：false, don't cancel request; can also set unique token
  • noRepeat: false, can repeat request, custom prop, cancelToken isn't false；if true cancel before pending request

API

global definition method

xhr.defaultConfig

Global configuration, will merge to config

xhr.defaultConfig = {
  timeout: 10000,
  withCredentials: true // cookie
};

xhr.baseData

Global basic params, will merge to config.data

xhr.baseData = {
  t: Date.now() // IE catch
};

xhr.baseUrl

global baseUrl, Priority less than xhr.getUrl

xhr.getUrl

Implementing dynamic url, @params{config}

const apiBaseUrl = '/oapi';

xhr.getUrl = option => {
  if (option.baseUrl) {
    return {
      baseUrl: option.baseUrl,
      url: option.url
    };
  }
  return {
    baseUrl: apiBaseUrl,
    url: option.url
  };
};

xhr.success

Implement dynamic interception configuration when the request is successful

You can do some global logic

xhr.success = res => boolean

xhr.error

Implement dynamic interception configuration when the request is failed

xhr.error = (err, [isCancel]) => {}

xhr.cancelXhr

cancel request

xhr.cancelXhr("cancel request");

xhr.before

Execute before request，

xhr.before = () => {}

xhr.end

Execute end request

xhr.end = (res) => {}

example

import xhr from 'axhr';
import {message} from 'antd';
import auth from './auth';
import {apiBaseUrl} from './config';

let apiUrl = '';

xhr.getUrl = option => {
  if (option.baseUrl) {
    apiUrl = option.baseUrl + option.url;
    return {
      baseUrl: option.baseUrl,
      url: option.url
    };
  }
  apiUrl = apiBaseUrl + option.url;
  return {
    baseUrl: apiBaseUrl,
    url: option.url
  };
};

xhr.baseData = {
  t: Date.now()
};

xhr.defaultConfig = {
  timeout: 10000,
  withCredentials: true
};

xhr.success = (res, response) => {
  let isSuccess = true;

  if (typeof res !== 'object') {
    message.error(apiUrl + ': response data should be JSON');
    isSuccess = false;
  }
  switch (res.code + '') {
    case '000000':
      isSuccess = true;
      break;
    case '100006':
      auth.toOutLogin();
      isSuccess = false;
      break;
    case '100013':
      auth.toOutLogin();
      isSuccess = false;
      break;
    default:
      message.error(res.message || 'unknown error');
      isSuccess = false;
  }

  return isSuccess;
};

xhr.error = (err) => {
  message.error('The server strayed！');
};