目录
前言
ES6 入门教程
仓库源码：https://github.com/bosombaby/javascript
基础知识
- promise是 ES6 解决异步编程的方案，可以链式调用，解决回调地狱的问题。提供了统一的错误处理机制，可以更好的控制异步操作的执行顺序。
- promise 是立即执行函数，resolve reject 都会在事件循环的末尾执行
常见用法
resolve/reject
- 用于快速创建一个已经处于fulfilled或rejected状态的Promise对象
- 如果传入的value是一个Promise对象，那么Promise.resolve将直接返回这个Promise对象，否则会返回一个新的 promise 实例
then/catch/finally
const promise = new Promise((resolve, reject) => {
resolve(1)
})
const p1 = promise
.then((num) => {
console.log('第一层 then', num)
return num + 1
})
.then((num) => {
console.log('第二层 then', num)
return num + 1
})
.then((num) => {
console.log('第三层 then', num)
throw Error('出错')
})
.catch((err) => {
console.log('捕获错误', err)
})
console.log(p1)
- then 和 catch 方法都返回一个新的 Promise 对象，因此可以使用链式调用的方式处理多个异步操作。
- 但是我们不使用 resolve 和 reject 操作 promise 状态，而是使用 return 一个函数值改变状态为 成功，throw 一个错误值并使用 catch 接收。如果不返回值，下一个 then 立即执行，没有接收参数
- catch 放在最后会捕获第一个出错的，finally 最后执行的函数
- catch 是 then 另一种方式的实现
async
const test1 = async () => {
return 1
}
- async 声明的函数返回值会使用 Promise resolve 封装，不写也会
- 可以在需要的地方使用 Promise.reject 抛出异常
await
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('success')
}, 1500)
})
async function test() {
console.log('before')
const data = await promise
console.log('data', data)
console.log('after')
}
//上面代码等价于
async function test1() {
console.log('before')
promise.then((data) => {
console.log('data', data)
console.log('after')
})
}
test1()
- await 相当于 Promise 的 then
- 会把在它后面的同步代码包裹在 then 里面，变成微任务，不是同步任务直接执行
try/catch
// 三、try catch对应Promise.catch
async function test() {
const promise = Promise.reject('出错') //2
try {
console.log('before') //1
const data = await promise
console.log('data', data)
} catch (e) {
console.error(e) //3
}
}
- try…catch 可捕获异常，代替了 Promise 的 catch
promise 手写
从一道让我失眠的 Promise 面试题开始，深入分析 Promise 实现细节 - 掘金
Promise.all
Promise.MyAll = function (promises) {
let result = []
return new Promise((resolve, reject) => {
promises.forEach((item, index) => {
Promise.resolve(item)
.then((res) => {
result[index] = res
if (Object.keys(result).length === promises.length) resolve(result)
})
.catch((err) => {
reject(err)
})
})
})
}
- 接受一个可遍历的 promise 实例数组，返回一个 新的 promise 实例，条件与
- 数组每个实例都成功，输出 resolve 的结果
- 数组有一个实例 reject 失败，Promise.all() 就失败，调用catch捕获错误
Promise.race
Promise.myRace = function (promises) {
return new Promise((resolve, reject) => {
for (let item of promises) {
Promise.resolve(item).then(resolve, reject)
}
})
}
- Promise.race 从字面意思理解就是赛跑，以状态变化最快的那个 Promise 实例为准
- 最快的 Promise 成功 Promise.race 就成功，最快的 Promise 失败 Promise.race 就失败
Promise.any
Promise.myAny = function (promises) {
let result = []
return new Promise((resolve, reject) => {
promises.forEach((item, index) => {
Promise.reject(item).then(resolve, (err) => {
result[index] = {
status: 'rejected', msg: err }
if (Object.keys(result).length === promises.length) reject(result)
})
})
})
}
- 和Promise.all 相反，有一个成功就成功，全部失败才失败，条件或
Promise.allSettled
Promise.myAllSettled = function (promises) {
let result = []
return new Promise((resolve, reject) => {
const processResult = (index, msg, status) => {
result[index] = {
status, msg }
if (Object.keys(result).length === promises.length) resolve(result)
}
promises.forEach((item, index) => {
Promise.resolve(item)
.then((res) => {
processResult(index, res, 'fulfilled')
})
.catch((err) => {
processResult(index, err, 'rejected')
})
})
})
}
- 所有实例都解决之后输出，不会中断执行
- 是不会变成 rejected 状态的，不管一组 Promise 实例的各自结果如何，Promise.allSettled 都会转变为 fulfilled 状态