Code examples of jquery ajax method encapsulation and api file design

本篇文章给大家带来的内容是关于jquery ajax方法封装及api文件设计的代码示例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

封装 jquery ajax 文件

/**
 * 封装 jquery ajax 
 * 例如:
 * ajaxRequest.ajax.triggerService(
 *   'apiCommand', [命令数据] )
 *   .then(successCallback, failureCallback);
 * );
 */
var JSON2 = require('LibsDir/json2');
var URL = '../AjaxHandler.aspx?r=';

// 用来记录每次请求的唯一标识
var requestIdentifier = {};

// 唯一标识生成方法
function generateGUID() {
  var d = new Date().getTime();
  if (typeof performance !== 'undefined' && typeof performance.now === 'function') {
    d += performance.now();
  }
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
    var r = (d + Math.random() * 16) % 16 | 0;
    d = Math.floor(d / 16);
    return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
  });
}

// 模块主体
var ajaxRequest = ajaxRequest || {};
(function ($) {
  if (!$) {
    throw 'jquery获取失败!';
  }

  ajaxRequest.json = JSON2;
  ajaxRequest.ajax = function (userOptions, serviceName, requestId) {
    userOptions = userOptions || {};
    var options = $.extend({}, ajaxRequest.ajax.defaultOpts, userOptions);
    options.success = undefined;
    options.error = undefined;
    return $.Deferred(function ($dfd) {
      $.ajax(options)
        .done(function (result, textStatus, jqXHR) {
          if (requestId === requestIdentifier[serviceName]) {
            // 比对请求id, 保证返回结果的正确性 (重复请求有可能会带来返回结果不可靠的问题)
            ajaxRequest.ajax.handleResponse(result, $dfd, jqXHR, userOptions, serviceName, requestId);
          }
        })
        .fail(function (jqXHR, textStatus, errorThrown) {
          if (requestId === requestIdentifier[serviceName]) {
            // jqXHR.status
            $dfd.reject.apply(this, arguments);
            userOptions.error.apply(this, arguments);
          }
        });
    });
  };

  $.extend(ajaxRequest.ajax, {
    // $.ajax() 的默认设置
    defaultOpts: {
      // url: '../AjaxSecureHandler.aspx,
      dataType: 'json',
      type: 'POST',
      contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
    },

    handleResponse: function (result, $dfd, jqXHR, userOptions, serviceName, requestId) {
      if (!result) {
        $dfd && $dfd.reject(jqXHR, 'error response format!');
        userOptions.error(jqXHR, 'error response format!');
        return;
      }

      // 服务器已经错误
      if (result.ErrorCode != '200') {
        $dfd && $dfd.reject(jqXHR, result.ErrorMessage);
        userOptions.error(jqXHR, result);
        return;
      }

      if (result.Data) {
        // 将大于2^53的数字(16位以上)包裹双引号, 避免溢出
        var jsonStr = result.Data.replace(/(:\s*)(\d{16,})(\s*,|\s*})/g, '$1"$2"$3');
        var resultData = ajaxRequest.json.parse(jsonStr);
        $dfd.resolve(resultData);
        userOptions.success && userOptions.success(resultData);
      } else {
        $dfd.resolve();
        userOptions.success && userOptions.success();
      }
    },

    buildServiceRequest: function (serviceName, input, userSuccess, userError, ajaxParams) {
      // 这里是根据后台要求构建的
      var requestData = {
        MethodAlias: serviceName, // 方法名
        Parameter: input // 传递的参数
      };

      var request = $.extend({}, ajaxParams, {
        // 这里要对传递的 JSON 字符串参数数据使用 escape 方法进行编码
        // 'data=' 是根据项目约定增加的，与 contentType 相对应
        data: 'data=' + escape(ajaxRequest.json.stringify(requestData)),
        success: userSuccess,
        error: function (jqXHR, textStatus, errorThrown) {
          // 这里是在请求出错的时候做一个统一处理, 输出方法名和错误对象
          console.log(serviceName, jqXHR);
          if (userError && (typeof userError === 'function')) {
            userError(jqXHR, textStatus, errorThrown);
          }
        }
      });

      return request;
    },

    // 构建参数对象, 生成唯一标识, 触发请求
    triggerService: function (serviceName, input, success, error, ajaxParams) {
      var request = ajaxRequest.ajax.buildServiceRequest(serviceName, input, success, error, ajaxParams);
      // 生成此次 ajax 请求唯一标识
      var requestId = requestIdentifier[serviceName] = generateGUID();
      request.url = URL + requestId;
      return ajaxRequest.ajax(request, serviceName, requestId);
    }
  });

})(jQuery);

module.exports = ajaxRequest;

api 文件示例

/**
 * api 接口定义
 * 这个示例中假设后台服务要求接受数组形式的参数
 */
var ajaxRequest = require('../common/ajax-request'); // ajax 封装
var JSON2 = require('LibsDir/json2');

// 请求数据方法
var apiService = (function () {
  var request = {};
  // 产品列表 (参数需要进一步处理的情况)
  request.getProductListData = function (conditionObj) {
    return ajaxRequest.ajax.triggerService('SearchProductList', [JSON2.stringify(conditionObj)]);
  };

  // 搜索热词 (参数为空的情况)
  request.getHotWords = function () {
    return ajaxRequest.ajax.triggerService('GetSearchHotKeys', []);
  };

  // 获取用户配置
  request.getUserConfig = function () {
    return ajaxRequest.ajax.triggerService('GetUserConfig', []);
  };

  // 设置用户配置
  request.setUserConfig = function (params) {
    return ajaxRequest.ajax.triggerService('SetUserConfig', [params]);
  };

  return request;
})();

module.exports = apiService;

业务代码中调用 api 接口

// 综合搜索热词查询
apiService.getHotWords()
  .then(function (result) {
    if (result.length > 0) {
      // 成功回调
      // handleResult(result);
    }
  })
  .fail(function (err) {
    console.log('GetSearchHotKeys: ', err);
    // 失败回调
    handleResult();
  });

本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的JavaScript视频教程栏目！

The above is the detailed content of Code examples of jquery ajax method encapsulation and api file design. For more information, please follow other related articles on the PHP Chinese website!