Promise相关知识点

最新推荐文章于 2024-10-15 09:57:04 发布

猪小屁、

最新推荐文章于 2024-10-15 09:57:04 发布

阅读量423

点赞数

分类专栏： Promise 文章标签： javascript 前端 es6

本文链接：https://blog.csdn.net/weixin_47952737/article/details/121297923

版权

Promise 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

01_准备_函数对象与实例对象.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>01_准备_函数对象与实例对象</title>
</head>
<body>

  <script>
    /* 
    1. 函数对象与实例对象
      函数对象: 将函数作为对象使用时, 简称为函数对象
      实例对象: new 函数产生的对象, 简称为对象
    */

    function Fn() {   // Fn函数 
    }
    const fn = new Fn() // Fn是构造函数  fn是实例对象(简称为对象)
    console.log(Fn.prototype) // Fn是函数对象
    Fn.call({}) // Fn是函数对象
    $('#test') // jQuery函数
    $.get('/test') // jQuery函数对象

    function Person(params) {
      
    }

  

  </script>
</body>
</html>

02_准备_回调函数的分类.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>02_准备_回调函数的分类</title>
</head>
<body>
  <script>
    /* 
    1). 同步回调: 
      理解: 立即执行, 完全执行完了才结束, 不会放入回调队列中
      例子: 数组遍历相关的回调函数 / Promise的excutor函数
    2). 异步回调: 
      理解: 不会立即执行, 会放入回调队列中将来执行
      例子: 定时器回调 / ajax回调 / Promise的成功|失败的回调
    */

    // 1. 同步回调函数
    // const arr = [1, 3, 5]
    arr.forEach(item => { // 遍历回调, 同步回调函数, 不会放入列队, 一上来就要执行完
      console.log(item)
    })
    console.log('forEach()之后')

    // 2. 异步回调函数
    setTimeout(() => { // 异步回调函数, 会放入队列中将来执行
      console.log('timout callback()')
    }, 0)
    console.log('setTimeout()之后')
  </script>
</body>
</html>

03_准备_error.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>JS的error处理</title>
</head>
<body>

<script>
  /* 
  目标: 进一步理解JS中的错误(Error)和错误处理
    mdn文档: https: //developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Error

    1. 错误的类型
        Error: 所有错误的父类型
        ReferenceError: 引用的变量不存在
        TypeError: 数据类型不正确的错误
        RangeError: 数据值不在其所允许的范围内
        SyntaxError: 语法错误
    2. 错误处理
        捕获错误: try ... catch
        抛出错误: throw error
    3. 错误对象
        message属性: 错误相关信息
        stack属性: 函数调用栈记录信息
  */

  // 1. 常见的内置错误
  // 1). ReferenceError: 引用的变量不存在
  // console.log(a) // ReferenceError: a is not defined
  // console.log('-----') // 没有捕获error, 下面的代码不会执行

  // TypeError: 数据类型不正确的错误
  // let b
  // // console.log(b.xxx) // TypeError: Cannot read property 'xxx' of undefined
  // b = {}
  // b.xxx() // TypeError: b.xxx is not a function


  // RangeError: 数据值不在其所允许的范围内
  // function fn() {
  //   fn()
  // }
  // fn() // RangeError: Maximum call stack size exceeded

  // SyntaxError: 语法错误
  // const c = """" // SyntaxError: Unexpected string


  // 2. 错误处理
  // 捕获错误: try ... catch
  try {
    let d
    console.log(d.xxx)
  } catch (error) {
    console.log(error.message)
    console.log(error.stack)
  }
  console.log('出错之后')

  // 抛出错误: throw error
  function something() {
    if (Date.now()%2===1) {
      console.log('当前时间为奇数, 可以执行任务')
    } else { // 如果时间是偶数抛出异常, 由调用来处理
      throw new Error('当前时间为偶数无法执行任务')  
    }
  }

  // 捕获处理异常
  try {
    something()
  } catch (error) {
    alert(error.message)
  }


</script>
</body>
</html>

04_promise基本使用.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>04_promise基本使用</title>
</head>
<body>
  <script>
    // 1. 创建一个新的promise对象
    const p = new Promise((resolve, reject) => {// 执行器函数  同步回调
      console.log('执行 excutor')
      // 2. 执行异步操作任务
      setTimeout(() => {
        const time = Date.now() // 如果当前时间是偶数就代表成功, 否则代表失败
        // 3.1. 如果成功了, 调用resolve(value)
        if (time %2 == 0) {
          resolve('成功的数据, time=' + time)
        } else {
        // 3.2. 如果失败了, 调用reject(reason)
          reject('失败的数据, time=' + time)
        }
      }, 1000);
      
    })
    console.log('new Promise()之后')

    // setTimeout(() => {
      p.then(
      value => { // 接收得到成功的value数据    onResolved
        console.log('成功的回调', value)  
      },
      reason => {// 接收得到失败的reason数据  onRejected
        console.log('失败的回调', reason)
      }
      )
    // }, 2000);
  </script>
</body>
</html>

05_为什么要用Promise.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>05_为什么要用Promise</title>
</head>
<body>
  
  <script>
      /* 
      1. 指定回调函数的方式更加灵活: 
        旧的: 必须在启动异步任务前指定
        promise: 启动异步任务 => 返回promie对象 => 给promise对象绑定回调函数(甚至可以在异步任务结束后指定)
    
      2. 支持链式调用, 可以解决回调地狱问题
        什么是回调地狱? 回调函数嵌套调用, 外部回调函数异步执行的结果是嵌套的回调函数执行的条件
        回调地狱的缺点?  不便于阅读 / 不便于异常处理
        解决方案? promise链式调用
        终极解决方案? async/await
      */
    
      // 成功的回调函数
      function successCallback(result) {
        console.log("声音文件创建成功: " + result);
      }
      // 失败的回调函数
      function failureCallback(error) {
        console.log("声音文件创建失败: " + error);
      }
    
      /* 1.1 使用纯回调函数 */
      createAudioFileAsync(audioSettings, successCallback, failureCallback)
      
    /* 1.2. 使用Promise */
      const promise = createAudioFileAsync(audioSettings); // 2
      setTimeout(() => {
        promise.then(successCallback, failureCallback);
      }, 3000);
      
      /* 
      2.1. 回调地狱
      */
      doSomething(function(result) {
        doSomethingElse(result, function(newResult) {
          doThirdThing(newResult, function(finalResult) {
            console.log('Got the final result: ' + finalResult)
          }, failureCallback)
        }, failureCallback)
      }, failureCallback)
    
      /* 
      2.2. 使用promise的链式调用解决回调地狱
      */
      doSomething()
      .then(function(result) {
        return doSomethingElse(result)
      })
      .then(function(newResult) {
        return doThirdThing(newResult)
      })
      .then(function(finalResult) {
        console.log('Got the final result: ' + finalResult)
      })
      .catch(failureCallback)
    
      /* 
      2.3. async/await: 回调地狱的终极解决方案
      */
      async function request() {
        try {
          const result = await doSomething()
          const newResult = await doSomethingElse(result)
          const finalResult = await doThirdThing(newResult)
          console.log('Got the final result: ' + finalResult)
        } catch (error) {
          failureCallback(error)
        }
      }
    </script>
</body>
</html>

06_Promise的API.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>06_Promise的API</title>
</head>
<body>
  
<script>

  /* 
    1. Promise构造函数: Promise (excutor) {}
        excutor函数: 同步执行  (resolve, reject) => {}
        resolve函数: 内部定义成功时我们调用的函数 value => {}
        reject函数: 内部定义失败时我们调用的函数 reason => {}
        说明: excutor会在Promise内部立即同步回调,异步操作在执行器中执行

    2. Promise.prototype.then方法: (onResolved, onRejected) => {}
        onResolved函数: 成功的回调函数  (value) => {}
        onRejected函数: 失败的回调函数 (reason) => {}
        说明: 指定用于得到成功value的成功回调和用于得到失败reason的失败回调
              返回一个新的promise对象

    3. Promise.prototype.catch方法: (onRejected) => {}
        onRejected函数: 失败的回调函数 (reason) => {}
        说明: then()的语法糖, 相当于: then(undefined, onRejected)

    4. Promise.resolve方法: (value) => {}
        value: 成功的数据或promise对象
        说明: 返回一个成功/失败的promise对象

    5. Promise.reject方法: (reason) => {}
        reason: 失败的原因
        说明: 返回一个失败的promise对象

    6. Promise.all方法: (promises) => {}
        promises: 包含n个promise的数组
        说明: 返回一个新的promise, 只有所有的promise都成功才成功, 只要有一个失败了就直接失败
    7. Promise.race方法: (promises) => {}
        promises: 包含n个promise的数组
        说明: 返回一个新的promise, 第一个完成的promise的结果状态就是最终的结果状态
  */

  new Promise((resolve, reject) => {
    setTimeout(() => {
        // resolve('成功的数据')
        reject('失败的数据')
    }, 1000)
  }).then(
    value => {
        console.log('onResolved()1', value)
    }
  ).catch(
    reason => {
        console.log('onRejected()1', reason)
    }
  )

   // 产生一个成功值为1的promise对象
   const p1 = new Promise((resolve, reject) => {
       setTimeout(() => {
        resolve(1)
       }, 100);
   })
   const p2 = Promise.resolve(2)
   const p3 = Promise.reject(3)
//    p1.then(value => {console.log(value)})
//    p2.then(value => {console.log(value)})
//    p3.catch(reason => {console.log(reason)})

//    const pAll = Promise.all([p1, p2, p3])
   const pAll = Promise.all([p1, p2])
   /* pAll.then(
     values => {
        console.log('all onResolved()', values)
     },
     reason => {
        console.log('all onRejected()', reason)
     }
   )
 */
   const pRace = Promise.race([p1, p2, p3])
   pRace.then(
     value => {
        console.log('race onResolved()', value)
     },
     reason => {
        console.log('race onRejected()', reason)
     }
   )


  
</script>
</body>
</html>

07_promise的几个关键问题1.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>promise的几个关键问题1</title>
</head>
<body>
  <script>
    /* 
    1.	如何改变promise的状态?
      (1)resolve(value): 如果当前是pendding就会变为resolved
      (2)reject(reason): 如果当前是pendding就会变为rejected
      (3)抛出异常: 如果当前是pendding就会变为rejected
    
    2.	一个promise指定多个成功/失败回调函数, 都会调用吗?
      当promise改变为对应状态时都会调用
    */

    const p = new Promise((resolve, reject) => {
      // resolve(1) // promise变为resolved成功状态
      // reject(2) // promise变为rejected失败状态
      // throw new Error('出错了') // 抛出异常, promse变为rejected失败状态, reason为 抛出的error
      throw 3 // 抛出异常, promse变为rejected失败状态, reason为 抛出的3
    })
    p.then(
      value => {},
      reason => {console.log('reason', reason)}
    )
    p.then(
      value => {},
      reason => {console.log('reason2', reason)}
    )

    
  </script>
</body>
</html>

07_promise的几个关键问题2.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>promise的几个关键问题2</title>
</head>
<body>
  <script>
    /* 
    3.改变promise状态和指定回调函数谁先谁后?
      (1)都有可能, 正常情况下是先指定回调再改变状态, 但也可以先改状态再指定回调
      (2)如何先改状态再指定回调?
        ①在执行器中直接调用resolve()/reject()
        ②延迟更长时间才调用then()
      (3)什么时候才能得到数据?
        ①如果先指定的回调, 那当状态发生改变时, 回调函数就会调用, 得到数据
        ②如果先改变的状态, 那当指定回调时, 回调函数就会调用, 得到数据
    */
    // 常规: 先指定回调函数, 后改变的状态
    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(1) // 后改变的状态(同时指定数据), 异步执行回调函数
      }, 1000);
    }).then(// 先指定回调函数, 保存当前指定的回调函数
      value => {},
      reason => {console.log('reason', reason)}
    )

    // 如何先改状态, 后指定回调函数
    new Promise((resolve, reject) => {
      resolve(1) // 先改变的状态(同时指定数据)
    }).then(// 后指定回调函数, 异步执行回调函数
      value => {console.log('value2', value)},
      reason => {console.log('reason2', reason)}
    )
    console.log('-------')
    
    const p = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(1) // 后改变的状态(同时指定数据), 异步执行回调函数
      }, 1000);
    })

    setTimeout(() => {
      p.then(
        value => {console.log('value3', value)},
        reason => {console.log('reason3', reason)}
      )
    }, 1100);


    

  </script>
</body>
</html>

07_promise的几个关键问题3.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>promise的几个关键问题3</title>
</head>
<body>
  <script>
    /* 
    4.	promise.then()返回的新promise的结果状态由什么决定?
      (1)简单表达: 由then()指定的回调函数执行的结果决定
      (2)详细表达:
          ①如果抛出异常, 新promise变为rejected, reason为抛出的异常
          ②如果返回的是非promise的任意值, 新promise变为resolved, value为返回的值
          ③如果返回的是另一个新promise, 此promise的结果就会成为新promise的结果 
    */

    new Promise((resolve, reject) => {
      // resolve(1)
      reject(1)
    }).then(
      value => {
        console.log('onResolved1()', value)
        // return 2
        // return Promise.resolve(3)
        // return Promise.reject(4)
        throw 5
      },
      reason => {
        console.log('onRejected1()', reason)
        // return 2
        // return Promise.resolve(3)
        // return Promise.reject(4)
        throw 5
      }
    ).then(
      value => {
        console.log('onResolved2()', value)
      },
      reason => {
        console.log('onRejected2()', reason)
      }
    )

  </script>
</body>
</html>

07_promise的几个关键问题4.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>promise的几个关键问题4</title>
</head>
<body>
  <script>
    /* 
    5.promise如何串连多个操作任务?
      (1)promise的then()返回一个新的promise, 可以开成then()的链式调用
      (2)通过then的链式调用串连多个同步/异步任务
    */
    new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log("执行任务1(异步)")
        resolve(1)
      }, 1000);
    }).then(
      value => {
        console.log('任务1的结果: ', value)
        console.log('执行任务2(同步)')
        return 2
      }
    ).then(
      value => {
        console.log('任务2的结果:', value)
        
        return new Promise((resolve, reject) => {
          // 启动任务3(异步)
          setTimeout(() => {
            console.log('执行任务3(异步))')
            resolve(3)
          }, 1000);
        })
      }
    ).then(
      value => {
        console.log('任务3的结果: ', value)
      }
    )

  </script>
</body>
</html>

07_promise的几个关键问题5.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>promise的几个关键问题5</title>
</head>
<body>
  <script>
    /* 
    6.promise异常传/穿透?
      (1)当使用promise的then链式调用时, 可以在最后指定失败的回调, 
      (2)前面任何操作出了异常, 都会传到最后失败的回调中处理
    7.中断promise链?
      (1)当使用promise的then链式调用时, 在中间中断, 不再调用后面的回调函数
      (2)办法: 在回调函数中返回一个pendding状态的promise对象
    */

    new Promise((resolve, reject) => {
      // resolve(1)
      reject(1)
    }).then(
      value => {
        console.log('onResolved1()', value)
        return 2
      },
      // reason => {throw reason}
    ).then(
      value => {
        console.log('onResolved2()', value)
        return 3
      },
      reason => {throw reason}
    ).then(
      value => {
        console.log('onResolved3()', value)
      },
      reason => Promise.reject(reason)
    ).catch(reason => {
      console.log('onReejected1()', reason)
      // throw reason
      // return Promise.reject(reason)
      return new Promise(() => {}) // 返回一个pending的promise  中断promise链
    }).then(
      value => {
        console.log('onResolved3()', value)
      },
      reason => {
        console.log('onReejected2()', reason)
      }
    )

  </script>
</body>
</html>

08_自定义Promise.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>08_自定义Promise</title>
</head>

<body>
  <script src="./lib/Promise_class.js"></script>
  <!-- <script>
    const p = new Promise((resolve, reject) => {
      setTimeout(() => {
        // resolve(1)
        reject(2)
        console.log('reject()改变状态之后')
      }, 100);
    })
    p.then(
      value => {
        console.log('onResolved1()', value)
      },
      reason => {
        console.log('onRejected1()', reason)
      }
    )
    p.then(
      value => {
        console.log('onResolved2()', value)
      },
      reason => {
        console.log('onRejected2()', reason)
      }
    )
    
  </script> -->
<!-- 
  <script>
    const p = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(1)
        // reject(2)
      }, 100);
    }).then(
      value => {
        console.log('onResolved1()', value)
      },
      reason => {
        console.log('onRejected1()', reason)
        // return 3
        // throw 4
        return new Promise((resolve, reject) => reject(5))
      }
    ).then(
      value => {
        console.log('onResolved2()', value)
      },
      reason => {
        console.log('onRejected2()', reason)
        throw 6
      }
    ).catch(reason => {
      console.log('onRejected3()', reason)
      return new Promise(() => {})  // 中断proimise链
    }).then(
      value => {
        console.log('onResolved4()', value)
      },
      reason => {
        console.log('onRejected4()', reason)
        throw 6
      }
    )
    
  </script> -->

  <script>
    const p1 = Promise.resolve(2) // 如果是一般值, p1成功, value就是这个值
    const p2 = Promise.resolve(Promise.resolve(3)) // 如果是成功的promise, p2成功, value是这个promise的value
    const p3 = Promise.resolve(Promise.reject(4)) // 如果是失败的promise, p3失败, reason是这个promise的reason
    // p1.then(value => {console.log('p1', value)})
    // p2.then(value => {console.log('p2', value)})
    // p3.catch(reason => {console.log('p3', reason)})

    // const p4 = new Promise((resolve) => {
    //   setTimeout(() => {
    //     resolve(5)
    //   }, 1000);
    // })
    const p4 = Promise.resolveDelay(5, 1000)
    const p5 = Promise.reject(6)
    
    const pAll = Promise.all([p4, 7, p1, p2])
    pAll.then(
      values => {
          console.log('race onResolved()', values)
      },
      reason => {
          console.log('race onRejected()', reason)
      }
    )

    // const pRace = Promise.race([p4, 7, p5, p2, p3])
    // pRace.then(
    //   value => {
    //       console.log('race onResolved()', value)
    //   },
    //   reason => {
    //       console.log('race onRejected()', reason)
    //   }
    // )

    const p6 = Promise.resolveDelay(66, 2000)
    const p7 = Promise.rejectDelay(77, 3000)
    p6.then(value => {console.log('p6', value)})
    p7.catch(reason => {console.log('p7', reason)})
  </script>
</body>

</html>

09_async与await.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>11_async与await</title>
</head>
<body>
<script>
  /* 
  目标: 进一步掌握asyn/await的语法和使用
    mdn文档:
      https: //developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function
      https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/await
    1. async 函数
      函数的返回值为promise对象
      promise对象的结果由async函数执行的返回值决定
   
    2. await 表达式
      await右侧的表达式一般为promise对象, 但也可以是其它的值
      如果表达式是promise对象, await返回的是promise成功的值
      如果表达式是其它值, 直接将此值作为await的返回值
    
    3. 注意:
      await必须写在async函数中, 但async函数中可以没有await
      如果await的promise失败了, 就会抛出异常, 需要通过try...catch来捕获处理
  */

  // async函数的返回值是一个promise对象
  // async函数返回的promise的结果由函数执行的结果决定
  async function fn1() {
    return 1
    // throw 2
    // return Promise.reject(3)
    // return Promise.resolve(3)
    /* return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(4)
      }, 1000);
    }) */
  }

  const result = fn1()
  // console.log(result)
  result.then(
    value => {
      console.log('onResolved()', value)
    },
    reason => {
      console.log('onRejected()', reason)
    }
  )

  function fn2() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        // resolve(5)
        reject(6)
      }, 1000);
    })
  }

  function fn4() {
    return 6
  }

  async function fn3() {
    try {
      // const value = await fn2() // await右侧表达为promise, 得到的结果就是promise成功的value
      const value = await fn1()
      console.log('value', value)
      // await只能得到成功的结果，要想得到失败的结果要用try和catch
    } catch (error) {
      console.log('得到失败的结果', error)
    }
    
    // const value = await fn4() // await右侧表达不是promise, 得到的结果就是它本身
    // console.log('value', value)
  }
  fn3()
</script>
</body>
</html>

10_宏队列与微队列.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>10_宏队列与微队列</title>
</head>
<body>
  <script>
    setTimeout(() => { // 会立即放入宏列队
      console.log('timeout callback1()')
      Promise.resolve(3).then(
        value => { // 会立即放入微列队
          console.log('Promise onResolved3()', value)
        }
      )
    }, 0)
    setTimeout(() => { // 会立即放入宏列队
      console.log('timeout callback2()')
    }, 0)
    Promise.resolve(1).then(
      value => { // 会立即放入微列队
        console.log('Promise onResolved1()', value)
      }
    ) 
    Promise.resolve(2).then(
      value => { // 会立即放入微列队
        console.log('Promise onResolved2()', value)
      }
    ) 
  </script>
</body>
</html>

11_Promise相关面试题1.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>11_Promise相关面试题1</title>
</head>
<body>

  <script>
    setTimeout(()=>{
      console.log(1)
    },0)
    Promise.resolve().then(()=>{
      console.log(2)
    })
    Promise.resolve().then(()=>{
      console.log(4)
    })
    console.log(3)
  </script>

</body>
</html>

11_Promise相关面试题2.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>11_Promise相关面试题2</title>
</head>
<body>

    <script>
      setTimeout(() => {
        console.log(1)
      }, 0)
      new Promise((resolve) => {
        console.log(2)
        resolve()
      }).then(() => {
        console.log(3)
      }).then(() => {
        console.log(4)
      })
      console.log(5)

    // 2 5 3 4 1

    /* 
    宏: []
    微: []
    */
    </script>
</body>
</html>

11_Promise相关面试题3.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>11_Promise相关面试题3</title>
</head>
<body>

    <script>
      // 3 7 4 1 2 5
      /* 
      宏: []
      微: []
      */
      const first = () => (new Promise((resolve, reject) => {
        console.log(3)
        let p = new Promise((resolve, reject) => {
          console.log(7)
          setTimeout(() => {
            console.log(5)
            resolve(6)
          }, 0)
          resolve(1)
        })
        resolve(2)
        p.then((arg) => {
          console.log(arg)
        })
    
      }))
    
      first().then((arg) => {
        console.log(arg)
      })
      console.log(4)
    </script>
</body>
</html>

11_Promise相关面试题4.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>11_Promise相关面试题4</title>
</head>
<body>

    <script>
      /*
      1 7 2 3 8 4 6 5 0
      宏: []
      微: []
      */
      setTimeout(() => {
        console.log("0")
      }, 0)
      new Promise((resolve,reject)=>{
        console.log("1")
        resolve()
      }).then(()=>{        
        console.log("2")
        new Promise((resolve,reject)=>{
          console.log("3")
          resolve()
        }).then(()=>{      
          console.log("4")
        }).then(()=>{       
          console.log("5")
        })
      }).then(()=>{  
        console.log("6")
      })
    
      new Promise((resolve,reject)=>{
        console.log("7")
        resolve()
      }).then(()=>{         
        console.log("8")
      })
    </script>

</body>
</html>