用回调函数设计网络请求工具函数

322 阅读2分钟

回调函数

当一个函数作为参数传入另一个函数中并且它不会立即被调用执行,只有当满足一定条件后该函数才可以被调用执行,这个函数就是回调函数。

前端的AJAX和JSONP是异步网络请求,无法预知这个异步的请求在什么时候完成,所以为了能够获取异步请求的数据就需要使用回调函数,当异步任务执行成功之后得到了业务数据就把数据传给回调函数使用。

用回调函数设计网络请求工具函数思想

回调函数是业务函数会作为一个参数传入工具函数,而网络请求工具函数就是一个封装了AJAX请求技术的函数,这个工具函数的任务就是用于执行异步的网络请求,当任务执行完毕时将请求的数据传给回调函数这个时候就调用传入的回调函数才去执行回调函数中的业务代码。

function ajax_mine(url,cb){
    //url是需要请求数据的网址,cb是传入的写业务代码的函数
    let xhr=new XMLHttpRequest()||new ActiveXObject("MicrosoftXMLHTTP");
    xhr.open("GET",url,true);
    xhr.send();
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4&&xhr.status==200){
            //将请求的数据传给回调函数并调用回调函数执行回调函数中的业务代码
            cb(xhr.responseText);
        }
    };
};
<body>
    <button onclick="fn()">点击我请求数据</button>
    <script src="./ajax_mine.js"></script>
    <script>
        function fn(){
            ajax_mine("/AOTU",(str)=>{
                //写业务的函数,在请求得到了数据时就会调用
                console.log(str);
            })
        }
    </script>
</body>

ajax_mine("/AOTU",cb),ajax_mine函数就是一个简单的封装了AJAX请求的工具函数。在ajax_mine内部,去用AJAX请求传入的第一个参数"/AOTU"对应网址,当请求返回了数据时,就把数据传给cb函数使用(也就是此时调用cb)。

用jQuery框架进行AJAX技术网络请求

<body>
    <button onclick="fn()">点击我请求数据</button>
    <script src="./jquery.3.4.js"></script>
    <script>
        function fn(){
            $.get("/AOTU",(data)=>{
                console.log(data);
            });
        };
    </script>
 
</body>
</html>

$.get(url,data,callback(response,status,xhr))

url:必需,请求的网址,data(可选):发送到服务器的参数。response:结果数据,status:请求的状态,xhr:XMLHttpRequest对象。如果需要请求出错时的回调函数就使用$.ajax方法。

$.ajax(options)

只有一个参数是配置对象,返回值为原生的XMLHttpRequest对象

$.ajax({
url:'http://xxxx',
data:'count=25&maxid=2937193',
type:'GET',
success:function(data){  },
error:function(){}
})

error:function,请求失败时的回调, success:function,请求成功的回调。