Promise的笔记

最新推荐文章于 2025-08-04 20:59:31 发布

原创最新推荐文章于 2025-08-04 20:59:31 发布 · 4.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

js基础学习专栏收录该内容

4 篇文章

订阅专栏

博客主要介绍了JavaScript中Promise的相关知识。Promise能将ES5回调写法分离，以链式调用执行回调函数。文中还阐述了链式写法，以及reject、catch、all、race等方法的用法，如all用于多异步并行请求汇总结果，race则执行最快完成的回调。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Promise的作用

简单来讲，Promise就是能把ES5的回调写法分离出来，在异步操作执行完成后，用链式调用的方式执行回调函数。它接受两个参数：resolve回调函数和reject回调函数，resolve执行fullfiled状态的回调，reject执行rejected的回调。

链式写法

const getToken = ()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log('token获取执行结束')
            resolve('238232397329732923923923923')
        },1000)
    })
}
const getUser = ()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log('user获取执行结束')
            resolve('小明')
        },1000)
    })
}
const getUserAge = ()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log('age获取执行结束')
            resolve('19岁')
        },1000)
    })
}
// 开始调用
getToken().then(token=>{
    console.log(token)
    return getUser()
}).then(userName=>{
    console.log(userName)
    return getUserAge()
}).then(age=>{
    console.log(age)
})

输出结果：
在这里插入图片描述

reject用法

reject跟resolve的写法一致，用于对rejected状态的回调处理。

const isToSchool = (userAge)=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            if(userAge>6 && userAge<12){
                resolve('该年龄符合小学阶段入学标准')
            }else{
                reject('该年龄不符合小学阶段入学标准')
            }
            
        },1000)
    })
}
isToSchool(12).then((resolve)=>{
    console.log('resolve：',res)
},(reject)=>{
    console.log('reject：',reject)
})
// 输出如下：
// reject： 该年龄不符合小学阶段入学标准

catch用法

catch和reject（then的第二个参数）有相同的作用，可以用于对rejected状态的回调处理。但是它还有另外一个作用，跟try…catch的catch作用类似，用于捕获代码的异常处理，防止因为报错而卡死。注意：它是对then里面的代码做异常处理。如下：

const isToSchool = (userAge)=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            if(userAge>6 && userAge<12){
                resolve('该年龄符合小学阶段入学标准')
            }else{
                reject('该年龄不符合小学阶段入学标准')
            }
            
        },1000)
    })
}
isToSchool(7).then((res)=>{
    console.log(user)   // user未声明
    console.log(res)
}).catch((reason)=>{
    console.log('我捕获到了错误：',reason)
})

在这里插入图片描述

all的用法

all方法是用于多个异步并行请求，全部执行结束之后，汇总成数组数据返回给resolve。

const getToken = ()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log('token获取执行结束')
            resolve('238232397329732923923923923')
        },1000)
    })
}
const getUser = ()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log('user获取执行结束')
            resolve('小明')
        },2000)
    })
}
const getUserAge = ()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log('age获取执行结束')
            resolve('19岁')
        },500)
    })
}
Promise.all([getToken(),getUser(),getUserAge()]).then((res)=>{
    console.log('三个函数都执行完毕了',res)
})

在这里插入图片描述

race的用法

race，赛跑。Promise提供这个race，是指谁跑得快就执行谁的回调。如下：

const getToken = ()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log('token获取执行结束')
            resolve('238232397329732923923923923')
        },1000)
    })
}
const getUser = ()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log('user获取执行结束')
            resolve('小明')
        },2000)
    })
}
const getUserAge = ()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log('age获取执行结束')
            resolve('19岁')
        },500)
    })
}
Promise.race([getToken(),getUser(),getUserAge()]).then((res)=>{
    console.log('三个函数都执行完毕了',res)
})

在这里插入图片描述