Promise---详细学习总结（一）

待我称王封你为后i 2022-10-29 12:22 195阅读 0赞

##### 知识储备前提: #####

1.  **回调函数分类**

####  ####

1). 同步回调: 
      理解: 立即执行, 完全执行完了才结束, 不会放入回调队列中
      例子: 数组遍历相关的回调函数 / Promise的excutor函数
    2). 异步回调: 
      理解: 不会立即执行, 会放入回调队列中将来执行
      例子: 定时器回调 / ajax回调 / Promise的成功|失败的回调

// 1. 同步回调函数
        // const arr = [1, 3, 5]
        arr.forEach(item => {  // 遍历回调, 同步回调函数, 不会放入列队, 一上来就要执行完
          console.log(item)
        })
        console.log('forEach()之后')
        //输出结果： 1 3 5 打印文字 
    
        // 2. 异步回调函数
        setTimeout(() => {  // 异步回调函数, 会放入队列中将来执行
          console.log('timout callback()')
        }, 0)
        console.log('setTimeout()之后')
        //输出结果：setTimeoout-----timeout callback

1.  **js中常见的Error信息**

#####  #####

1. 错误的类型
    	        Error: 所有错误的父类型
    	        ReferenceError: 引用的变量不存在
    	        TypeError: 数据类型不正确的错误
    	        RangeError: 数据值不在其所允许的范围内
    	        SyntaxError: 语法错误

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

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

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

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

######  ######

2. 错误处理
    	       捕获错误: try ... catch
    	       抛出错误: throw error  
     3. 错误对象
    	        message属性: 错误相关信息
    	        stack属性: 函数调用栈记录信息

#### 1：捕获异常 ####

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

![在这里插入图片描述][20210214111825553.png]

##### 2:抛出错误并且捕获异常 #####

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

###### 结果显示（重复刷新）： ######

![在这里插入图片描述][20210214112711144.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70]

##### 为什么要用promise？ #####

1. 指定回调函数的方式更加灵活: 
      旧的: 必须在启动异步任务前指定
      promise: 启动异步任务 => 返回promie对象 => 给promise对象绑定回调函数(甚至可以在异步任务结束后指定)
    
    2. 支持链式调用, 可以解决回调地狱问题
      什么是回调地狱? 回调函数嵌套调用, 外部回调函数异步执行的结果是嵌套的回调函数执行的条件，下一个函数的条件是上一个函数的结果 
      回调地狱的缺点?  不便于阅读 / 不便于异常处理
      解决方案? promise链式调用
      终极解决方案? async/await

##### promise的理解和使用 #####

1.抽象表达: 
    	    Promise是JS中进行异步编程的新的解决方案(旧的是纯回调函数)
    2.具体表达:
    	    从语法上来说: Promise是一个构造函数，将来要创建实例的
    	    从功能上来说: promise对象用来封装一个异步操作并可以获取其结果
    3. promise的状态改变(只有2种, 只能改变一次)
    	    pending变为resolved
    	    pending变为rejected
    4.promise的状态改变
    		pedding变为resolved  或者  rejected
    		说明：只有这2种，且一个promis只能改变一次。
    		无论成功（value）还是失败（reason），都会有一个结果数据

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 1]

##### promise的基本使用 #####

**p是返回的一个新的promise对象**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 2]

######  ######

这里注意打印的顺序，先打印“执行excutor”，说明先执行异步操作任务，执行函数已经开始了，只是还没完成

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 3]

[20210214111825553.png]: /images/20221024/2a2e4633f9184ebaa0c9fc11eb62cb19.png
[20210214112711144.png]: /images/20221024/231f4e046b144652a09140271b0be3aa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70]: /images/20221024/c8ce85dd84884919af60558bbc64c1b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 1]: /images/20221024/1cda8c2a35a84fb6ab43200b993ac436.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 2]: /images/20221024/6da76c54a2a241b1b3dae2440654f83a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 3]: /images/20221024/f404162bcf7c432f80a961e4eadf540e.png