jq回调地狱

于 2022-04-29 14:15:51 发布
阅读量394 收藏
点赞数 7
文章标签： javascript ajax 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr___YangYang/article/details/124495017
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <script src="JQuery.js"></script>
    <script>
        // 拿到a的数据后才去请求b，拿到b的数据后再去请求c 这就叫回调地狱
        // 像这种回调嵌套回调的写法就叫回调地狱
        // $.ajax({
        //     method: "get",
        //     url: "data.json",
        //     success(res) {
        //         console.log(res);
        //         $.ajax({
        //             method: "get",
        //             url: "data2.json",
        //             success(res) {
        //                 console.log(res);
        //                 $.ajax({
        //                     method: "get",
        //                     url: "data3.json",
        //                     success(res) {
        //                         console.log(res);
        //                     },
        //                 });
        //             },
        //         });
        //     },
        // });

        //jq的ajax本身就是一个promise对象
        // $.ajax({
        //         method: "get",
        //         url: "data.json",
        //     })
        //     .then((res) => {
        //         console.log(res);
        //         return $.ajax({
        //             method: "get",
        //             url: "data2.json",
        //         });
        //     })
        //     .then((res) => {
        //         console.log(res);
        //         return $.ajax({
        //             method: "get",
        //             url: "data3.json",
        //         });
        //     })
        //     .then((res) => {
        //         console.log(res);
        //         console.log("最终拿到的", res);
        //     });
        //用promise 的方法处理回调地狱

        // es7的时候出了一个async和await 是解决回调地狱的终极方案

        async function getdata() {
            let data = await $.ajax({
                method: "get",
                url: "data.json"
            });
            console.log(data);

            let data2 = await $.ajax({
                method: "get",
                url: "data2.json"
            });
            console.log(data2);
            let data3 = await $.ajax({
                method: "get",
                url: "data3.json",
            });
            console.log(data3);
            return data3;
        }
        // async函数return的永远是一个promise对象
        getdata().then((res) => {
            console.log(res);
        });


        // function handler() {
        //     let data = ""
        //     $.ajax({
        //         method: "get",
        //         url: "data.json",
        //         success(res) {
        //             data = res;
        //         }
        //     });
        //     console.log(data);
        // }
        // handler()


        function* getdata2() {
            yield $.ajax({
                method: "get",
                url: "data.json"
            })
            yield $.ajax({
                method: "get",
                url: "data2.json"
            })
            yield $.ajax({
                method: "get",
                url: "data3.json"
            })
        }

        let obj = getdata2();
        obj.next().value.then(res => {
                console.log(res);
                return obj.next().value
            }).then(res => {
                console.log(res);
                return obj.next().value
            }).then(res => {
                console.log("generator拿到的数据", res);
            })
            //用generator处理回调地狱 但是这种写法一般不用因为async已经取代了generotor
    </script>
</body>

</html>

</html>

-Schuyler
关注
  • 7
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
JQ Callback 回调函数
06-10
NULL 博文链接：https://onestopweb.iteye.com/blog/2337794
回调地狱和Promise使用（详解）
01-08
回调地狱和Promise 1.回调函数的作用及回调地狱 先说一下什么是回调函数的作用 1.1在js中我们会使用很多的异步方法，例如定时器，ajax还有node中的fs 1.2 很多时候我们需要拿到这个异步函数里面的一些数据，但是通过一般的手段我们并不能拿到（js单线程）这个跟他的执行机制有关，我们可以通过回调函数的方式拿到这个数据例如： add = (x,y,callback) => { setTimeout(function(){ const ret = x + y; callback(ret) },1000) }) add(1,2,(ret)=>
jquery扩展
幸福有多远
11-06 114
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Co...
jQuery扩展
aohaoxing3762的博客
06-21 131
* jQuery.fn.extend()与jQuery.extend() jQuery.fn如何扩展。 jQuery插件 $.fn(object)与$.extend(object) jQuery提供了两个方法帮助开发插件 $.extend(object);扩展jQuery类本身； $.fn.extend(object);扩展jQuery对象； 1、扩展...
jquery扩展方法
Golden的专栏
10-26 188
jquery插件的开发包括两种：一种是类级别的插件开发，即给jquery添加新的全局函数，相当于给jquery类本身添加方法。 jquery的全局函数就是属于jquery命名空间的函数，另一种是对象级别的插件开发，即给jQuery对象添加方法。 也可以理解为另外两种方式，一种是jQuery本身的扩展方法，另一种是jQuery所选对象的扩展方法。 1.jQuery.extend(Object)...
读jQuery之二（两种扩展）
weixin_34365635的博客
06-03 68
上一篇分析了jQuery对象的组成，这篇分析下它的extend方法。如下 jQuery.extend = jQuery.fn.extend = function() { ... }; 我们可以用$.extend去扩展自定义的对象，如 var myself = {name:jack}; $.extend(myself, {setName: function(n)...
jQuery回调函数的定义及用法实例
10-25
主要介绍了jQuery回调函数的定义及用法,以实例形式详细分析了回调函数的原理与实现技巧,具有一定的参考借鉴价值,需要的朋友可以参考下
jquery 回调操作实例分析【回调成功与回调失败的情况】
01-19
本文实例分析了jquery 回调操作。分享给大家供大家参考，具体如下： jquery 回调成功的情况 node2:/django/mysite/static/Js/Public#cat displaytestxhr.js function B (response,status,xhr){ console.log...
jquery中的ajax如何返回结果而非回调方式即为同顺序执行
12-10
所以必须采用回调的方式来实现。这种方案效率更高。 如果非要返回结果的话，将ajax 中的参数 async 改为 false，即为同顺序执行，如下实现，即可返回到结果。 不过在非必要的情况下，不推荐此种做法 代码如下: ...
JQuery扩展
ksx2333的博客
04-04 160
本文主要介绍了jquery如何自己编写添加扩展方法，自调用函数，多库并存的情况下如何处理，onload和ready的区别等。
jQuery的扩展
bboyjoe的博客
08-11 852
jQuery的扩展方法有两种方式: 1)jQuery本身的扩展方法：$.extend; 2)jQuery所选对象的方法：$.fn.extend; 第二种更符合使用jQuery的习惯。 示例： jQuery扩展 myJQuery.js的代码： /*第一种扩展方式*/ $.myjq=function(){ alert(
jQuery之扩展
qq_33105223的博客
04-25 346
jQuery是目前最流行的JavaScript轻量库。jQuery好用在哪里：封装了多种操作dom的方法、支持链式操作、兼容性好。但是jQuery内置的方法不可能满足用户的所有需求，要实现自定义方法可以扩展jQuery。（一）编写jQuery Plugin（插件）给jQuery对象$.fn扩展一个新方法：jQuery.fn = $.fn = jQuery.prototype   // jQuery...
jQuery库扩展
Freya_yyy的博客
06-11 520
最近练习一个小应用，体会到jQuery库的强大和方便，以及将一些js代码封装为jQuery插件的便利。所以简单总结一下jQuery库扩展的相关要素。常见jQuery插件的形式如下：//为了有更好的兼容性，开始处有个分号 ;(function($){ //此处将$作为匿名函数的形参 /*这里放置代码，可以使用$作为jQuery的缩写别名*/ })(jQuery); // 这里将...
jQuery 扩展插件
qq_45677671的博客
03-16 510
文章目录jQuery 多库共存jQuery 插件扩展扩展给自己本身扩展给元素集合jQuery 常用插件表单验证插件（jquery-validation）颜色动画插件（jquery.color）图片懒加载插件（jquery.lazyload）laydate时间插件layer弹出层插件 jQuery 多库共存 jquery 的开头都是 $ 获取时 jQuery。如果在页面引入别人的插件，别人的插件写的也是要用 $ 或 \jQuery 开头的，那么会和引入的 jquery 产生冲突。jquery 早已预料到了这
jquery 扩展方法
伯恩大帝的博客
07-19 1026
/*jquery 扩展方法 */ !function($){ //form表单格式化 $.fn.extend({ formToJson: function(){ var json = {}; this.serializeArray().forEach(function(item){ js...
回调地狱
赳赳万里鲲
12-10 559
异步回调地狱，通常的表现为： JS函数从上至下的层层嵌套，前面函数是后面函数的所需参数。 $.ajax({ type:'post', url:'/index/jquerydata', dataType:'json', success:(res)=&amp;amp;gt;{ if (res.success) { ...
jq axios 等待回调
最新发布
04-25
jq和axios都是常用的JavaScript库用于处理异步请求和处理返回的数据。 jq是一个轻量级的JavaScript库，主要用于处理JSON数据。...在jq和axios中，你可以通过提供回调函数来处理异步请求的返回结果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值