当前位置：移动技术网 > IT编程>开发语言>JavaScript > ES6---Promise 4: 更多案例

ES6---Promise 4: 更多案例

2020年04月15日 | 移动技术网IT编程 | 我要评论

es6---promise 4: 更多案例

    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);//运行在微任务列表
            //这里怎么传值？答案用return
            return '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的类型：字符串，数字，symbol
        result => 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
            //代码行2
            return {}
        }
        , 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
            //代码行2
            return { 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包含promise
        result => {
            //在then里面，return一个全新的promise
            //没有then
            return 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包含promise
        result => {
            //在then里面，return一个全新的promise
            //没有then
            return 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, underfined
        result => {
            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, null
        result => {
            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单线程，多任务的功能

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

Vue的响应式原理

受现代JavaScript 的限制 (以及废弃 Object.observe)，Vue不能检测到对象属性的添加或... [阅读全文]
PHP+txt聊天室

PHP+txt聊天室最近朋友发了一篇ASP+txt聊天室，非常不爽，我可是支持PHP的啊所以就发了这篇文章由于是... [阅读全文]
教你如何做一个优雅的Ecmascripter /转

看看这些被同事喷的JS代码风格你写过多少殷荣桧JavaScript今天现在写代码比以前好多了，代码的格式都有es... [阅读全文]
Javascript知识点总结（一）

一、走进javascript什么是JS？JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型... [阅读全文]
利用JS来判断输入是否为空以及重复密码是否相同

登录页面HTML如下：<div class="form-group has-feedback"> ... [阅读全文]
Vue入门基础——第一次笔记

Vue.js是什么？是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层... [阅读全文]
react+antd 给switch设置初始值变量

在react项目中表单内的switch功能，设置初始值为变量，所以需要在Form.Item 标签上添加一个val... [阅读全文]
@vue/cli 4.4.6解决跨域问题

在前端@vue/cli 4.4.6解决跨域问题，可以通过vue.config.js配置完成例如：需要访问http... [阅读全文]
offset、client、scroll (width,height、left,top、X,Y)

offsetWidth、clientWidth、scrollWidthdiv{ width: 20px; ... [阅读全文]
vue 性能优化：gzip编译压缩

安装：compression-webpack-pluginnpm install compression-web... [阅读全文]

网友评论


验证码：

ES6---Promise 4: 更多案例

2020年04月15日 | 移动技术网IT编程 | 我要评论