ajax多个接口的封装,如何使用jquery ajax方法封装及api文件

如何使用jquery ajax方法封装及api文件

发布时间：2020-07-16 14:39:53

来源：亿速云

阅读：213

作者：Leah

这篇文章将为大家详细讲解有关如何使用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();

});

关于如何使用jquery ajax方法封装及api文件就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。