HtmlExample.git

 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>

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