Promise

62 阅读1分钟
  • 一个Promise(解决了回调地狱)对象代表一个异步操作,有三种状态:pending fulfilled rejected;只有异步操作的结果可以决定当前是那种状态其任何操作无法改变这个状态,一旦状态被改变就不会再变;且promise的状态只能从pending->fulfilled或者pending->rejected。有了promise对象就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。
  • 缺点:一旦对象被创建就会立即执行,无法取消;如果不设置回调内部抛出的错误不会反应到外部;当处于pending状态时无法得知目前进展到哪一个阶段刚开始还是快完成。
let flag = true
const promise = new Promise((resolve, reject) => {
    if(flag) reject('123')
    else resove('321')
})
promise.then(res => {
     //resove后的回调
}).catch(res =>{
    //reject后的回调,catch其实是then(undefined, () => {}) 的语法糖
}).finally(() => {
    //无论什么结果都会执行
})
  • 异步加载图片
const url = '图片路径'
const imgPromise = (url) => {
    return new Promise((resolve,reject) => {
        const img = new Image()
        img.src = url
        img.onload = () => {
            resolve(img)
        }
        img.onerror = () => {
            reject(new Error('图片有误'))
        }
    })
}
imgPromise (url).then(img => {
    document.body.appendChild(img)
}).catch(error => {
    document.body.innerHTML = error
})
  • Promise.all()
  • Promise.race()
  • Promise.settled()
  • Promise.any()