封装ajax请求接口

简介: 封装ajax请求接口
//ajax请求封装
/**
 *
 * @param host 访问的url 
 * @param method  访问方式
 * @param data  data数据
 * @param success 成功回调
 * @param error 成功回调
 * @param complete 
 */
function ajaxRequest(param) {
    var defaultFun = function (result) {
        console.log(result);
    }
    let host = param.host; // 请求地址
    let searchDomin = new RegExp('http|https');
    let url = searchDomin.test(host) ? host : window.location.origin + '/' + host; //真实请求地址
    let method = param.method; //请求方法
    let data = param.data; //请求参数
    let success = param.hasOwnProperty("success") ?  param.success : defaultFun; //成功回调
    let error = param.hasOwnProperty("error") ?  param.error : defaultFun; //失败回调
    let complete= param.hasOwnProperty("complete") ?  param.complete : defaultFun; //失败回调
    $.ajax({
        url: url,
        dataType: 'json',
        type: method,
        data: data,
        success: function (result) {
            return success(result);
        },
        error: function (xhr, type, errorThrown) {
            //异常处理;
            // if (adminDebug) {
            console.log('%crequest fail!', ';color:#dd4b39');
            console.log();
            console.log("type:" + type + ",readyState:" + xhr.readyState + ",status:" + xhr.status);
            console.log("url:" + url);
            console.log("data:");
            console.log(data);
            // layer.close(loadT);
            // }
            layer.msg('访问错误,代码' + xhr.status, {
                icon: 2,
                scrollbar: false,
            });
            return error(xhr);
        },
        complete:function(xhr, type, errorThrown) {
           return complete(type);
        }
    });
}

使用示例

      ajaxRequest({
                'host': "{:url('index/news/list')}",
                'method': 'post',
                'data': {
                    'page': page,
                    'limit': limit,
                    'type': type
                },
                success: function (result) {
                    console.log('正确返回信息');
                },
                error: function (data) {
                    console.log('错误返回信息');
                }
            });
相关文章
|
4月前
|
XML JSON 前端开发
深入了解JavaScript中的AJAX和HTTP请求
深入了解JavaScript中的AJAX和HTTP请求
|
3月前
|
XML JSON 前端开发
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
58 1
|
4月前
|
前端开发 JavaScript 数据安全/隐私保护
ajax请求中的reponseType和withCredetials分别是啥?
ajax请求中的reponseType和withCredetials分别是啥?
ajax请求中的reponseType和withCredetials分别是啥?
|
4月前
|
资源调度 前端开发 JavaScript
Vue3中如何使用axios进行Ajax请求?
Vue3中如何使用axios进行Ajax请求?
113 1
|
1月前
|
前端开发
AJAX发送请求方法封装和请求函数底层刨析以及axios二次封装
AJAX发送请求方法封装和请求函数底层刨析以及axios二次封装
|
3月前
|
XML JSON 前端开发
|
3月前
|
前端开发 JavaScript
|
3月前
|
JSON 前端开发 安全
浏览器跨域限制:为什么浏览器不能跨域发送Ajax请求?
浏览器跨域限制:为什么浏览器不能跨域发送Ajax请求?
37 0
|
3月前
|
JSON 前端开发 JavaScript
JavaScript学习 -- ajax方法的POST请求
JavaScript学习 -- ajax方法的POST请求
29 0
|
3月前
|
XML 前端开发 JavaScript
AJAX如何向服务器发送请求?
AJAX如何向服务器发送请求?
44 0