From b15e9e58c26179395af6a714d70c3938ff4ff963 Mon Sep 17 00:00:00 2001
From: kangkai <kangk26@foxmail.com>
Date: Fri, 09 Apr 2021 16:13:21 +0800
Subject: [PATCH] 代码整理
---
Promise.html | 110 +++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 82 insertions(+), 28 deletions(-)
diff --git a/Promise.html b/Promise.html
index 43a81cc..a767f99 100644
--- a/Promise.html
+++ b/Promise.html
@@ -1,38 +1,92 @@
<html>
<head>
- <title>Promise</title>
+ <title>Promise</title>
<script type='text/javascript'>
- var ok = true;
- function successCallBack(){
- console.log("成功");
+ //1.链式回调 通过多次调用 then() 可以添加多个回调函数，它们会按照插入顺序进行执行。
+ const doSomething = () => new Promise((resolve,reject)=>{setTimeout(() => {
+ console.log("在setTimeout中做了些事");
+ reject();
+ }, 10);});
+ const successCallBack = () => {
+ console.log("成功的回调");
};
- function failureCallBack(){
- console.log("失败");
- };
- function successCallBack1(){
- console.log("成功1");
- };
- function failureCallBack1(){
- console.log("失败1");
- };
+ const successCallBack1 = () => new Promise((resolve,reject)=>{setTimeout(() => {
+ console.log("成功的回调1");
+ reject();
+ }, 10);});
+ const failureCallBack = () => {
+ console.log("失败的回调");
+ };
+ //返回Promise对象，输出"在setTimeout中做了些事"文本，但是没有执行reject回调。
+ const promise = doSomething();
+ //执行promise对象的reject回调failureCallBack()，输出“失败的回调”文本，返回promise2对象，由于failureCallBack()方法中没有手动创建Promise所以这里返回的是默认的Promise对象
+ const promise2 = promise.then(successCallBack,failureCallBack);
+ //执行promise2默认回调successCallBack(),返回默认对象promise3
+ const promise3 = promise2.then(successCallBack,failureCallBack);
+ //简写
+ doSomething().then(successCallBack,failureCallBack).then(successCallBack,failureCallBack);
+ //successCallBack1返回用户自己创建的Promise，并且指定了回调函数
+ doSomething().then(successCallBack,failureCallBack).then(successCallBack,failureCallBack).then(successCallBack1,failureCallBack).then(successCallBack,failureCallBack);
- const wait = ()=> new Promise((resolve,reject)=> {
- setTimeout(() => {
- console.log('setTimeout1执行完毕');
+ //.catch()、finally()
+ const promise4 = new Promise((resolve,reject)=>{setTimeout(() => {
+ console.log("promise4：在setTimeout中做了些事");
+ console.log("选择路径[A]");
+ resolve("路径：A0");
+ //reject("路径：A1");
+ },10)})
+ .then(resolvePara => new Promise((resolve2,reject2) => {
+ console.log("promise4 then1：成功的回调");
+ throw new Error("是错误哦");
+ console.log(resolvePara);
+ console.log("选择路径[B]");
+ resolve2(resolvePara + " B0");
+ //reject2(resolvePara + " B1");
+ }), rejectPara => new Promise((resolve2,reject2) => {
+ console.log("promise4 then1：失败的回调");
+ console.log(rejectPara);
+ console.log("选择路径[B]");
+ resolve2(resolvePara + " B0");
+ //reject2(resolvePara + " B1");
+ }))
+ .then(resolvePara => new Promise((resolve3,reject3) => {
+ console.log("promise4 then1 then2：成功的回调");
+ console.log(resolvePara);
+ console.log("选择路径[C]");
+ resolve3(resolvePara + " C0");
+ //reject3(resolvePara + " C1");
+ }), rejectPara => new Promise((resolve3,reject3) => {
+ console.log("promise4 then1 then2：失败的回调");
+ console.log(rejectPara);
+ console.log("选择路径[C]");
+ resolve3(resolvePara + " C0");
+ //reject3(resolvePara + " C1");
+ }))
+ .catch(rejectPara => {
+ console.log("promise4 catch：异常的回调");
+ console.log(rejectPara);
+ })
+ .finally(() => {
+ console.log("promise4 finally：执行完毕");
+ })
+ //通常，一遇到异常抛出，浏览器就会顺着 Promise 链寻找下一个 onRejected 失败回调函数或者由 .catch() 指定的回调函数。
+ //finally不管成功失败都会执行内部代码，不接受参数。
+
+
+ //2.在本轮 事件循环 运行完成之前，回调函数是不会被调用的。
+ console.log("在本轮 事件循环 运行完成之前，回调函数是不会被调用的，你看我是最先执行的");
+ //3.即使异步操作已经完成（成功或失败），在这之后通过 then() 添加的回调函数也会被调用。
+ const promise5 = new Promise((resolve)=>{
+ setTimeout(()=>{
+ console.log("promise5 执行的异步操作");
resolve();
- }, 0);
- });
-
- //调用报错，wait2返回的是setTimeout方法。
- const wait1 = ()=> setTimeout(() => {
- console.log('setTimeout2执行完毕');
- return new Promise((resolve,reject)=> {
- resolve();
+ },10);
+ }).then(()=>{console.log("promise5 默认回调")});
+ setTimeout(()=>{
+ promise5.then(() => {
+ console.log("promise5 即使异步操作已经完成（成功或失败），在这之后通过 then() 添加的回调函数也会被调用");
});
- }, 0);
-
-
- var use = wait().then(successCallBack,failureCallBack).then(successCallBack1,failureCallBack1);
+ },1000);
</script>
</head>
<body>
--
Gitblit v1.9.3