Promise基本概念

Promise

第1章：准备

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

1.实例对象：new函数产生的对象，称为实例对象，简称对象

2.函数对象：将函数作为对象使用时，简称为函数对象

1.1.1.同步回调

1.理解：立即执行，完全执行了才会结束，不会放入回调队列中

2.例子：数组遍历相关的回调函数/ Promise的extcutor函数

1.1.2.异步回调

1.理解：不会立即执行，会放入回调队列中将来执行

2.例子：定时器回调 / ajax回调 / Promise的成功|失败的回调

1.2.JS的error的处理

1.2.1.错误的类型

Error：所有错误的父类型

ReferenceError：引用的变量不存在

TyprError：数据类型不正确

RangeError：数据值不在其所允许的范围内

SyntaxError：语法错误

1.2.2.错误处理

捕获错误：try{}catch{}

抛出错误：throw error

1.2.3.错误对象

message属性：错误相关信息

stack属性：记录信息

第2章：promise的理解和使用

2.1.Promise是什么？

2.1.1.理解

1.抽象表达：

​ Promise是JS中进行异步编程的新方案（旧的是谁？—纯回调）

2.具体表达：

​ （1）从语法上来说：Promise是一个内置的构造函数

​ （2）从功能上来说：Promise对象用来封装一个异步操作并可以获取其结果

2.1.2.promise的状态改变

1.pending 变为 fulfilled

2.pending 变为 rejected

说明：只有这2种，且为一个Promise对象只能改变一次

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

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

强调：

1.Promise不是回调，是一个内置的构造函数，是程序员自己new调用的。

2.new Promise的时候，要传入一个回调函数，它是同步的回调，会立即在主线上执行，它被称为executor函数

3.每一个promise实例对象都有3种状态，分别为：初始化（pending）、成功（fulfilled）、失败（rejected）

4.每一个promise实例在刚被new出来的那一刻，状态都是初始化（pending）

5.executor函数会接收到两个参数，它们都是函数，分别用形参：resolve、reject接收

（1）调用resolve，会让Promise实例状态变为：成功（fulfilled），同时可以指定成功的value

（2）调用reject，会让Promise实例状态变为：失败（rejected），同时可以指定失败的reason

2.1.3.Promise的基本使用

1.重要语法

new Promise(wxecutor)构造函数

Promise.prototype.then方法

2.基本编码流程

1.创建Promise的实例对象（pending状态），传入executor函数

2.在executor中启动异步任务（定时器、ajax请求）

3.根据异步任务的结果，做不同处理：

​ 3.1 如果异步任务成功了：

​ 我们调用resolve(value)，让Promise实例对象状态变为成功(fulfilled)，同时指定成功的value

​ 3.2 如果异步任务失败了：

​ 我们调用reject(value)，让Promise实例对象状态变为失败(rejected)，同时指定失败的reason

4.通过then方法为Promise的实例指定成功、失败的回调函数，来获取成功的value、失败的reason

​ 注意：then方法所指定的：成功的回调、失败的回调，都是异步的回调；

3.关于状态的注意点：

(1).三个状态：

​    pending：未确定的-------初始状态

​    fulfilled：成功的-------调用resolve()后的状态

​    rejected：失败的--------调用reject()后的状态

  (2).两种状态的改变：

​    pending ==> fulfilled

​    pending ==> rejected

  (3).状态只能改变一次！！

  (4).一个promise指定多个成功/失败回调函数，都会调用吗？----会

2.2.Promise的API

1.Promise构造函数：new Promise(executor){}

  executor函数：是同步执行的，(resolve,reject) => {}

  reslove函数：调用resolve将Promise实例内部状态改为成功(fulfilled)

  reject函数：调用reject将Promise实例内部状态改为失败(rejected)

说明：executor函数会在Promise内部立即同步调用，异步代码放在executor函数中。

2.Promise.prototype.then方法：Promise实例.then(onFulfilled,onRejected)

  onFulfilled：成功的回调函数 (value) => {}

  onRejected：失败的回调函数 (reason) => {}

特别注意(难点)：then方法会返回一个新的Promise实例对象

3.Promise.prototype.catch方法：Promise实例.catch(onRejected)

  onRejected：失败的回调函数 (reason) => {}

说明：catch方法是then方法的语法糖，相当于：then(undefined,onRejected)，undefined在这里相当于占位

4.Promise.resolve方法：Promise.resolve(value)

说明：用于快速返回一个状态为fulfilled或rejected的Promise实例对象

 备注：value的值有两种情况：

​          (1)非Promise值：数字、数组、函数

​          (2)Promise值，如果Promise值是失败的，那么最后返回的是失败的对象

5.Promise.reject方法：Promise.reject方法(reason)

说明：用于快速返回一个状态必为rejected的Promise实例对象

6.Promise.all方法：Promise.all(promiseArr)

promiseArr：包含n个Promise实例的数组

说明：返回一个新的Promise实例，成功还是失败？以最先出结果的promise为准。

7.Promise.race方法：Promise.race(PromiseArr)

PromiseArr：包含n个Promise实例的数组

说明：返货一个新的Promise实例，成功还是失败？以最先出结果的promise为准。

2.3.Promise几个关键问题

2.3.1.如何改变一个Promise实例的状态？

(1)执行resolve(value)：如果当前是pending就会变为fulfilled

(2)执行reject(reason)：如果当前是pending就会变为rejected

(3)执行器函数(executor)抛出异常：如果当前是pending就会变为rejected

2.3.2.改变Promise实例的状态和指定回调函数谁先谁后？

1.都有可能，正常情况下是先指定回调函数再改变状态，但也可以先改变状态在指定回调。

2.如何先改变状态在指定回调？

​ 延迟一会在调用then()，给then添加定时器

3.Promise实例什么时候才能得到数据？

​    (1)如果先指定的回调，那当状态发生改变时，回调函数就会调用得到数据。

​    (2)如果先改变的状态，那当指定回调时，回调函数就会调用得到数据。

2.3.3.Promise实例.then()返回的是一个【新的Promise实例】，它的值和状态有什么决定？

1.简单表达：由then()所指定的回调函数执行的结果决定

2.详细表达：【牢记】

​    (1)如果then所指定的回调返回的是非Promise值a：

​      那么【新的Promise实例】状态为：成功(fulfilled)，成功的value为a

​    (2)如果then所指定的回调返回的是Promise实例p：

​      那么【新的Promise实例】状态、值，都与p一致

​    (3)如果then所指定的回调抛出异常：

​      那么【新的Promise实例】状态为rejected，reason为抛出的那个异常

const p = new Promise((resolve, reject) => {
   
           setTimeout(() => {
   
                resolve(100);
           },1000);
        });
        /* p.then(
            //value => {console.log('成功1',value);},
            //value => {console.log('成功1',value); return 200},//成功1 100
            value => {console.log('成功1',value); return Promise.reject('a')},
            reason => {console.log('失败1',reason);}
        ).then(
            value => {console.log('成功2',value);}, //成功2  undefined,返回undefined是因为第28行没有返回值给x，但是Undefined又属于非Promise，所以是成功了
            //value => {console.log('成功2',value);}, //成功2  200
            reason => {console.log('失败2',reason);}
            //reason => {console.log('成功2',value);}, //失败2  a
        ); */
        p.then(
            value => {
   console.log('成功1',value); return Promise.reject('a')}, //成功1 100
            reason => {
   console.log('失败1',reason);}
        ).then(
            value => {
   console.log('成功2',value); return true},
            reason => {
   console.log('失败2',reason); return 100} //失败2 a
        ).then(
            value => {
   console.log('成功3',value); throw 200}, //成功3 100
            reason => {
   console.log('失败3',reason