@tanshenghu/web-utils/lib/request/xmlhttprequest.js

web公共方法

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

exports.default = ajax;

var _common = require('../common');

var _common2 = _interopRequireDefault(_common);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var noop = function noop() {};

/**
 * 提供一个简易版 ajax 方法，防止一些特殊情况需要
 * @param {string} options.url - 接口路径url
 * @param {string} options.type - 接口请求方式
 * @param {string} options.name - 字段名称
 * @param {object} options.data - 接口入参数据
 * @param {object} options.withCredentials - 是否带上cookie待授权字段
 * @param {object} options.headers - 请求头报文
 * @param {function} options.success - 接口请求成功
 * @param {function} options.error - 接口请求失败
 * @param {function} options.complete - 接口请求完成
 */
function ajax(options) {
  var url = options.url,
      _options$type = options.type,
      type = _options$type === undefined ? 'get' : _options$type,
      name = options.name,
      data = options.data,
      withCredentials = options.withCredentials,
      _options$headers = options.headers,
      headers = _options$headers === undefined ? {} : _options$headers,
      _options$success = options.success,
      success = _options$success === undefined ? noop : _options$success,
      _options$error = options.error,
      error = _options$error === undefined ? noop : _options$error,
      _options$complete = options.complete,
      complete = _options$complete === undefined ? noop : _options$complete;


  type = type.toUpperCase();
  if (type === 'GET' && data) {
    url += (url.indexOf('?') > 0 ? '&' : '?') + new URLSearchParams(data).toString();
  }

  var xhr = new XMLHttpRequest();
  xhr.withCredentials = withCredentials;
  xhr.open(type, url);
  setHeaders(headers);
  xhr.onreadystatechange = function (response) {
    /**
      0：请求未初始化，还没有调用 open()。
      1：请求已经建立，但是还没有发送，还没有调用 send()。
      2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
      3：请求在处理中；通常响应中已有部分数据可用了，没有全部完成。
      4：响应已完成；您可以获取并使用服务器的响应了。
     */
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        var resModel = response.target.responseText;
        try {
          resModel = JSON.parse(response.target.responseText);
        } catch (err) {}
        success(resModel);
        complete();
      } else {
        error(xhr);
        complete();
      }
    }
  };
  xhr.send(type === 'GET' ? null : cf());

  function cf() {
    var formData = new FormData();
    if (headers['content-type'] && headers['content-type'].indexOf('application/json') === 0) {
      formData = JSON.stringify(data);
    } else if (_common2.default.isType(data, 'object')) {
      Object.keys(data).forEach(function (v) {
        formData.append(v, data[v]);
      });
    } else if (_common2.default.isType(data, 'formData')) {
      formData = data;
    } else if (name) {
      formData.append(name, data);
    } else {
      formData = data;
    }
    return formData;
  }

  function setHeaders(headers) {
    Object.keys(headers).forEach(function (v) {
      xhr.setRequestHeader(v, headers[v]);
    });
  }

  return xhr;
}

/**
 * 考虑到有时候需要promise带来的方便 所以另外提供一个promise包裹函数
 */
ajax.wrapper = function (options) {
  return new Promise(function (success, error) {
    return ajax(_extends({}, options, {
      success: success,
      error: error
    }));
  });
};
module.exports = exports['default'];