面试题(八):谈谈Promise的理解和使用

73 阅读2分钟

Promise: 采用链式调用,解决了回调地狱的问题,并加入错误处理机制。

Promise的基本概念

  • 状态:Promise 有三种状态:pending(初始状态)、fulfilled(已完成)和 rejected(已失败)。状态一旦从 pending 变为 fulfilled 或 rejected 就不能改变。

  • :fulfilled 状态下 Promise 会携带一个值,而 rejected 状态下会携带一个原因(通常是错误对象)。

  • 回调队列:在 pending 状态下,可以向 Promise 注册 onFulfilled 和 onRejected 回调函数。当状态改变时,这些回调会被调用。

.then() 方法

  • 参数处理.then() 方法应接收两个参数,分别为 onFulfilled 和 onRejected 函数。如果这些参数不是函数,则应提供默认行为。

  • 返回新的 Promise.then() 方法必须返回一个新的 Promise,允许链式调用。这个新的 Promise 应该能够处理 onFulfilled 和 onRejected 函数的返回值或抛出的错误。

  • 状态检查和回调执行:根据当前 Promise 的状态,决定是否立即执行 onFulfilled 或 onRejected 函数,或者将它们添加到回调队列中。

  • 异步执行:使用 setTimeout 函数来异步执行回调函数,以确保在当前事件循环结束后执行。

Promise常见方法

Promise.then()

Promise.catch()

Promise.finally()

Promise.resolve()

Promise.reject()

Promise.all()

所有的请求成功了,走.then(),在.then()中能得到一个数组,数组中是每个请求resolve抛出的结果,但是只要有一个失败了,走.catch(),在.catch()中获取第一个失败请求rejected抛出的结果

Promise.race() 需要处理多个异步操作,并且只需要关心第一个完成的操作的结果的情况,例如,当向某个API发送请求,但希望在特定时间内获取响应,否则视为超时,这时可以使用Promise.race()来设置超时功能

用Promise封装一个异步加载图片的方法

function loadImgAsync(url){
    return new Promise(function(resolve,reject){
        var img = new Image()
            img.onload = function(){
                resolve(img)
            }
            img.onerror = function(){
                reject(new Error('无法加载该路径图片' + url ))
            }
            img.src = url
    })
}