ES6---Promise 4: 更多案例

2024-08-06 16:55:00

var p1 = new Promise((resolve, reject) => {
    });var p2 = p1.then(
        result => { },
        error => { }
    );//可以看到p1和p2都是promise，还可以看到状态    console.log(p1);
    console.log(p2);

console:

var p1 = new Promise((resolve, reject) => {
        resolve('成功了');
    });var p2 = p1.then(
        result => {
            console.log('2');
        },
        error => { }
    );

    console.log(p1);
    console.log(p2);

console:

var p1 = new Promise((resolve, reject) => {
        resolve('成功了');//运行在主线程    }).then(
        result => {
            console.log('2');//运行在微任务列表        },
        error => { }
    );
    console.log('abc');

console:

//传值的问题var p1 = new Promise((resolve, reject) => {
        resolve('成功了');//运行在主线程    }).then(
        result => {
            console.log('微任务接收数据:' + result);//运行在微任务列表        },
        error => { }
    );
    console.log('abc');

console:

var p1 = new Promise((resolve, reject) => {
        resolve('成功了');//运行在主线程    }).then(
        result => {
            console.log('微任务接收数据:' + result);//运行在微任务列表        },
        error => { }
    ).then(
        result => {
            console.log(3);
        },
        error => { }
    )
    console.log('abc');

console:

var p1 = new Promise((resolve, reject) => {
        resolve('成功了');//运行在主线程    }).then(
        result => {
            console.log('微任务接收数据:' + result);//运行在微任务列表        },
        error => { }
    ).then(
        result => {
            console.log(3 + result);
        },
        error => { }
    )
    console.log('abc');

console:

7. then怎么传值？答案用return来传值给下面的then

new Promise((resolve, reject) => {
        resolve('成功了');//运行在主线程    }).then(
        result => {
            console.log('微任务接收数据:' + result);//运行在微任务列表//这里怎么传值？答案用returnreturn 'bbbb';
        },
        error => { }
    ).then(
        result => {
            console.log(3 + result);//3bbbb        },
        error => { }
    )
    console.log('abc');

console:

8. 搞懂return

new Promise((resolve, reject) => {
        resolve('成功了');//运行在主线程    }).then(//箭头函数，右边只有一行代码，可以去掉{}，但是要把return和分号也去掉，如下result => 'bbbb'//今天的其中一个任务是搞定return        ,
        error => { }
    ).then(
        result => {
            console.log(3 + result);//运行在微任务列表        },
        error => { }
    )
    console.log('abc');

console:

9. return的类型

resolve('成功了');//运行在主线程    }).then(//箭头函数，右边只有一行代码，可以去掉{}，但是要把return和分号也去掉，如下//return的类型：字符串，数字，Symbolresult => Symbol()//今天的其中一个任务是搞定return, error => { }
    ).then(
        result => {
            console.log(3);
            console.log(result);//运行在微任务列表        },
        error => { }
    )
    console.log('abc');

console:

10. return{} 返回对象，注意写法

new Promise((resolve, reject) => {
        resolve('成功了');//运行在主线程    }).then(//箭头函数，右边只有一行代码，可以去掉{}，但是要把return和分号也去掉，如下//return的类型：字符串，数字，Symbol, Boolean,对象{}result => {//代码行1//代码行2return {}
        }
        , error => { }
    ).then(
        result => {
            console.log(3);
            console.log(result);//运行在微任务列表        },
        error => { }
    )
    console.log('abc');

console:

11.

new Promise((resolve, reject) => {
        resolve('成功了');//运行在主线程    }).then(//return的类型：字符串，数字，Symbol, Boolean,对象{}result => {//代码行1//代码行2return { name: '9999' }
        }
        , error => { }
    ).then(
        result => {
            console.log(3);
            console.log(result);//运行在微任务列表        },
        error => { }
    )
    console.log('abc');

console:

12.

// Promise是什么类型？对象var u = new Promise(() => { });
    console.log(typeof u);//object

console:

13. 和14联系在一起对比，观察，可以有助于理解

new Promise((resolve, reject) => {
        resolve('成功了');//运行在主线程    }).then(//return的类型：字符串, 数字, Symbol, Boolean, 对象object包含promiseresult => {//在then里面，return一个全新的promise//没有thenreturn new Promise((resolve, reject) => { });//必须等这个then干完活，才会继续执行下个then//而这里return的promise就一直在pending状态，等promise发通知        }
        , error => { }
    ).then(
        result => {
            console.log(3);
            console.log(result);//运行在微任务列表        },
        error => { }
    )
    console.log('abc');

console:

14. 这里then里面return了一个promise并且发出了通知，所以下一个then可以执行

new Promise((resolve, reject) => {
        resolve('成功了');//运行在主线程    }).then(//return的类型：字符串, 数字, Symbol, Boolean, 对象object包含promiseresult => {//在then里面，return一个全新的promise//没有thenreturn new Promise((resolve, reject) => {
                resolve('成功啦2')
            });        }
        , error => { }
    ).then(
        result => {
            console.log(3);
            console.log(result);//运行在微任务列表        },
        error => { }
    )
    console.log('abc');

console:

15. return underfined类型

new Promise((resolve, reject) => {
        resolve('成功了');//运行在主线程    }).then(//return的类型：字符串, 数字, Symbol, Boolean, 对象object包含promise, underfinedresult => {return undefined;
        }
        , error => { }
    ).then(
        result => {
            console.log(3);
            console.log(result);//运行在微任务列表        },
        error => { }
    )
    console.log('abc');

console:

16. return null

new Promise((resolve, reject) => {
        resolve('成功了');//运行在主线程    }).then(//return的类型：字符串, 数字, Symbol, Boolean, 对象object包含promise, underfined, nullresult => {return null;
        }
        , error => { }
    ).then(
        result => {
            console.log(3);
            console.log(result);//运行在微任务列表        },
        error => { }
    )
    console.log('abc');

console:

以上：

return的类型：字符串, 数字, Symbol, Boolean, 对象object包含promise, underfined, null
return 所有类型都可以（7种），但是如果object类型为promise的话，需要等待的

17.

new Promise((resolve, reject) => {
        resolve('成功了');//运行在主线程    }).then(
        result => {return new Promise((resolve, reject) => {
                resolve('ok');//这个通知如果不发出，下一个then不会执行
            });
        }
        , error => { }
    ).then(
        result => {
            console.log(3);
            console.log(result);//运行在微任务列表        },
        error => { }
    )
    console.log('abc');

console:

18.

new Promise((resolve, reject) => {
        resolve('成功了');//运行在主线程    }).then(//return的类型：字符串, 数字, Symbol, Boolean, 对象object包含promise, underfined, null//return 所有类型都可以（7种），但是如果object类型为promise的话，需要等待的result => {return new Promise((resolve, reject) => {
                reject('not ok');
            });
        }
        , error => { }
    ).then(
        result => {
            console.log(3);
            console.log(result);//运行在微任务列表        },
        error => {
            console.log(4);
            console.log(error);
        }
    )

console:

19.

new Promise((resolve, reject) => {
        resolve('成功了');//运行在主线程    }).then(//return的类型：字符串, 数字, Symbol, Boolean, 对象object包含promise, underfined, null//return 所有类型都可以（7种），但是如果object类型为promise的话，需要等待的result => {return new Promise((resolve, reject) => {
                resolve('ok22')
            });
        }
        , error => { }
    ).then(
        result => {
            console.log(3);
            console.log(result);//运行在微任务列表        },
        error => { }
    )
    console.log('abc');

console:

20. return的类型，其中，{}对象object包含promise或者含有then的object

new Promise((resolve, reject) => {
        resolve('成功了');//运行在主线程    }).then(//return的类型：字符串, 数字, Symbol, Boolean, underfined, null//             {}对象object包含promise或者含有then的object//return 所有类型都可以（7种），但是如果object类型为promise的话，需要等待的result => {return { then: '123' };
        }
        , error => { }
    ).then(
        result => {
            console.log(3);
            console.log(result);//运行在微任务列表        },
        error => { }
    )
    console.log('abc');

console:

21.

new Promise((resolve, reject) => {
        resolve('成功了');//运行在主线程    }).then(//return的类型：字符串, 数字, Symbol, Boolean, underfined, null//             {}对象object包含promise或者含有then的object//return 所有类型都可以（7种），但是如果object类型为promise的话，需要等待的result => {return {
                then: function (resolve, reject) { }//此时查看console打印结果，会发现没有执行//因为这个then没当成了promise，在等发通知            };
        }
        , error => { }
    ).then(
        result => {
            console.log(3);
            console.log(result);//运行在微任务列表        },
        error => { }
    )
    console.log('abc');

console:

22.

new Promise((resolve, reject) => {
        resolve('成功了');//运行在主线程    }).then(//return的类型：字符串, 数字, Symbol, Boolean, underfined, null//             {}对象object包含promise或者含有then的object//return 所有类型都可以（7种），但是如果object类型为promise的话，需要等待的result => {return {//当函数名和对象的key一样的时候，可以把function和key、冒号删掉                then(resolve, reject) {
                    resolve('人');
                }
            };
        }
        , error => { }
    ).then(
        result => {
            console.log(3);
            console.log(result);//运行在微任务列表        },
        error => { }
    )
    console.log('abc');

console:

23.

new Promise((resolve, reject) => {
        resolve('成功了');//运行在主线程    }).then(//return的类型：字符串, 数字, Symbol, Boolean, underfined, null//             {}对象object包含promise或者含有then的object//return 所有类型都可以（7种），但是如果object类型为promise的话，需要等待的result => {return {//当函数名和对象的key一样的时候，可以把function和key、冒号删掉                then(resolve, reject) {
                    reject('鬼');
                }
            };
        }
        , error => { }
    ).then(
        result => {
            console.log(3);
            console.log(result);//运行在微任务列表        },
        error => { }
    )
    console.log('abc');

console:

24. class也是个对象

class Myclass {
        hi() { }
    }var kk = new Myclass();
    console.log(kk);

console:

25.

class Myclass {
        hi() { }
    }var kk = new Myclass();
    console.log(typeof kk);

console:

26. 用到then(resolve, reject){}实际就是个promise了

class Myclass {
        then(resolve, reject) { }
    }var kk = new Myclass();
    console.log(kk);

console:

27.

new Promise((resolve, reject) => {
        resolve('成功了');//运行在主线程    }).then(//return的类型：字符串, 数字, Symbol, Boolean, underfined, null//             {}对象object包含promise或者含有then的object(class)//return 所有类型都可以（7种），但是如果object类型为promise的话，需要等待的result => {
            class MyClass {
                then(resolve, reject) {
                    resolve('ok2')
                }
            }return new MyClass();
        }
        , error => { }
    ).then(
        result => {
            console.log(3);
            console.log(result);//运行在微任务列表        },
        error => { }
    )
    console.log('abc');

console:

以上更新：

return的类型：字符串, 数字, Symbol, Boolean, underfined, null
{}对象object包含promise或者含有then的object(class)

28. 实际经常封装成一个命名函数，可以重复使用

<script src="./download.js"></script>
<script type="text/javascript">console.log(downloadData());</script>

console:

29.

<script src="./download.js"></script>
<script type="text/javascript">console.log(downloadData());</script>

console:

30.

console:

31.

<script src="./download.js"></script>
<script type="text/javascript">downloadData().then(
        result => {
            COV19(result).then(
                peopleCount => {
                    console.log('确诊人数为:' + peopleCount);
                }
            )
        }
    );</script>

console:

32. 显示在页面

<script src="./download.js"></script><div id="aa"></div><script type="text/javascript">downloadData().then(
        result => {
            COV19(result).then(
                peopleCount => {
                    document.getElementById("aa").innerText= '确诊人数为:' + peopleCount;
                }
            )
        }
    );</script>

console:

33.

<script src="./download.js"></script><div id="aa"></div><script type="text/javascript">downloadData().then(
        result => {
            COV19(result).then(
                peopleCount => {
                    document.getElementById("aa").innerText= '确诊人数为:' + peopleCount;
                }
            )
        }
    );</script>

console:

2秒后

34.

<script src="./download.js"></script><div id="aa"></div><script type="text/javascript">downloadData().then(
        result => {
            COV19(result).then(
                peopleCount => {
                    document.getElementById("aa").innerText= '确诊人数为:' + peopleCount;
                }
            )
        }
    );
    document.getElementById("aa").innerText = 'loading...'</script>

console:

loading后

35.

<body><div id="mydiv"><div>....</div></div></body><script type="text/javascript">//JS单线程，多任务【微任务队列，宏任务队列】new Promise((resolve, reject) => {
        document.getElementById('mydiv').innerHTML += '<div>按下开关洗衣服</div>';
    })
    document.getElementById('mydiv').innerHTML += '<div>去学习</div>';</script>

console:

36.

<script type="text/javascript">//JS单线程，多任务【微任务队列，宏任务队列】new Promise((resolve, reject) => {//走30分钟        document.getElementById('mydiv').innerHTML += '<div>按下开关洗衣服</div>';
        setTimeout(() => {
            resolve('洗完了')
        }, 3000);

    }).then(result => {
        console.log('洗完了');
        document.getElementById('mydiv').innerHTML += '<div>晾衣服</div>';
    });
    document.getElementById('mydiv').innerHTML += '<div>去学习</div>';</script>

console:

3秒后通知

37.

<script type="text/javascript">//JS单线程，多任务【微任务队列，宏任务队列】new Promise((resolve, reject) => {//走30分钟        document.getElementById('mydiv').innerHTML += '<div>按下开关洗衣服</div>';
        setTimeout(() => {
            resolve('洗完了');

        }, 3000);

    }).then(result => {
        console.log('洗完了');
        document.getElementById('mydiv').innerHTML += '<div>晾衣服</div>';return {
            then(resolve, reject) {
                setTimeout(() => {
                    resolve('衣服干了');
                    console.log('衣服干了');
                }, 3000);
            }
        }
    }).then((result) => {
        document.getElementById('mydiv').innerHTML += '<div>收衣服</div>';
    });
    document.getElementById('mydiv').innerHTML += '<div>去学习</div>';</script>

console:

以上，一个人洗衣服，收衣服的过程，模拟JS单线程，多任务的功能

关于javascript中的promise的用法和注意事项

一.promise描述 promise是javascript中标准的内置对象,用于表示一个异步操作的最终状态(是失败还是成功完成)及其结果值.它让你能够把异步操作最终成功或者失败的原因和响应的处理程序 ...
异步编程之Promise

一.Promise 1. .then 和.catch · resolved 状态的Promise 会回调后面的第一个.then · rejected 状态的Promise 会回调后面的第一个.catc ...
Event Loop

文章 console.log('1'); setTimeout(function() { console.log('2'); process.nextTick(function() { console ...
promise的常用情况

因为js是单线程的,所以一旦代码中有报错,就不会执行下面的了,如下333就未打印 console.log(111) throw Error(222) console.log(333) 好像与promi ...
ES6---async, await, promise 综合例子

ES6---async, await, promise 综合例子 new Promise(主线程代码).then(成功微任务, 失败微任务); sync---替代promise await---替代t ...
Promis.then()

Promis.then()
ES6语法之异步编程-Promise

Promise 分解异步操作,避免回调地狱 //1.promise //分解异步操作,避免回调地狱 function testMise(value) { //resolve成功后回调 //reject ...
13.Promise

Promise介绍 Promise是ES6引入的异步编程的新解决方案.语法上Promise是一个构造函数,用来封装异步操作并可以获取其成功或失败的结果. Promise构造函数:Promise(exc ...
【案例集合】父亲节，除了杜蕾斯，你还可以爱更多

都说母爱如水.父爱如山,如此分工是历史遗留问题,说母亲是"慈母手中线,游子身上衣"."十月胎恩重,三生报答轻",说父亲却是"子不教.父之过" ...
「案例」阳光城·广西：创新让城市拥有更多想象，与光同频，共瞰南宁

地产全案 167篇原创内容公众号竹蜻蜓,可能是大家小时候都耍过的小玩意,竟被用来贯穿一场发布会炒作,个中创意如何延展,想必你也像小哥一样充满了疑问.这是第一次分享品牌发布会案例,很有启发意义,接下 ...
案例丨医疗行业-为什么不要工资，我们的医生反而挣得更多？

张医生,这台手术麻烦做一下在忙,让李医生做吧! 李医生,这台手术您有时间做吗? 没空,你问问王医生吧! 算了,还是我自己来吧...... 兰州惠正口腔医院是兰州专业的口腔诊疗机构,拥有资历深厚.临床 ...
腾讯全资收购搜狗的背后，内容营销如何给创业者带来更多的赚钱机会！（附LED灯珠行业案例思路）

腾讯全资收购搜狗的背后,内容营销如何给创业者带来更多的赚钱机会!(附LED灯珠行业案例思路) 今天,一则消息,腾讯全资收购搜狗,交易价格为每股9美元,给互联网带来一条劲爆新闻. 很多人看到这个消息,知 ...
20个乳腺癌国外专家会诊案例公开：让更多人了解前沿方案！

据国家癌症中心发布的2019年全国癌症报告显示,我国女性乳腺癌每年发病约为30.4万人,位于全国女性恶性肿瘤发病率的头一位. 来源:健康界也正因此,乳腺癌已经成为诸多女性挥之不去的一道"梦 ...
联合体EPC模式研讨系列：联合体工程总承包失败的案例更多, 其游戏规则还处在探索阶段！/浅谈联合体项...

有个选项总是无法回避!论联合体工程总承包模式的现实浪漫主义--联合体EPC模式研讨系列之一导读在国内,强强联合.战略联盟.合作伙伴等等的这类名词经常出现在各种媒体以及领导们宣贯的战略规划中,其中不 ...
轻奢风格装修案例，空间增添更多奢华之感，

[轻奢风格装修案例]150㎡轻奢的家,在深色的胡桃木木饰面主调下,搭配精致.细腻的家具元素,让空间呈现出神秘但又不冷清的色彩.首先映入眼帘的,是简约而素雅的客厅,大面积的胡桃木格栅和白色硬包墙作为主 ...
复养能成功但失败案例更多！短期生猪产能无法恢复、猪价续涨！

猪价涨跌 2019年08月06日,据中国养猪网猪价系统监测全国外三元均价为10.00元/斤,猪价较昨日相比上涨了0.01元/斤,较上周上涨0.26元/斤.今日生猪价格涨幅维持在0.02-0.27元/斤 ...

ES6---Promise 4: 更多案例

相关推荐