封装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('错误返回信息');
                }
            });
相关文章
|
3天前
|
JSON JavaScript 前端开发
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
38 22
|
3天前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
29 18
|
3天前
|
前端开发 JavaScript Java
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
26 4
|
13天前
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
36 1
|
1月前
|
前端开发
React技术栈-react使用的Ajax请求库实战案例
这篇文章介绍了在React应用中使用Axios和Fetch库进行Ajax请求的实战案例,展示了如何通过这些库发送GET和POST请求,并处理响应和错误。
40 10
React技术栈-react使用的Ajax请求库实战案例
|
1月前
|
前端开发
React技术栈-react使用的Ajax请求库用户搜索案例
这篇文章展示了一个React技术栈中使用Ajax请求库(如axios)进行用户搜索的实战案例,包括React组件的结构、状态管理以及如何通过Ajax请求获取并展示GitHub用户数据。
27 7
React技术栈-react使用的Ajax请求库用户搜索案例
|
29天前
|
JSON JavaScript 前端开发
Jquery常用操作汇总,dom操作,ajax请求
本文汇总了jQuery的一些常用操作,包括DOM元素的选择、添加、移除,表单操作,以及如何使用jQuery发送Ajax请求,涵盖了GET、POST请求和文件上传等常见场景。
|
1月前
|
JSON 资源调度 JavaScript
Vue框架中Ajax请求的实现方式:使用axios库或fetch API
选择 `axios`还是 `fetch`取决于项目需求和个人偏好。`axios`提供了更丰富的API和更灵活的错误处理方式,适用于需要复杂请求配置的场景。而 `fetch`作为现代浏览器的原生API,使用起来更为简洁,但在旧浏览器兼容性和某些高级特性上可能略显不足。无论选择哪种方式,它们都能有效地在Vue应用中实现Ajax请求的功能。
25 4
|
3月前
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第3天】前端开发中的异步基石:AJAX与Fetch。AJAX,使用XMLHttpRequest,处理跨域、回调地狱和错误处理。Fetch,基于Promise,简化请求,但需注意默认无跨域头和HTTP错误处理。两者各有优劣,理解其问题与解决策略,能提升前端应用的性能和用户体验。
117 24
|
3月前
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第9天】JavaScript进阶:AJAX与Fetch API对比。AJAX用于异步数据交换,XMLHttpRequest API复杂,依赖回调。Fetch API是现代、基于Promise的解决方案,简化请求处理。示例:`fetch('url').then(r => r.json()).then(data => console.log(data)).catch(err => console.error(err))`。注意点包括检查HTTP状态、错误处理、CORS、Cookie和超时。Fetch提高了异步代码的可读性,但需留意潜在问题。
87 0