关于Promise的原理太多了,本小鱼儿就不参合原理的讲解了,毕竟讲也是copy,不如直接看大佬们的讲解。
so,本文直接上实用代码
一、创建Promise实例
const example = new Promise(function(resolve, reject) {
const num = 1
if (num = 1){
return resolve(value); // 返回成功状态
console.log("返回成功状态") // 加了return不会执行
} else {
return reject(error); // 返回失败状态
}
});
二、使用实例方法
1.then()
example.then((res)=>{
console.log("这是成功的回调,接收then方法调用返回的Promise")
},(err)=>{
console.log("这是失败的回调")
});
2.catch()
example.then((res) => {
// 返回成功状态则执行
}).catch((err) => {
// 发生错误执行
return '错误处理完毕' // return Promise的resolve结果
}).then((res) => {
console.log("处理了错误后运行代码")
});
3.finally()
example.then(function () {
// 执行成功
}).finally((res) => {
// 无论成功失败都会执行
// 并且获取不到返回值
});
4.Promise.all()
const promiseArr = [1,2,3].map(item => {
return new Promise((resolve,reject) => {
return resolve(item)
})
})
const exampleAll = Promise.all(promiseArr).then((res)=>{
// 所有任务执行成功之后返回结果
// 如果有失败,走catch()方法
});
5.Promise.race()
const promiseRace = [1000,2000,3000].map(item => {
return new Promise((resolve,reject) => {
setTimeout(() => resolve(item) ,item)
})
});
Promise.race(promiseRace).then((res) => {
// 返回执行最快的
console.log(res) // 1000
}).catch((err) => {})
6.Promise.resolve()
Promise.resolve(100).then((res) => {
// Promise.resolve返回一个Promise实例,实例resolve了100
console.log(res) // 100
})
7.Promise.reject()
Promise.reject("err").catch((err) => {
// Promise.reject返回一个Promise实例
console.log(err) // "err"
})
相信你也发现了,简单极了,没错,我就写我常用的嘿,下面是配合async...await使用
三、async
async function make() {
return "async函数返回一个Promise对象"
}
make().then((res) => {
console.log('获取到了对象值')
})
四、await
async function makeAwait() {
const res = await make()
// await函数后面是Promise对象则返回该对象的结果
const value = await "value"
// 非Promist则返回对应的值
// await Promise.reject('Promise对象为失败状态,async函数会中断执行);
// 下面代码不执行
// console.log('我不执行')
}
await dealy() // 顶层await,注意使用地方
function dealy() {
return new Promise(resolve => { // 为什么Promise可以延迟,只有定时器则延迟失败,盲猜是任务队列问题,以后再看吧
setTimeout(() => {
resolve(console.log('延迟一秒'));
}, 1000);
});
console.log("我执行延迟了一秒")
五、Promise,async...await
const { data } = await getListApi()
// ok,基本使用其实也就axios比较多...,node后台sql也有用过
好了,后续遇到相关问题我会更新文章的,前期发文就当自己复习了