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
})
}