vue promise用法 原理

promise 就是一个容器 里面保存着未来才会结束的事件
通常就是异步操作的结果 从语法上说 promise 是一个对象
可以获取异步的消息,各种异步操作可以用同样的方式处理

promise有三种状态 不受外界影响
pending 进行中
fulfilled 已成功
rejected 已失败

优点
在异步流程中 把执行代码和处理结果的代码清晰的分离了,将异步操作以同步的流程表达出来 避免了层层嵌套的回调函数

promise 对象提供统一接口 API 是的控制异步操作更容易 只有异步操作的结果 可以决定当前是哪一种状态 任何其他操作都无法改变

promise 任何时候都可以得到这个结果 一旦确定好最终状态就不会在改变
结果两种可能 去欸的那个好结果 状态就凝固了这个时候就称为
resolved(已定型)
从 pending 变为 fulfilled
从 pending 变为 rejected
如果改变已经发生了 再对promise 对象添加回调函数 也会立即得到这个结果 而事件 错过了再去监听就没了

实例 小demo
武林大战 天下第一 比武 但是这个比武的过程 其实老百姓也不关注,只会流传着 X 赢了 ,也根本不关注过程
赌王大战 大于 4点就赢了

 var test = (resolve, reject) => {
        var randomNum = Math.random() * 10
        console.log("随机是:", randomNum);
        // 比武什么时候结束 是不确定 ,用定时器模拟这个不确定
        setTimeout(() => {
            if (randomNum > 4) {
                resolve("周润发 赌王 赢了")
            } else {
                reject("周润发 问鼎赌王 失败")
            }
        }, 1000 * randomNum)
    }

    //  创建 promise 对象
    var p1 = new Promise(test)

    //  then方法返回的 是一个新的 promise对象,(不是原来那个 promis实例)
    //  因此 我们可以采用链式写法
    var p2 = p1.then(res => {
        console.log("成功:", res);
    })

    var p3 = p2.catch(err => {
        console.log("失败:", err);
    })

优化后的

new Promise((resolve, reject) => {
            var randomNum = Math.random() * 10
            console.log("随机是:", randomNum);
            // 比武什么时候结束 是不确定 ,用定时器模拟这个不确定
            setTimeout(() => {
                if (randomNum > 4) {
                    resolve("周润发 赌王 赢了")
                } else {
                    reject("周润发 问鼎赌王 失败")
                }
            }, 1000 * randomNum)
        }).then(res=>{
            console.log("成功:",res);
        }).catch(err=>{
            console.log("失败:",err);
        })

总结:
Promise 最大的好处 就是在异步流程中,把执行代码和处理结果的代码清晰的分离了

• 将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数
• 此外,Promise 对象提供统一接口API,使得控制异步操作更容易