Promise的基本操作

Promise的状态

Promise实例的一个属性 [[PromiseState]]，它有三种状态分别是：

• 初始状态pending
  • 创建Promise对象时，没调用resolve或reject时，相当于初始状态(padding)。这个初始状态会随着你调用resolved或reject时发生改变，且只能改变一次。
    
• 成功状态 resolved | fulfilled
  • 当Promise对象执行resolved()函数时，状态会从初始状态改为成功状态。
    
• 失败状态 rejected
  • 当Promise对象执行rejected()函数时，状态会从初始状态改为失败状态。
    

Promise对象的值

Promise实例对象的一个属性[[PromiseResult]]
保存对象异步任务成功 | 失败的结果

• resolved
• rejected

Promise的流程图

Promise的简单使用

// promise 实现
// resolve 解决 函数类型的数据
// reject  拒绝 函数类型的数据
const p = new Promise((resolve, reject) => {
    setTimeout(() => {
        let n = random(1, 100);
        if (n <= 30) {
            resolve(n);
        } else {
            reject(n);
        }
    }, 1000)
});
p.then(
    (value) => console.log(`恭喜中奖，你的随机数是===>${value}`), // 成功时的回调
    (reason) => console.log(`再接再厉，，你的随机数是===>${reason}`) // 失败时的回调
)

Promise.resolve()

说明：该方法返回一个 成功|失败的Promise对象

/**
 * Promise.resolve
 * 如果传入的是一个非Promise对象 则返回结果为成功的Promise对象
 * 如果传入的为Promise对象，则传入参数的结果决定了resolve的结果
 */

let p1 = Promise.resolve(521);
// 返回一个状态为fulfilled，属性值为521的 Promise对象
console.log(p1)

let p2 = Promise.resolve(new Promise((resolve, reject) => {
    reject('error');
}))
// 返回一个状态为rejected的Promise对象，注意如果返回状态为rejected那么要用 then / catch 处理
console.log(p2)

Promise.reject()

说明：返回一个状态为失败的Promise对象

let a = Promise.reject(111);
// 返回一个状态为失败，属性值为111的Promise对象
console.log(a);

let b = Promise.reject(new Promise(resolve,reject)=>{
	resolve(222);
})
// 返回一个状态为失败的，Promise对象 
// 注意传入参数不管结果是什么，返回的状态始终都是失败。
console.log(b)

Promise.all()

说明：返回一个 成功|失败的Promise对象，传入参数是一个数组。只有当传入的Promise对象都是成功的才返回成功；只要有一个是失败的就直接失败，失败结果是传入参数首次失败的结果。

let p3 = Promise.resolve('111');
let p4 = Promise.resolve('222');
let p5 = Promise.resolve('33');
let p6 = Promise.all([p3, p4, p5])
console.log('p6', p6) // 状态：成功 结果：所有传入参数返回结果组成的数组 ['111','222','33']

p3 = Promise.reject('111');
p4 = Promise.resolve('222');
p5 = Promise.resolve('33');
p6 = Promise.all([p3, p4, p5])
console.log('p6', p6) // 状态：失败 结果：首次失败的返回结果

Promise.race

说明：返回一个成功|失败的Promise对象，传入的参数为一个数组，返回状态和结果为第一个执行结束的Promise对象的状态和结果。

let p3 = new Promise((resolve, reject) => {
    reject('error')
});
let p4 = Promise.resolve('222');
let p5 = Promise.resolve('33');
let p6 = Promise.race([p3, p4, p5])
console.log('p6', p6) // 状态：失败 结果：error

p3 = new Promise((resolve, reject) => {
    setTimeout(() => reject('error'), 1000)
});
p4 = Promise.resolve('222');
p5 = Promise.resolve('33');
p6 = Promise.race([p3, p4, p5])
console.log('p6', p6) // 状态：成功 结果：222

Promise的链式调用

• Promise的then()和catch()都可以返回一个新的Promise对象。可以使用链式调用
• 通过then，catch串连多个同步/异步任务
• 如果最后一个then()不返回一个Promise对象，那么再调用then，则输出结果为undefined

let p = new Promise((resolve, reject) => {
    setTimeout(() => resolve('ok'), 1000)
})

p.then(res => {
    console.log(res); // 输出ok
    return new Promise((resolve, reject) => resolve('success'))
}).then(res => {
    console.log(res) // 输出 success
})
///
p = new Promise((resolve, reject) => {
    setTimeout(() => reject('error'), 1000)
})

p.catch(e => {
    console.log(e) // error
    return new Promise((resolve, reject) => resolve('success'))
}).then(res => console.log(res) // success
)

Promise的异常穿透

• 当使用promise的then链式调用的时候，可以在最后指定失败的回调。
• 前面任何操作出现了异常，都会传到最后的回调中处理。

let p = new Promise((resolve, reject) => {
    //resolve('ok') // 输出结果为 111 222 error2
    //reject('error') // 输出结果为 error
})

p.then(res => {
    console.log(111)
}).then(res => {
    console.log(222);
    return new Promise((resolve, reject) => reject('error2'))
}).catch(e => console.log(e))

如何中断 promise 链？

当使用 promise 的 then 链式调用时, 在中间中断, 不再调用后面的回调函数 。
可以通过在then函数中返回一个pending/rejected状态的Promise来中断。

let p = new Promise((resolve, reject) => {
    resolve('ok') // 输出结果为 111 error2
})

p.then(res => {
    console.log(111)
    return new Promise((resolve, reject) => reject('error2'))
}).then(res => {
    console.log(222);
}).catch(e => console.log(e))
///
let p2 = new Promise((resolve, reject) => {
    resolve('ok') // 输出结果为 111
})

p2.then(res => {
    console.log(111)
    return new Promise(() =>{})
}).then(res => {
    console.log(222);
}).catch(e => console.log(e))