快速理解并使用Promise

自我记录

Promise 是一个构造函数, 通过 new 关键字实例化对象
Promise 是为了解决回调地狱而出现的;但本质上.then也在一直回调 所以更推荐使用async await
MDN文档: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise#描述
Promises/A+: https://promisesaplus.com/#point-1

一.Promise 基本使用

Promise 接受一个函数作为参数
在参数函数中接受两个参数
resolve: 成功函数
reject: 失败函数

new Promise((resolve, reject) => {
    
    })

let p1 = new Promise((resolve, reject) => {
    
    })
console.dir(p1)

promise 实例化对象有两个属性
state: 状态
result: 结果

1.1 promise 的状态(state) 3种

• pending: 可以理解为 准备, 待解决, 进行中.如上图所示 什么都不调用 pending
• fulfilled: 可以理解为 已完成, 成功.如下图所示 调用 resolve() 状态变成 fulfilled
• rejected: 可以理解为 已拒绝, 失败.如下图所示 调用 reject() 状态变成 rejected

1.2 promise 的状态(state) 改变以及结果

通过调用 resolve()和 reject()改变当前 promise 对象的状态
通过调用 resolve(传参)和 reject(传参) 可以拿到result结果
注意 promise 状态只能改变一次 也就是说同时调用resolve() reject() 先调用哪个就会执行哪个 并结束

成功的状态以及传参数和结果

let p1 = new Promise((resolve, reject) => {
    
    
    resolve()
})
let p2 = new Promise((resolve, reject) => {
    
    
    resolve('success')
})
console.dir(p1);
console.dir(p2);

失败的状态以及传参数和结果

let p1 = new Promise((resolve, reject) => {
    
    
    reject()
})
let p2 = new Promise((resolve, reject) => {
    
    
    reject('err')
})
console.dir(p1);
console.dir(p2);

状态只能改遍一次

扫描二维码关注公众号，回复： 16524480 查看本文章

let p1 = new Promise((resolve, reject) => {
    
    
    resolve('success') // 先调用成功的
    reject('err')
})
let p2 = new Promise((resolve, reject) => {
    
    
    reject('err') // 先调用错误的
    resolve('success')
})
console.dir(p1);
console.dir(p2);

二.Promise 实例上的方法 三个

Promise 实例化方法中共有三个方法
then catch finally

2.1 then

then: 指定用于得到成功value的成功回调和用于得到失败reason的失败的回调，并日将返回一个新的promise实例化对象
成功的状态：执行then方法的第一个回调函数
失败的状态：执行then方法的第二个回调函数

成功

 let p1 = new Promise((resolve, reject) => {
    
    
     resolve('success')
 })
 p1.then(
     (value) => {
    
    
         console.log('成功', value);
     },
     (reason) => {
    
    
         console.log('失败', reason);
     }
 )
 console.dir(p1);

失败

let p1 = new Promise((resolve, reject) => {
    
    
    // resolve('success')
    reject('err')
})
p1.then(
    (value) => {
    
    
        console.log('成功', value);
    },
    (reason) => {
    
    
        console.log('失败', reason);
    }
)
console.dir(p1);

2.2 catch

then方法中是传递了两个参数,也可以不传,也可以只传成功的回调函数
如果只传递了成功的回调函数,那么就需要catch来执行失败的回调函数
当promise的状态改为rejected时, 被执行
当promise执行体中出现代码错误时, 被执行
同时写了then的第二个回调函数以及catch时会执行then的第二个回调函数

let p1 = new Promise((resolve, reject) => {
    
    
    // 以下都是出错的情况
    reject('err')
    // console.log(a)
    // throw new Error('出错了')
})
p1.then((value) => {
    
    
        console.log('成功', value);
    })
    .catch((reason) => {
    
    
    console.log('失败', reason);
})
console.dir(p1);

同时写了then的第二个回调函数以及catch时

let p1 = new Promise((resolve, reject) => {
    
    
    // 以下都是出错的情况
    reject('err')
    // console.log(a)
    // throw new Error('出错了')
})
p1.then(
    (value) => {
    
    
        console.log('成功', value);
    },
    (reason) => {
    
    
        console.log('失败then', reason);
    }
).catch((reason) => {
    
    
    console.log('失败catch', reason);
})
console.dir(p1);

2.3 finally

finally是ES9(ES2018)中新增的特性
表示无论Promise对象变成了fulfilled还是rejected状态，最终都会执行
finally 方法回调函数参数是不接受参数的!

let p1 = new Promise((resolve, reject) => {
    
    
    resolve('success')
})
p1.then(
    (value) => {
    
    
        console.log('成功', value);
    },
    (reason) => {
    
    
        console.log('失败then', reason);
    }
).catch((reason) => {
    
    
    console.log('失败catch', reason);
}).finally(() => {
    
    
    console.log('最终我都被执行了');
})
console.dir(p1);


let p2 = new Promise((resolve, reject) => {
    
    
    reject('err2')
})
p2.then(
    (value) => {
    
    
        console.log('成功2', value);
    },
    (reason) => {
    
    
        console.log('失败then2', reason);
    }
).catch((reason) => {
    
    
    console.log('失败catch2', reason);
}).finally(() => {
    
    
    console.log('最终我都被执行了2');
})
console.dir(p2);

还有一些静态方法这里就不多体现,掌握如上内容个人认为可以进行Promise的基本使用