|
|
@@ -0,0 +1,135 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+ <head>
|
|
|
+ <meta charset="UTF-8" />
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
+ <title>Document</title>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <script>
|
|
|
+ /**
|
|
|
+ * Promise
|
|
|
+ * JS 是弱语言类型 单线程语言
|
|
|
+ * 执行方向：自上而下
|
|
|
+ * 同步
|
|
|
+ *
|
|
|
+ */
|
|
|
+ // var a = 1;
|
|
|
+ // console.log(a);
|
|
|
+ // var b = 2;
|
|
|
+ // console.log(b);
|
|
|
+
|
|
|
+ /**
|
|
|
+ * js的evenLoop 事件循环机制
|
|
|
+ * 同步(先) 异步(后)
|
|
|
+ * 异步：
|
|
|
+ * (宏任务)setTimeOut setInterVal
|
|
|
+ * （微任务）Promise
|
|
|
+ */
|
|
|
+ //回调：将一个函数（A）作为实参传给另一个函数(B)，并被函数(B)所调用.(calBack)
|
|
|
+ const test = () => {
|
|
|
+ document.write("你好啊");
|
|
|
+ };
|
|
|
+
|
|
|
+ setTimeout(test, 1000);
|
|
|
+ //回调地域
|
|
|
+ // setInterval(() => {
|
|
|
+ // console.log(333);
|
|
|
+ // setInterval(() => {
|
|
|
+ // console.log(222);
|
|
|
+ // setInterval(() => {
|
|
|
+ // console.log(111);
|
|
|
+ // }, 1000);
|
|
|
+ // }, 1000);
|
|
|
+ // }, 1000);
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Promise:
|
|
|
+ * 因为同步无法执行 所以使用异步表达出同步的流程
|
|
|
+ * 三种状态:
|
|
|
+ * pending(进行中)
|
|
|
+ * reject (已失败)
|
|
|
+ * resolve/fulfilled(已成功)
|
|
|
+ */
|
|
|
+
|
|
|
+ //第一种
|
|
|
+ // new Promise((resolve, reject) => {
|
|
|
+ // //resolve 成功的状态
|
|
|
+ // //reject 失败的状态
|
|
|
+ // setTimeout(() => {
|
|
|
+ // console.log(1);
|
|
|
+ // }, 2000);
|
|
|
+ // // 只走第一个调用的方法
|
|
|
+ // reject();
|
|
|
+ // resolve();
|
|
|
+ // })
|
|
|
+ // .then((res) => {
|
|
|
+ // // 成功
|
|
|
+ // console.log("2");
|
|
|
+ // })
|
|
|
+ // .catch((res) => {
|
|
|
+ // // 失败
|
|
|
+ // console.log("3");
|
|
|
+ // });
|
|
|
+
|
|
|
+ //第二种写法
|
|
|
+ // let book = new Promise((resolve, reject) => {
|
|
|
+ // setTimeout(() => {
|
|
|
+ // console.log(5);
|
|
|
+ // resolve();
|
|
|
+ // }, 1000);
|
|
|
+ // });
|
|
|
+
|
|
|
+ // book.then((res) => {
|
|
|
+ // console.log("11");
|
|
|
+ // });
|
|
|
+
|
|
|
+ // book.catch((res) => {
|
|
|
+ // console.log("22");
|
|
|
+ // });
|
|
|
+
|
|
|
+ // var newPromise = new Promise((resolve, reject) => {
|
|
|
+ // reject();
|
|
|
+ // });
|
|
|
+ // newPromise.then((res) => {
|
|
|
+ // console.log("44");
|
|
|
+ // });
|
|
|
+ // newPromise.catch((res) => {
|
|
|
+ // console.log("66");
|
|
|
+ // });
|
|
|
+
|
|
|
+ let p1 = new Promise((resolve, reject) => {
|
|
|
+ console.log("111");
|
|
|
+ reject();
|
|
|
+ });
|
|
|
+ let p2 = new Promise((resolve, reject) => {
|
|
|
+ console.log("222");
|
|
|
+ reject();
|
|
|
+ });
|
|
|
+ let p3 = new Promise((resolve, reject) => {
|
|
|
+ console.log("333");
|
|
|
+ reject();
|
|
|
+ });
|
|
|
+
|
|
|
+ // Promise.all() 判断多个Promise
|
|
|
+ // 传入的都为真 才为真
|
|
|
+ Promise.all([p1, p2, p3])
|
|
|
+ .then((res) => {
|
|
|
+ console.log("成功了");
|
|
|
+ })
|
|
|
+ .catch((res) => {
|
|
|
+ console.log("失败了");
|
|
|
+ });
|
|
|
+
|
|
|
+ //Promise.race() 判断多个Promise
|
|
|
+ //Promise 传入的有一个为真则为真 都为假时才为假
|
|
|
+ Promise.race([p1, p2, p3])
|
|
|
+ .then((res) => {
|
|
|
+ console.log("成功了1");
|
|
|
+ })
|
|
|
+ .catch((res) => {
|
|
|
+ console.log("失败了1");
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|
e