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:

2.

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

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

console:

3.

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

console:

4.

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

console:

5.

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

console:

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:

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单线程,多任务的功能

(0)

相关推荐