From a22077b849d95f154324c8c516765ab729dd23ed Mon Sep 17 00:00:00 2001
From: kangkai <kangk26@foxmail.com>
Date: Fri, 09 Apr 2021 16:04:39 +0800
Subject: [PATCH] 代码整理
---
Promise.html | 129 ++++++++++++++++++++++++++++---------------
1 files changed, 84 insertions(+), 45 deletions(-)
diff --git a/Promise.html b/Promise.html
index a8fe8fe..008df6e 100644
--- a/Promise.html
+++ b/Promise.html
@@ -1,54 +1,93 @@
<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");
- return new Promise((resolve,reject) => {
- reject();
- })
- };
- function failureCallBack1(){
- console.log("失败1");
- };
- function successCallBack2(){
- console.log("成功2");
- };
- function failureCallBack2(){
- console.log("失败2");
- };
+ 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('setTimeout执行完毕');
+ //.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);
- });
-
- const wait2 = ()=> new Promise((resolve,reject)=> {
- resolve();
- setTimeout(() => {
- console.log('setTimeout执行完毕');
- }, 1000);
- });
-
- //Promise约定与链式调用
- //1.在本轮 事件循环 运行完成之前，回调函数是不会被调用的。以下是个错误示例，resolve回调方法要在setTimeout执行完后在调用。
- var use = wait2().then(successCallBack,failureCallBack);
- //2.即使异步操作已经完成（成功或失败），在这之后通过 then() 添加的回调函数也会被调用。
- var use2 = wait();
- setTimeout(() => {
- use.then(successCallBack,failureCallBack);
- }, 2000);
- //3.通过多次调用 then() 可以添加多个回调函数，它们会按照插入顺序进行执行。一般情况下then会返回一个默认的Promise对象。
- var use3 = wait().then(successCallBack,failureCallBack).then(successCallBack1,failureCallBack1).then(successCallBack2,failureCallBack2);
+ },10);
+ });
+ setTimeout(()=>{
+ promise5.then(() => {
+ console.log("promise5 即使异步操作已经完成（成功或失败），在这之后通过 then() 添加的回调函数也会被调用");
+ });
+ },1000);
+ //3.
</script>
</head>
<body>
--
Gitblit v1.9.3