Promise 实操

关于 Promise 的解释网上一大堆, 不在此做详细解释

本片只易懂实操, 介绍一下 Promise 具体用法

可直接复制代码运行看效果, 结果已验证

• 异步
• 本质是一个对象
• 一旦状态决议就不会再改变

// 成功: resolve, 失败: rehect, pending: 进行中
new Promise((resolve, reject) => {})

普通用法

const aaa = (a = 1) {
    return new Promise((resolve, reject) => {
        console.log('统一处理一些操作')
        if(a === 1) {
            resolve({msg: 'success'} )
        } else {
            reject({msg: 'error'})
        }
    })
}

aaa(16).then(res => {
    console.log(res)
}, err => {
    console.log(err)
})

// '统一处理一些操作'
// {msg: 'error'}

catch

• 捕获异步操作 reject 返回结果 类似于 then 第二个值

const bbb = new Promise((resolve, reject) => {
        if (1 === 1) {
            reolve({msg: 'success'})
        } else {
            reject({msg: 'error'})
        }
    })
}

bbb.then(res => {
    console.log(res)
}).catch(err => {
    console.log(err)
})

// 'error'

• 处理不可预测的错误 (划重点,要考)

const bbb = new Promise((resolve, reject) => {
    bMethods() // 注意此处Bmethods方法并未定义 --- 未知错误
    if (1 === 1) {
        resolve({msg: 'success'})
    }
})

bbb.then(res => {
    console.log(res)
}).catch(err => {
    console.log('如果未知错误,告诉我一下')
})

// '如果未知错误,告诉我一下'

all

• 将多个 Promise 实例, 包装秤新的 Promise 实例, 新实例状态由每个实例状态决定
• 只有p1、p2、p3状态全部变为 resolve , p的状态才会变为 resolve, 此时p1、p2、p3、但返回值组成一个数组
• 即使某个实例抛出错误, 其余实例仍会执行

let timer = 0 // 用以观察各实例执行顺序
setInterval(() => {
    timer += 1
}, 1000)

// 定义三个实例
const p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('p1', timer)
        resolve('p1 success')
    }, 1000)
})
const p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('p2', timer)
        resolve('p2 success')
        reject('p2 error')
    }, 2000)
})
const p3 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('p3', timer)
        resolve('p3 success')
    }, 3000)
})

// all
const p = Promise.all([p1, p2, p3])
p.then((res) => {
    console.log('p', res)
}).catch(err => {
    console.log('p', err)
})

console.log('end', timer)

// end 0
// p1 1
// p2 2
// p3 3
// p ['p1 success', 'p2 success', 'p3 success']

• 只要p1、p2、p3之中有一个被 reject , p的状态就变成了 reject , 且仅立即输出第一个被 reject的实例的返回值, 其他仍会执行

let timer = 0;
setInterval(() => {
    timer += 1
}, 1000)

const p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('p1', timer)
        resolve('p1 success')
    }, 1000)
})
const p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('p2', timer)
        reject('p2 error')
    }, 2000)
})
const p3 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('p3', timer)
        reject('p3 error')
    }, 2000)
})

const p = Promise.all([p1, p2, p3]);
p.then((res) => {
    console.log('p', res)
}).catch((err) => {
    console.log('p', err)
})

console.log('end', timer)

// end 0
// p1 1
// p2 2
// p p2 error
// p3 3

race

• 将 多个Promise 实例包装成 一个实例 输出
• 只要一个实例完成, 会立马抛出, 无视 resolve || reject

let timer = 0
setInterval(() => {
    timer += 1
}, 1000)

const p1 = new Promise((resolve, reject) => {
	setTimeout(()=>{
        console.log('p1', timer)
		reject('error p1')
	}, 1000)
})
const p2 = new Promise((resolve, reject) => {
	setTimeout(()=>{
        console.log('p2', timer)
		reject('error p2')
	}, 2000)
})
const p3 = new Promise((resolve, reject) => {
	setTimeout(()=>{
        console.log('p3', timer)
		reject('error p3')
	}, 2000)
})

const p = Promise.race([p1,p2,p3])
p.then((res) => {
	console.log('p', res)
}).catch((err) => {
	console.log('p', err)
})

console.log('end', timer)

// end 0
// p1 1
// p error p1
// p2 2
// p3 3

链式调用

const p1 = new Promise((resolve, reject) => {
	setTimeout(()=>{
		resolve('p1 success')
	}, 1000)
})

const p2 = new Promise((resolve, reject) => {
	setTimeout(()=>{
		resolve(p1)
	}, 2000);
})

p2.then((res) => {
	console.log(res)
})

// 2s后输出: p1 success