手撕系列——>手撕Promise

Promise ES6最常考的内容,手撕promise更是大厂必备,
接下来就让我稍微介绍一下,然后手撕


一、简单介绍

Promise本质上是一个构造函数,实例化Promise才会变成一个对象。

const p = new Promise()

Promise的作用就是解决回调地狱的,是一种优雅的编程技术,回调地狱如下

 $.ajax({
        url:'http://www.baidu.com',
        success:function(res){
            $.ajax({
                url:'http://www.baidu.com',
                success:function(res){
                    $.ajax({
                        url:'http://www.baidu.com',
                        success:function(res){
                            console.log(res)
                        }
                     })
                }
            })
        }
    })

类似这种回调套回调,可读性极差,维护体验很差,
所以出现了Promise

 new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('fu')
                //或
                reject('error message')
            }, 1000)
        }).then((data) => {
            console.log(data)
        }).catch(error => {
            console.log(error)
        })

想把Promise实例化成一个promise对象,必须传一个参数
这个参数必须是个函数,这个函数,有两个参数,resolve,reject。

resolve和reject是调用函数。
如果promise实例对象里面的异步成功返回了,调用resolve,执行then这个回调函数;如果promise实例对象里面的异步返回失败了,调用reject,执行catch这个回调函数。

resolve和reject又可以传参数,传异步返回的结果,会在then和catch中获取(打印);

当调用resolve函数的时候(异步成功返回的时候),promise实例对象的状态就由pending转变为fuilled(或resolved),反之,调用reject函数,由pending,转变为rejected状态。

Promise构造函数传的第一个参数(executor(执行器))内部是同步的

new Promise(executor)

new Promise((resolve,reject)=>{
	console.log('这里是同步执行的')
})

二、几个方法

1. Promise.resolve

Promise.resolve(value)

value值为(非Promise实例化的对象)的时候,返回的都是 成功状态promise对象
value值为(Promise实例化的对象)的时候,返回的是 成功状态的promise对象 或 失败状态的promise对象,这个成功或失败由传入的这个value的结果决定


2. Promise.reject

Promise.reject(value)

这个value传啥都是 失败状态的promise对象


3. Promise.all

let p1 = new Promise((resolve,reject)=>{
	resolve('ok')
})
let p2 = new Promise((resolve,reject)=>{
	resolve('ok')
})
let p3 = new Promise((resolve,reject)=>{
	resolve('ok')
})

Promise.all([p1,p2,p3])

Promise.all参数是一个数组。
Promise.all三个(异步函数,异步请求)全部返回成功,Promise.all才是一个成功状态的promise对象,只要有一个失败,Promise.all就是一个失败状态的promise对象

3. Promise.race

let p1 = new Promise((resolve,reject)=>{
	resolve('ok')
})
let p2 = new Promise((resolve,reject)=>{
	resolve('ok')
})
let p3 = new Promise((resolve,reject)=>{
	resolve('ok')
})

Promise.race([p1,p2,p3])

Promise.race参数是一个数组。
Promise.race三个(异步函数,异步请求),第一个返回的状态,决定了Promise.race最后的结果,如果第一个返回的状态是成功,怎么着Promise.race最后的结果都是成功,如果第一个返回的状态是失败,怎么着Promise.race最后的结果都是失败

三、几个问题

(1) 会执行多次回调

let p1 = new Promise((resolve,reject)=>{
	resolve('ok')
})

p1.then(v=>{
   console.log(第一次打印v)
})
p1.then(v=>{
   console.log(第二次打印v)
})

未完…

上一篇:Javascript:Promise对象基础


下一篇:Promise.all()、Promise.allSettled()、Promise.race()三兄弟的区别