promise

HTML5 拖放/index.html

@@ -113,4 +113,52 @@ <h2>拖放（Drag 和 drop）</h2>
     </script>
 </body>
 
-</html>
+</html>
+script sta
+async1 start
+async2 start  遇到settimeout 加入到宏任务 
+new promise
+script end 
+promise1
+promise2
+async2 end
+async1 end'
+settimeout
+<script>
+  // 在 chrome 浏览器中执行
+console.log('script start') 
+async function async1() {
+    console.log('async1 start')
+    await async2()
+    console.log('async1 end')
+}
+async function async2() {
+    console.log('async2 start')
+    return Promise.resolve().then(()=>{
+      console.log('async2 end')
+    })
+}
+/* 这个函数没加 async 关键字，运行结果会不一致
+function async2() {
+    console.log('async2 start')
+    return Promise.resolve().then(()=>{
+      console.log('async2 end')
+    })
+}
+*/
+async1()
+setTimeout(function() {
+    console.log('setTimeout')
+}, 0)
+new Promise(resolve => {
+    console.log('new promise')
+    resolve()
+})
+.then(function() {
+    console.log('promise1')
+})
+.then(function() {
+    console.log('promise2')
+})
+console.log('script end')
+</script>

index.html

@@ -9,16 +9,39 @@
   <div>
     <button id="btn">click</button>
   </div>
-  <script src="./手写一个event.js"></script>
+  <!-- <script src="./手写一个event.js"></script> -->
+  <script src='./实现一个简单的promise.js'></script>
   <script>
-    const fn1 = () => {
-      console.log('111')
-    }
-    const fn2 = () => {
-      console.log('111')
-    }
-    document.getElementById('btn').addEventListener('click', () => {console.log(1)})
-    document.getElementById('btn').addEventListener('click', () => {console.log(1)})
+    // const fn1 = () => {
+    //   console.log('111')
+    // }
+    // const fn2 = () => {
+    //   console.log('111')
+    // }
+    // document.getElementById('btn').addEventListener('click', () => {console.log(1)})
+    // document.getElementById('btn').addEventListener('click', () => {console.log(1)})
+
+    let pp = new Promise((res, rej) => {
+      setTimeout(() => {
+        res(22)
+      },1000)
+    })
+    console.log(pp)
+    pp.then(res => {
+      console.log(res)
+    }, err => {console.log(err.message)})
+   const a =  pp.then(res => {
+      return new Promise(resolve => {
+        setTimeout(() => {
+          resolve(res)
+        })
+      })
+    }, err => console.log(err.message))
+
+    a.then(res => {
+      console.log(res)
+    })
+    console.log('end')
   </script>
 </body>
 </html>

实现一个简单的promise.js

@@ -39,3 +39,95 @@
 //   .then(console.log)
 
 //极简型
+
+/**
+ * excutor 执行器函数（同步）
+ */
+!function(){
+  function Promise(excutor) {
+    this.status = 'pendding'
+    this.data = undefined
+    this.callbacks = [] //{onResloved:() => {}, onRejected:() => {}}
+    // let _this = this
+    const resolve = (value)  => {
+      if(this.status !== 'pendding') return
+      this.status = 'resolved'
+      this.data = value
+      if(this.callbacks.length > 0) {
+        setTimeout(() => {
+          this.callbacks.forEach(cbObj => {
+            cbObj['onResolved'](value)
+          })
+        },0)
+      }
+    }
+
+    const reject = (reason) => {
+      if(this.status !== 'pendding') return
+      this.status = 'rejected'
+      this.data = reason
+      if(this.callbacks.length > 0) {
+        setTimeout(() => {
+          this.callbacks.forEach(cbObj => {
+            cbObj['onRejected'](value)
+          })
+        },0)
+      }
+    }
+    try {
+      excutor(resolve, reject)
+    }catch(err) {
+      reject(err)
+    }
+  }
+
+  Promise.prototype.then = function(onResolved, onRejected) {
+    return new Promise((resolve, reject) => {
+      // console.log(this.status)
+      if(this.status === 'pendding') {
+        this.callbacks.push({onResolved, onRejected})
+      } else if(this.status === 'resolved') {
+        setTimeout(() => {
+          try {
+            const res = onResolved(this.data)
+            if(res instanceof Promise) {
+              // res.then(value => resolve(value), err => reject(err))
+              res.then(resolve, reject)
+            } else {
+              resolve(res)
+            }
+          } catch (error) {
+            reject(error)
+          }
+        })
+      } else {
+        setTimeout(() => {
+          onRejected(this.data)
+        })
+      }
+    })
+  }
+
+
+  Promise.prototype.catch = function(onRejected) {
+
+  }
+
+  Promise.resolve = function(value) {
+
+  }
+
+  Promise.rejected = function(reason) {
+
+  }
+
+  Promise.all = function(promises) {
+
+  }
+
+  Promise.race = function(promises) {
+
+  }
+  window.Promise = Promise
+}(window)
+