zoukankan      html  css  js  c++  java
  • 再次封装ajax函数,统一入口

    根据API写网页的时候,每个页面都需要ajax请求,每次都写一大堆请求,配置什么的太麻烦,于是打算封装一个ajax函数,统一调用:
    开始时是使用return返回ajax,如下:

    function createAjax(ajaxrequire) {
     	_url = ajaxrequire._urls;
     	_dataType = ajaxrequire._dataType;
     	_async = ajaxrequire._async
     	_method = ajaxrequire._method;
     	_data = ajaxrequire._data;
     	_data.token = token;
     	_data.device = 'weixin';
    
        return $.ajax({
            url: _url,
            dataType: _dataType,
            cache: false,
            async: _async,
            type: _method,
            data: _data,
            timeout:10000,
            error:function(data){
            	mui.alert(data.msg);
            }
        });
    }
    

    在如下Ogoods变量中填好需要的参数内容,然后就可以直接调用了

    var Ogoods = {
    	_urls:'api地址',
    	_data:{ },
    	_method:'post',
    	_dataType:'json',
    	_async:false
    };
    var data = JSON.parse(createAjax(Ogoods).responseText);
    

    变量data中保存着ajax请求返回的数据,但是这个方法有个bug,就是不能使用异步,当 async为true时会报错,也不知道是不是只是我写的有问题,
    于是考虑着还能不能用其他方式实现,嗯,写个回调函数应该就行了,

    $packageAjax = function (ajaxrequire,callback) {
        _url = ajaxrequire._urls;
        _dataType = ajaxrequire._dataType;
        _async = ajaxrequire._async
        _method = ajaxrequire._method;
        _data = ajaxrequire._data;
        _data.token = token;
        _data.device = 'weixin';
    
        $.ajax({
            url: _url,
            dataType: _dataType,
            cache: false,
            async: true,
            type: _method,
            data: _data,
            timeout:10000,
            success:function(data){
                 callback(data);
            },
            error:function(data){
                mui.alert(data.msg);
            }
        });
    }
    

    调用:

    var Ogoods = {
    	_urls:'api地址',
    	_data:{ },
    	_method:'post',
    	_dataType:'json',
    	_async:true
    };
    $packageAjax(Ogoods,function(data){
        //执行操作
    })
    

    这样ajax设为异步就没什么问题了,并且也不必每次都写配置选项了,很简单,却也实用。

  • 相关阅读:
    怎么在Vue项目中使用Element组件
    vue-cli 基本使用
    C++ delete指针以后应赋值为NULL
    C++ noexcept异常说明及其使用
    Qt 设置comboBox里面的字体颜色
    Qt 获取可用串口
    Qt 寻找可用串口
    荧光显微镜简介
    荧光滤光片简介
    消色差、半复消色差、复消色差的区别
  • 原文地址:https://www.cnblogs.com/dxzg/p/7661412.html
Copyright © 2011-2022 走看看