关于promise的那些问题

我们在项目中经常会用Promise执行一些异步操作，但我们真的了解Promise么？Promise有哪些api呢？如何手写Promises呢？带着这些疑问笔者整理了一些有关的Promise的知识

什么是 promise

promise 是一种异步编程解决方案，有三种状态，pending(进行中),resolved(已完成),rejected(已失败),当 promise 的状态由 pending 转为 resolved 或 rejected 时，会执行对应的方法。状态一经改变就无法返回

promise 能解决什么问题

1. 回调地狱 多个回调相互嵌套导致代码维护困难，代码臃肿
2. 支持多并发的请求
3. 解决可读性差的代码问题
4. 解决代码的信任问题，promise只有一次决议

除了promise 还有什么其他的解决方法

• async await
• Generator
• setTimeout

setTimeout

setTimeout的真正作用是，在“任务队列”的现有事件的后面再添加一个事件，规定在指定时间执行某段代码。setTimeout添加的事件，会在下一次Event Loop执行。

Generators/yield

Generators与传统函数不同，Generator最大的特点是可以控制函数的执行。这里附上一段代码就能理解

function* foo(x) {
  let y = 2 * (yield (x))
  let z = yield (y / 3)
  return (x + y + z)
}
let it = foo([1, 2])
console.log(it.next()); //6
// console.log(it.next(12));//将上一个执行结果作废 12赋值上一个yield返回的值
console.log(it.next());

async/await

async/await是基于Promise实现的，所以也是非阻塞的。async/await看起来更加简洁，而且async/await让异步代码看起来更像是同步代码。

promise 的使用

1. 创建promise实例对象
2. 用then方法指定resolved状态和rejected状态的回调函数
3. 用catch方法指定rejected状态的回调函数

promise 的缺点

1. promise一旦执行，无法中途取消
2. promise 的错误无法在外部捕捉到
3. 外部很难检测 promise 内部的运行

promise的常用api

Promise.then():得到异步任务的正确结果

Promise.catch():获取异常信息

Promise.finally():无论成功还是失败都会执行

Promise.all():并发处理多个异步任务，所有任务执行完成才能得到结果

Promise.race():并发处理多个异步任务，只要有一个任务完成就能得到结果

一道Promise问题

红灯3秒亮一次，绿灯1秒亮一次，黄灯2秒亮一次；如何让三个灯不断交替重复亮灯？（用Promise实现）

function red() {
    console.log("red");
}
function green() {
    console.log("green");
}
function yellow() {
    console.log("yellow");
}
const light = function (timer, cb) {
    return new Promise(resolve => {
        setTimeout(() => {
            cb()
            resolve()
        }, timer)
    })
}
const step = function () {
    Promise.resolve().then(() => {
        return light(3000, red)
    }).then(() => {
        return light(2000, green)
    }).then(() => {
        return light(1000, yellow)
    }).then(() => {
        return step()
    })
}

step();

手写Promise

文章详解(只需六步，带你实现Promise原理 - 掘金 (juejin.cn))

//判定Promise的三种状态
const PENDING = "pending"
const FULFILLED = "fulfilled"
const REJECTED = "rejected"
class myPromise {
    constructor(executor) {
        //成功
        this.value = null
        //失败
        this.reason = null
        //判定初始状态
        this.state = PENDING
        this.onFulfilledCallbacks = []
        this.onRejectedCallbacks = []
        //初始化this
        this.resolve = this.resolve.bind(this)
        this.reject = this.reject.bind(this)
        try {
            executor(this.resolve, this.reject)
        } catch (error) {
            this.reject(error)
        }
    }
    resolve(value) {
        if (this.state !== PENDING) return
        //取到参数 修改状态
        this.value = value
        this.state = FULFILLED
        this.onFulfilledCallbacks.map((cb) => cb(value))
    }
    reject(reason) {
        if (this.state !== PENDING) return
        //取到参数 修改状态
        this.reason = reason
        this.state = REJECTED
        this.onRejectedCallbacks.map((cb) => cb(reason))
    }
    then(onFulfilled, onRejected) {
        const that = this
        onFulfilled = typeof onFulfilled === "function" ? onFulfilled : (v) => v
        onRejected =
            typeof onRejected === "function"
                ? onRejected
                : (err) => {
                    throw err
                }
        return new myPromise((resolve, reject) => {
            if (that.state === FULFILLED) {
                setTimeout(() => {
                    const result = onFulfilled(that.value)
                    if (result instanceof myPromise) {
                        result.then(
                            (value) => {
                                resolve(value)
                            },
                            (reason) => {
                                reject(reason)
                            }
                        )
                    } else {
                        resolve(result)
                    }
                }, 0)
            } else if (that.state === REJECTED) {
                setTimeout(() => {
                    onRejected(that.reason)
                }, 0)
            } else {
                that.onFulfilledCallbacks.push(onFulfilled)
                that.onRejectedCallbacks.push(onRejected)
            }
        })
    }
}