promise知识点总结

目录

一.promise是什么？

1.1promise理解

1.2使用promise的优点

1.4promise初体验（用promise做一个类似于抽奖的东西）

 二.promise的状态以及对象的值

2.1promise的三种状态

2.2promise的状态的改变

2.3promise对象的值——实例对象中的另外一个属性promiseResult

三.如何使用Promise

3.1API

3.1.1Promise的构造函数：Promise(excutor){}

3.1.2Promise.prototype.then方法：（onResolved,onRejected）=>{}

3.1.3Promise.prototype.catch方法：（onRejected）=>{}

3.2promise的几个关键问题

3.2.1promise.resolve方法：（value）=>{}

3.2.2promise.reject方法:(reason)=>{}

3.2.3Promise.all方法;(promises)=>{}

3.2.4Promise.race方法：(promises)=>{}

3.2.5一个promise指定多个成功/失败回调函数，调用问题

3.2.6promise.then()返回的新的promise对象由什么决定

3.2.7promise异常穿透

3.2.8中断promise链

四.Promise的自定义封装

4.1promise自定义封装-resolve和reject代码实现

---

---

---

---

一.promise是什么？

1.1promise理解

抽象表达：promise是一门新的技术（ES6规范），是js中进行异步编程的新解决方案（旧方案是使用回调函数）

异步编程种类：fs文件操作，AJAX，定时器

具体表达：从语法上说是一个构造函数，从功能上说promise对象用来封装一个异步操作并可以取得成功/失败的结果值

1.2使用promise的优点

指定回调函数的方式更加灵活（promise:启动异步任务=>返回promise对象=>给promise对象绑定回调函数）

1.4promise初体验（用promise做一个类似于抽奖的东西）

    

        
promise初体验
        点击抽奖
    
    

 二.promise的状态以及对象的值

2.1promise的三种状态

promise的状态其实是实例对象中的一个内置属性(PromiseState)，所以不能够对该属性做直接的操作

• 1.pending未定的状态
• 2.fullfilled/resolved
• 3.rejected

2.2promise的状态的改变

只有两种情况，且一个promise对象只能改变一次，不能由成功变失败，也不能失败变成功

• pending->resolved
• pending->rejected

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

2.3promise对象的值——实例对象中的另外一个属性promiseResult

该值保存了异步任务成功/失败的结果

其结果由resolve和reject执行获得

三.如何使用Promise

3.1API

3.1.1Promise的构造函数：Promise(excutor){}

• excutor函数:执行器(resolve,reject)=>{}
• resolve函数：内部定义成功时我们调用的函数value=>{}
• reject函数：内部定义失败时我们调用的函数reason=>{}

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

废话不多说，上示例代码：

 
//输出结果为：
//111
//222

3.1.2Promise.prototype.then方法：（onResolved,onRejected）=>{}

• onResolved函数：成功的回调函数(value)=>{}
• onRejected函数：失败的回调函数(reason)=>{}

    
    //结果为heihei

3.1.3Promise.prototype.catch方法：（onRejected）=>{}

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

    
         //控制台输出结果为no

3.2promise的几个关键问题

3.2.1promise.resolve方法：（value）=>{}

value:成功的数据或promise对象

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

3.2.2promise.reject方法:(reason)=>{}

reason:失败的原因

说明：返回一个失败的promise对象

3.2.3Promise.all方法;(promises)=>{}

promises:包含n个promise的数组

说明：返回一个新的promise对象，只有数组中的所有promise成功才成功

3.2.4Promise.race方法：(promises)=>{}

promises:包含n个promise的数组

说明：返回一个新的promise对象，第一个完成的promise的结果状态就是最终状态

3.2.5一个promise指定多个成功/失败回调函数，调用问题

（当promise改变对应状态时都会调用）

3.2.6promise.then()返回的新的promise对象由什么决定

由它的回调函数的返回值决定，如果是一个promise对象，则其根据状态返回结果，如果是非promise对象，则。。

3.2.7promise异常穿透

3.2.8中断promise链

四.Promise的自定义封装

4.1promise自定义封装-resolve和reject代码实现

02-promise.js

//如果不添加.then方法则会报错说p.then不是一个函数
//因为在下面的显示原型中没有then方法，所以实例中的then方法也没有
function Promise(executor){
    //添加属性
    this.PromiseState="pending";
    this.PromiseResule=null;

    //如果直接使用this,则在下面的函数声明当中，this指向window
    const self=this;

    //resolve 函数
    function resolve(data){
        console.log(this);
        console.log(self);
        //1.修改对象状态(promisestate)
        self.PromiseState="fulfilled";
        //2.设置对象结果值(promiseresult)
        self.PromiseResule=data;
    }

    //reject函数声明
    function reject(data){
       //1.修改对象状态(promisestate)
        self.PromiseState="fulfilled";
        //2.设置对象结果值(promiseresult)
        self.PromiseResule=data;
    }

    //同步调用【执行器函数】
    executor(resolve,reject);
}
//添加then方法
 Promise.prototype.then=function(onResolved,onRejected){
 }

html文件

今天困了，明天上午还有课，以后会继续更新哦~~一起加油吧