欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

ES6---Promise 4: 更多案例

程序员文章站 2022-07-10 20:57:29
ES6 Promise 4: 更多案例 1. var p1 = new Promise((resolve, reject) => { }); var p2 = p1.then( result => { }, error => { } ); //可以看到p1和p2都是promise，还可以看到状态 c ......

es6---promise 4: 更多案例

 

1. 

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

 

console:

ES6---Promise 4: 更多案例

 

 

2. 

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

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

 

console:

ES6---Promise 4: 更多案例

 

 

3. 

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

 

console:

ES6---Promise 4: 更多案例

 

 

4. 

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

 

console:

ES6---Promise 4: 更多案例

 

 

5.

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

 

console:

ES6---Promise 4: 更多案例

 

 6. 

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

 

console:

ES6---Promise 4: 更多案例

 

 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:

ES6---Promise 4: 更多案例

 

8. 搞懂return

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

 

console:

ES6---Promise 4: 更多案例

 

 

9. return的类型

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

 

console:

ES6---Promise 4: 更多案例

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:

ES6---Promise 4: 更多案例

 

 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:

ES6---Promise 4: 更多案例

 

 12.

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

 

console:

ES6---Promise 4: 更多案例

 

 

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:

ES6---Promise 4: 更多案例

 

 

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:

ES6---Promise 4: 更多案例

 

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:

ES6---Promise 4: 更多案例

 

 

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:

ES6---Promise 4: 更多案例

 

 

以上：

  •         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:

ES6---Promise 4: 更多案例

 

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:

ES6---Promise 4: 更多案例

 

 

 

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:

ES6---Promise 4: 更多案例

 

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:

ES6---Promise 4: 更多案例

 

 

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:

ES6---Promise 4: 更多案例

 

 

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:

ES6---Promise 4: 更多案例

 

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:

 

ES6---Promise 4: 更多案例

 24. class也是个对象

    class myclass {
        hi() { }
    }

    var kk = new myclass();
    console.log(kk);

 

console:

ES6---Promise 4: 更多案例

 

25.

    class myclass {
        hi() { }
    }

    var kk = new myclass();
    console.log(typeof kk);

 

console:

ES6---Promise 4: 更多案例

 

 

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

    class myclass {
        then(resolve, reject) { }
    }

    var kk = new myclass();
    console.log(kk);

 

console:

ES6---Promise 4: 更多案例

 

 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:

ES6---Promise 4: 更多案例

 

 以上更新：

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

 

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

ES6---Promise 4: 更多案例

 

 

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

 

console:

ES6---Promise 4: 更多案例

 

 

29.

ES6---Promise 4: 更多案例

 

 

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

 

console:

ES6---Promise 4: 更多案例

ES6---Promise 4: 更多案例

 

 

30.

ES6---Promise 4: 更多案例

 

 

console:

ES6---Promise 4: 更多案例

 

 

31.

ES6---Promise 4: 更多案例

 

 

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

 

console:

ES6---Promise 4: 更多案例

 

 

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:

ES6---Promise 4: 更多案例

 

33.

ES6---Promise 4: 更多案例

 

 

 

<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:

ES6---Promise 4: 更多案例

 

 

 2秒后

ES6---Promise 4: 更多案例

 

 

 

 

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:

ES6---Promise 4: 更多案例

 

 

 loading后

ES6---Promise 4: 更多案例

 

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:

ES6---Promise 4: 更多案例

 

 

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:

ES6---Promise 4: 更多案例

 

 3秒后通知

ES6---Promise 4: 更多案例

 

 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:

ES6---Promise 4: 更多案例

 

 

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

 

上一篇： PHP 语法引用使用及实现

下一篇： Linux服务器打包项目后，fastdfs配置文件找不到

推荐阅读