【学习笔记】Promise的学习笔记

1 Promise的理解

1.1 promise是什么

1.1.1理解：

1. 抽象表达

   • Promise是一门新的技术（ES6规范）
   • Promise是JS中进行一部编程的新的解决方案（旧方案是单纯使用回调函数）

2. 具体表达

   • 从语法上来说：Promise是一个构造函数
   • 从功能上来说：Promise对象用来封装一个一部操作并可以获取其成功/失败的结果值

1.1.2 异步编程的例子

• fs 文件操作（fs为node.js下的一个模块，可以对磁盘进行读写操作）

  const fs = require('fs');
  /* 
        fs.readFile('./resource/content.txt',(err,data)=>{
          //如果错误则抛出错误
          if(err) throw err;
          //否则输出文件内容
          console.log(data.toString());
              });
   */
  
  //Promise形式
  let p = new Promise((resolve,reject) => {
       
      fs.readFile('./resource/content.txt',(err,data)=>{
       
          //如果错误则抛出错误
          if(err) reject(err);
         //如果成功
          resolve(data);
          
      });
  })
  
      //调用then方法
      p.then(value=>{
       console.log(value.toString());
      },reason =>{
       console.log(reason);
      }
          
      )
      
  
  
  

• 数据库操作（mongoDB，MySQL等）
• AJAX

    $.get('/server', (data)=>{
       })
  

• 定时器

  setTimeout(()=>{
       }, 2000);
  

1.2 为什么要使用Promise

1.2.1 指定回调函数的方式更加灵活

• 旧的：必须在启动异步任务之前指定
• promise：启动异步 => 返回promise对象 => 给promise对象绑定回调函数（甚至可以在异步任务结束后指定多个）

1.2.2 支持链式调用，可以解决回调地狱问题

1. 回调地狱：回调函数嵌套调用，外部回调函数异步执行的 结果是嵌套的回调执行的条件
2. 回调地狱的缺点
   • 不便于阅读
   • 不便于异常处理
3. 解决方案：promise链式调用
4. 终极解决方案：async/await

1.3 Promise 的状态

1. 实例对象中的一个属性 『PromiseState』

• pending 未决定的

• resolved / fullfilled 成功
• rejected 失败

2. promise的状态改变
   • pending变为resolved/fullfilled
   • pending变为rejected

• 只有这两种变化可能，也就是说不可能由resolved变为rejected，且一个promise对象只能改变一次

• 无论变为成功还是失败，都会有一个结果数据

• 成功的结果数据一般称为value，失败的结果数据一般称为reason

1.4 Promise 对象的值

实例对象中的另一个属性 『PromiseResult』
保存着异步任务『成功/失败』的结果，下面两个函数可以修改对返回的结果进行修改，其他皆不可以

• resolve（）
• reject （）

1.5 promise的基本流程

2 Promise的使用

2.1 API

1. Promise构造函数：Promise(excutor){}
   • executor函数：执行器（resolve，reject） => {}
   • resolve函数：内部定义成功时我们调用的函数 value => {}
   • reject函数：内部定义失败时我们调用的函数 reason => {}

• 说明：executor会在Promise内部立即同步调用，异步操作在执行器中执行

<script>
        let p = new Promise((resolve,reject)=>{
   
            //同步调用
            console.log(111);
        });
        console.log(222);
</script>

---

2. Promise.prototype.then方法：(onResolved,onReject) => {}
   • onResolved函数：成功的回调函数 （value） => {}
   • onReject函数：失败的回调函数 (reason) => {}

• 说明：指定用于得到成功value的成功回调和用于得到失败reason的失败回调返回一个新的promise对象

  ---

3. Promise.prototype.catch方法：（onRejected） => {}
   • onRejected函数：失败的回调函数 （reason） =>{}

• 说明：then()的语法糖，相当于：then(undefined，onRejected)

   <script>
          let p = new Promise((resolve,reject)=>{
       
             //修改promise对象的状态
             reject('error')
          });
          //执行catch方法
          p.catch(reason =>{
       
              console.log(reason); //输出error
              
          })
      </script>
  

  ---

4. Promise.resolve方法：(value) => {}
   • value:成功的数据或promise对象

• 说明：返回一个成功/失败的 promise 对象

   <script>
          let p1 = Promise.resolve(123);
          //如果传入的参数为非Promise类型的对象，则返回的结果皆为成功的promise对象
          console.log('p1:',p1);
  
          //如果传入的参数为Promise对象，则参数的结果决定resolve的结果
          let p2 = Promise.resolve(new Promise((resolve,reject) => {
       
              //成功的结果
              resolve('OK')
          }))
          console.log("p2:",p2)