ES6中 Promise 对象使用以及一些面试点

左手的ㄟ右手 2023-07-17 15:57 40阅读 0赞

`JavaScript`是单线程执行的，由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。我么无法确定异步执行何时会结束，而有些时候我们下一个函数的执行需要上一个函数的调用，这样就会形成回调地狱。

![在这里插入图片描述][20200323161708595.jpg_pic_center]  
`Promise` 是一个对象，它代表了一个异步操作的最终完成或者失败。他有两个回调函数`resolve`和`reject`分别代表着请求成功的状态和请求失败的状态。

const Pro = new Promise((resolve,reject) => { 
    	if(Math.random() > 0.5){ 
    		resolve('请求成功') 
    	}else{ 
    		reject('请求失败')
    	}
    })

请求成功推送的状态`then()`

Pro.then(result => { 
        console.log(result)
    })

请求失败推送的状态`catch()`

Pro.catch(result => { 
        console.log(result)
    })

`Promise` 可以进行链式调用，简洁代码。

Pro.then(result => { 
        console.log(result)
    }).catch(result => { 
        console.log(result)
    })

除了链式调用我们还可以这样写

Pro.then(data => { 
        console.log(data)
    }, err => { 
        console.log(err)
    })

可见`Promise`最大的好处是在异步执行的流程中，把执行代码和处理结果的代码清晰地分离了。

then

catch

new promise

reslove

reject

`Promise`还可以使用`all`并行执行异步任务，但是在`Promise`队列中的函数存在一个推向了`reject`，则无法执行`then`里面的函数

const Pro1 = new Promise((resolve, reject) => { 
        if (Math.random() > 0.5) { 
            resolve(true)
        } else { 
            reject(true)
        }
    })
    
    const Pro2 = new Promise((resolve, reject) => { 
        if (Math.random() > 0.5) { 
            resolve(true)
        } else { 
            reject(true)
        }
    })
    
    Promise.all([Pro1, Pro2]).then(function(results) { 
        console.log(results);
    });
    
    // [true, true]

`race` 当参数中的任意一个`promise`对象完成时候，就马上回去使用完成的这个`promise`对象的结果，无论这个结果成功还是失败

const Pro1 = new Promise((resolve, reject) => { 
        if (Math.random() > 0.5) { 
            resolve(true)
        } else { 
            reject(true)
        }
    })
    const Pro2 = new Promise((resolve, reject) => { 
        if (Math.random() > 0.5) { 
            resolve(true)
        } else { 
            reject(true)
        }
    })
    Promise.race([Pro1, Pro2]).then(function(results) { 
        console.log(results);
    });
    
    // true

--------------------

#### 面试点 ####

**未决阶段的处理函数是同步的，会立即执行**

**`thenable`和`catchable`函数是异步的，就算会立即执行，也是会加入微队列中等待执行，加入微队列**

**在未决阶段的处理函数中，如果发生未捕获的错误，会将状态推向`rejected`，并且会被`catchable`捕获**

const Pro = new Promise((resolve, reject) => { 
        if (Math.random() > 0.5) { 
            resolve('请求成功')
        } else { 
            throw ('请求失败')
        }
    })

**一旦状态推向了已决阶段，无法再去做任何的改变**

**如果当前的`promise`是未决的，得到的新的`promise`是挂起状态**

const pro1 = new Promise((resolve, reject) => { 
        resolve(1)
    })
    console.log(pro1)
    const pro2 = pro1.then(result => result * 2) // 通过then调用以后，又是返回的一个全新promise对象
    console.log(pro2) //pending状态 等待前面的处理结果
    
    // Promise {<resolved>: 1}
    // Promise {<pending>}

**如果前面的`promise`的后续处理是返回一个`promise`，则返回的`promise`状态和后续处理返回的`promise`状态保持一致**

const pro1 = new Promise((resolve,reject) => { 
    	resolve(1)
    })
    
    const pro2 = new Promise((resolve,reject) => { 
    	resolve(2)
    })
    
    const pro3 = pro1.then(result => { 
    	return pro2;   // 推一个对象过去，这个对象不能是这种promise，推pro2的状态
    })
    
    pro3.then(result => { 
    	console.log(result)
    })

[20200323161708595.jpg_pic_center]: /images/20230528/f295d9f5773c40469e7b57325b7eaf78.png