Promise对象

一、准备

1.1 区别实例对象与函数对象

实例对象：new 构造函数产生的对象，称为实例对象，简称对象。
将函数作为对象使用时，称为函数对象。

function Fn(){}//Fn只能称为函数
var fn = new Fn();//只有使用new 操作符创建实例对象时，Fn才能成为构造函数。fn称为实例对象
console.log(Fn.prototype);//Fn作为对象使用时才能称为函数对象
Fn.bind({})；//Fn作为函数对象使用
$("#title");//$作为函数使用
$.get('/test');//$作为函数对象使用

（）左边必然会是函数，.的左边必然是对象

1.2 回调函数

什么是回调函数？

我们自己定义的，没有调用它，但它最终执行了的函数。

同步回调

定义：立即执行，完全执行了才结束，不会放入回调队列中。举例：数组遍历相关的回调forEach（）、Promise的excutor函数

//以下说明forEach是同步回调
let arr = [1, 2, 3, 4];
arr.forEach((item) => console.log(item * 3));
console.log("我是外面的");
/* 结果：
3
6
9
12
我是外面的 */

异步回调

定义：不会立即执行，会放入回调队列中。举例：定时器回调、ajax回调、Promise成功或失败的回调。

//说明定时器是异步回调
setTimeout(function() {
   console.log("我是定时器里面的");
}
console.log("我是外面的");
 /* 结果：
我是外面的
我是定时器里面的 */
//promise 的成功或失败问题
new Promise((resolve, reject) => { //执行器函数
//异步操作
  setTimeout(function() {
     resolve(1);
  }, 2000)
}).then(
    value => {
      console.log("成功的结果", value)
    },
    reason => {
      console.log("失败的原因", reason)
    },
   )
console.log("我是外面的");
/* 结果：
我是外面的
成功的结果 1 */

1.3 js中error的处理

错误的类型

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

        console.log(a); //Uncaught ReferenceError: a is not defined
        let b;
        console.log(b.xxx); //Uncaught TypeError: Cannot read property 'xxx' of undefined.(原因是b为undefined)
        b = {};
        console.log(b.xxx); //undefined
        function fn() {
            fn();
        }
        fn(); //Uncaught RangeError: Maximum call stack size exceeded
        const c = ";//Uncaught SyntaxError: Invalid or unexpected token

错误处理

捕获错误：try...catch
抛出错误：throw new Error
只有当错误被捕获处理后，后面的代码才会继续执行，否则后面的代码不会执行

        try {
            console.log(a);
        } catch (error) {
            console.log(error);
        }
        console.log("123");

        function something() {
            let time = Date.now();
            if (time % 2 == 1) {
                console.log("当前时间为奇数，可以执行任务", time);
            } else {
                throw new Error("当前时间为偶数，无法执行任务" + time);
            }
        }
        try {
            something();
        } catch (error) {
            console.log(error); //Error: 当前时间为偶数，无法执行任务1601820361550
        }
        console.log("12340"); //12340
        /* error: Error: 当前时间为偶数，无法执行任务1601820361550 
        stack: "Error: 当前时间为偶数，无法执行任务1601820361550
        message: "当前时间为偶数，无法执行任务1601820361550" */

错误对象

message属性：错误相关的信息
stack属性：函数调用栈信息记录

/*error.message:
当前时间为偶数，无法执行任务1601820649572
error.stack:
Error: 当前时间为偶数，无法执行任务1601820649572
at something (index.html:34)
at index.html:38 */

二、Promise的理解和应用

2.1 Promise是什么？

2.1.1 Promise的理解

抽象表达：Promise是JS中进行异步编程的新的解决方案
具体表达：
1.语法上：Promise是个构造函数
2.功能上：Promise用来封装一个异步操作并可以获取结果

2.1.2 Promise状态的改变

pending变为resolved
pending变为rejected
Promise对象状态只能改变一次。无论成功或失败，都会有一个结果数据。成功的结果数据一般为value，失败的结果数据一般为reason

2.1.3 Promise的基本流程

2.1.4 Promise的基本使用

const p = new Promise((resolve, reject) => { //执行器函数
//异步操作
  setTimeout(function() {
     const time = Date.now();
     //如果当前时间是偶数则代表成功，否则失败
     if (time % 2 == 0) {
       //如果成功，调用resolve()
       resolve('成功的数据，time=' + time);
     } else {
       //如果失败，调用reject()
       reject('失败的数据，time=' + time);
     }
  }, 1000)
})
p.then(
   value => { //接收得到成功的value数据，onResolved()回调
      console.log("成功的回调", value);
   },
   reason => { //接收得到失败的reason数据，onRejected()回调
      console.log("失败的回调", reason);
   }
)
/* 结果：失败的回调 失败的数据，time=1601825755947 */

.then()执行器（excutor）同步执行，.then()中的回调函数异步执行

2.2 为什么要使用Promise

指定回调函数方式更加灵活
旧的：必须在启动异步任务前指定
promise：启动异步任务=>返回Promise对象=>给Promise对象绑定回调函数（甚至可以在异步任务结束后指定）
支持链式调用，可以解决回调地狱的问题
什么是回调地狱
回调函数嵌套使用，外部回调函数异步执行的结果是内部嵌套的回调函数的执行条件。
它的缺点是不易于阅读/不便于异常处理

Promise链式调用

async/await

2.3 如何使用Promise

API

Promise构造函数
Promise(excutor){}
excutor函数：同步执行（resolve，reject）=> {}
resolve函数：内部定义成功时调用的回调函数resolve(value)
reject函数：内部定义失败时调用的回调函数reject(reason)
说明：excutor是执行器，会在Promise内部立即同步回调，异步操作resolve/reject就在excutor中执行
Promise.prototype.then()方法：
p.then(onResolved,onRejected)

onResolved函数：成功的回调函数value => {}
2）onRejected函数：失败的回调函数reason => {}

Promise.prototype.catch()方法：
p.catch(onRejected)

onRejected函数：失败的回调函数reason => {}
说明：then()的语法糖，相当于then(undefined,onRejected)

Promise.resolve()方法：
Promise.resolve(value)
value:将被Promise对象解析的参数，也可以是一个成功或失败的promise对象。
返回：返回一个带着给定值解析过的Promise对象，如果参数本身就是一个Promise对象，则直接返回这个Promise对象。
Promise.reject()方法：
Promise.reject(reason)
reson:失败的原因
返回：返回一个失败的Promise对象
Promise.all()方法：
Promise.all(iterable)
iterable:包含n个Promise的可迭代对象，如Array、String
返回：返回一个新的Promise，只有所有的Promise成功才成功，有一个失败就失败。
Promise.race(iterable)
iterable:包含n个Promise的可迭代对象，如Array、String
返回：返回一个新的Promise，第一个完成的promise的结果状态就是最终的结果状态。

三、Promise的几个关键问题

3.1 如何改变Promise状态

（1）resolve(value):pending变为resolved
（2）reject（reason）：pending变为rejected
（3）抛出异常:pending 变为rejected

3.2 一个Promise指定多个成功/失败的回调函数都会调用吗？

当Promise改变为对应状态时都会调用

3.3 Promise改变状态和指定回调函数谁先谁后？

1.都有可能，常规是先指定回调在改变状态，但也可以先改变状态再指定回调。
2. 如何先改状态再指定回调？
（1）在执行器中直接调用resolve()/reject()
（2）延迟更长时间再调用then（）
3. 什么时候才能得到数据？
（1）如果先指定的回调，那么当状态发生改变时，回调函数就会调用得到数据。
（2）如果先改变的状态，那么当指定回调函数，回调函数就会得到数据。

3.4 Promise.then()返回新的Promise的结果状态由什么决定?

（1）简单表达：由then()指定的回调函数的结果决定
（2）详细表达：
1）如果抛出异常，新Promise变为rejected,reason为抛出的异常
2）如果返回非Promise的任意值，新Promise变为resolved，value为返回的值
3）如果返回的是另一个新的Promise，此Promise的结果就会成为新Promise的结果

3.5 Promise如何串联多个操作任务？

（1）Promise.then()返回一个新的Promise，可以并成then()的链式调用
（2）通过then的链式调用串联多个同步/异步任务

3.6 Promise的异常穿透？

（1）当使用Promise的链式调用时，可以在最后指定失败的回调
（2）前面任何操作出现了异常，都会传到最后失败的回调中处理

3.7 中断Promise链？

当使用Promise的then链式调用时，在中间中断，不再调用后面的回调函数。
办法：在回调函数中好返回一个pending状态的Promise对象。

四、async和await

4.1 async函数

async函数的返回值为Promise对象
2.Promise对象的结果由async函数执行的返回值决定

  async function fn1() {
      //(1)返回一个Promise对象，PromiseStatus为resolved，PromiseValue为1
      //return 1;
      //(2)返回一个Promise对象，PromiseStatus为rejected，PromiseValue为2
      // throw 2;
      //(3)直接返回一个成功的Promise
      /* return new Promise((resolve, reject) => {
              resolve(1);
          }) */
      //(4)直接返回一个失败的Promise
      // return Promise.reject(1);
      //(5)返回延迟的成功的或失败的Promise
      return new Promise((resolve, reject) => {
          setTimeout(() => {
              resolve(4);
          }, 1000);
      });
  }
  const reslut = fn1();
  console.log(reslut);
  reslut.then(
      (value) => {
          console.log(value);
      },
      (reason) => {
          console.log(reason);
      }
  );

4.2 await表达式

语法：[return_value]=await expression
表达式：一个Promise对象或任何要等待的值
返回值：返回Promise对象的处理结果。如果等待的不是Promise对象，则返回该值本身
（1）一般为Promise对象，但也可为其他值
（2）如果表达式是Promise对象，await返回的是Promise成功的值
（3）如果表达式是其他的值，直接将此值作为await的返回值

解释：await表达式会暂停当前async函数的执行，等待Promise处理完成
注意：
await必须写在async函数中红，但async函数中可以没有await
如果await的Promise失败了，就会抛出异常，需要通过try...catch来捕获处理

 function fn2() {
      //（1）返回失败的Promise
      /* return new Promise((resolve, reject) => {
          setTimeout(() => {
              reject(5);
          }, 1000)
      }) */
      //(2)返回其他值
      // return 1;
      //(3)抛出异常
      throw 3;
  }
  async function fn3() {
      try {
          const value = await fn2();
          console.log("value", value);
      } catch (error) {
          console.log(error);
      }
  }
  fn3(); //报错： Uncaught (in promise) 5。因为await只能得到成功的结果，要想得到失败的结果，就必须捕获处理

五、JS异步之宏队列与微队列

JS中用来存储待执行回调函数的队列包含2个不同特定的队列
宏队列：用来保存待执行的宏任务（回调），比如：定时器回调、ajax回调、dom事件回调
微队列：用来保存待执行的微任务（回调），比如：Promise回调、MutationObserver回调

JS执行时会区别这两个队列
（1）JS引擎首先必须执行所有的初始化同步任务代码
（2）每次准备第一个宏任务之前，都要将所有的微任务一个一个取出来执行

  setTimeout(() => { //会立即被放入宏任务队列
      console.log("定时器回调1");
  }, 0);
  setTimeout(() => { //会立即被放入宏任务队列
      console.log("定时器回调2");
  }, 0);
  Promise.resolve(1).then(
      value => { //会立即被放入微队列
          console.log("Promise onResolved1()", value);
      }
  )
  Promise.resolve(2).then(
      value => { //会立即放入微队列
          console.log("Promise onResolved2()", value);
      }
  )
//结果：
//Promise onResolved1() 1
//Promise onResolved2() 2
//定时器回调1
//定时器回调2

先执行所有的同步代码，再执行队列代码。队列代码中，微队列的回调函数优先执行。

   setTimeout(() => { //会立即被放入宏队列
         console.log("定时器回调1");
         Promise.resolve(1).then(
             value => { //会立即被放入微队列
                 console.log("Promise onResolved1()", value);
             }
         )
     }, 0);
     setTimeout(() => { //会立即被放入宏队列
         console.log("定时器回调2")
     }, 0);
     Promise.resolve(2).then(
         value => { //会立即被放入微队列
             console.log("Promise onResolved2()", value);
         }
     )
     Promise.resolve(3).then(
         value => { //会立即被放入微队列
             console.log("Promise onResolved3()", value);
         }
     )
     // 结果：
   // Promise onResolved2() 2
   // Promise onResolved3() 3
   // 定时器回调1
   // Promise onResolved1() 1
   // 定时器回调2

`执行完定时器回调1后，Promise onResolved1()会立即被放入微队列。在执行定时器回调2前，Promise onResolved1（）已经在微队列中了，所以先执行Promise onResolved1（）。

posted @ 2020-10-04 17:45 小耳朵兔阅读(108) 评论(0) 收藏举报

刷新页面返回顶部

小耳朵兔