【js】what is Promise和手写实现简易版Promise

LMou 发布于2019-08-23 18:25 / 805人阅读

摘要：有三种状态，等待中，已完成，已失败。对象状态不受外界影响，只有异步操作的结果可以改变状态，这就是的由来怎么用接受一个函数作为参数，这个参数函数的两个参数分别是和，用来执行了两种状态的回调函数。当实例生成后，用方法来指定两种状态的回调函数。

什么是Promise

官方的解释：Promise是一个用来传递异步操作消息的对象。
Promise有三种状态，pending（等待中），resolved（已完成），rejected（已失败）。对象状态不受外界影响，只有异步操作的结果可以改变状态，这就是“promise“的由来

怎么用Promise

Promise接受一个函数作为参数，这个参数函数的两个参数分别是resolved和rejected，用来执行了两种状态的回调函数。
当Promise实例生成后，用then方法来指定两种状态的回调函数。举一个简单例子

//axios是一个基于Promise的http请求，可以直接调用then

this.axios.get(url).then((res)=>{
        //请求成功 resolved的回调
    },(err)=>{
        //请求失败 rejected的回调
    }）
}）

将多个Promise封装成一个

假如你需要等待多个Promise请求resoved后在执行，可以调用Promise.all()
这个api接受一个promise实例数组做参数。

手动实现Promise

//1.定义三种状态
const PENDING = "pending"
const RESOLVED = "resolved"
const REJECTED = "rejected"
function MyPromisr(fn){
       //重命名this，防止接下来找不到正确的this
       const that = this
       that.state = PENDING //初始状态为等待
       that.value = null //value用于保存resolved或rejoiced传入的值
       that.resolvedCallbacks = [] //成功请求后的回调数组
       //定义完成的回调函数
       function resolved(value) {
            // 只有在等待状态才可以改变状态
            if (that.state === PENDING) {
                that.state = RESOLVED
                that.value = value
                that.resolvedCallbacks.map(cb => cb(that.value))
            }
        }
        //定义拒绝的回调函数
        function rejected(value) {
            // 只有在等待状态才可以改变状态
            if (that.state === PENDING) {
                that.state = REJECTED
                that.value = value
                that.rejectedCallbacks.map(cb => cb(that.value))
            }
        }
        // 定义了两种状态的回调函数后,执行mypromise传参的函数
        try {
            fn(resolved,rejected)
        } catch (e) {
            rejected(e)
        }
}
// 定义then
MyPromise.prototype.then = function(onFulfilled,onRejected){
    const that = this
    onFulfilled = typeof onFulfilled === "function" ? onFulfilled :v => v
    onRejected = 
     typeof onRejected === "function"
        ? onRejected
        : r => {
            throw r
        }
    if (that.state === PENDING) {
        that.resolvedCallbacks.push(onFulfilled)
        that.rejectedCallbacks.push(onRejected)
    }
    if (that.state === RESOLVED) {
        onFulfilled(that.value)
    }
    // console.log(that.state,"has change")
    if (that.state === REJECTED) {
        onRejected(that.value)
    }
}

//调用
new MyPromise((resolved,rejected) => {
    setTimeout(()=>{
        resolved(1)
        rejected(2)
    },0)
}).then(value=>{
    console.log(value)
},value=>{
    console.log(value)
})

GPU云服务器云服务器 jquery_promise实现 promise Promise使用 promise用法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105210.html

JavaScript之手写Promise

摘要：如果状态是等待态的话，就往回调函数中函数，比如如下代码就会进入等待态的逻辑以上就是简单版实现实现一个符合规范的接下来大部分代码都是根据规范去实现的。为更好的理解，推荐阅读Promise/A+ 规范实现一个简易版 Promise 在完成符合 Promise/A+ 规范的代码之前，我们可以先来实现一个简易版 Promise，因为在面试中，如果你能实现出一个简易版的 Promise ...

stefan 2019-08-23 15:25 评论0 收藏0
22道JavaScript高频手写面试题

JavaScript笔试部分点击关注本公众号获取文档最新更新,并可以领取配套于本指南的《前端面试手册》以及最标准的简历模板. 实现防抖函数（debounce）防抖函数原理：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。那么与节流函数的区别直接看这个动画实现即可。 showImg(https://segmentfault.com/img/remote/146000002...

Alan 2019-08-26 10:44 评论0 收藏0
3行代码实现一个简易版promise

前言作为一个后端过来的同学,刚入门前端的时候,被js种种「反人类」的概念折腾的死去活来的.其中一个印象比较深刻的,就是promise,感觉实在太难理解了...所有就有了写个简单的promise的想法.希望能帮助到一些跟我一样,感觉promise很难理解的新同学. promise的教程网上多如牛毛,其中写的比较通俗易懂的莫过于阮一峰的es6,反正我是他的书才懂的.所以今天,我们也不会来复述一遍如何...

ralap 2019-08-22 17:33 评论0 收藏0
「中高级前端面试」JavaScript手写代码无敌秘籍

摘要：第一种直接调用避免在不必要的情况下使用，是一个危险的函数，他执行的代码拥有着执行者的权利。来自于此外，实现需要考虑实例化后对原型链的影响。函数柯里化的主要作用和特点就是参数复用提前返回和延迟执行。手写路径导航实现一个new操作符实现一个JSON.stringify 实现一个JSON.parse 实现一个call或 apply 实现一个Function.bind 实现一个继承实现一个J...

Zhuxy 2019-05-23 16:26 评论0 收藏0
What's New in JavaScript

摘要：在和中都保留了数组的强引用，所以在中简单的清除变量内存并没有得到释放，因为还存在引用计数。而在中，它的键是弱引用，不计入引用计数中，所以当被清除之后，数组会因为引用计数为而被回收掉。其实我们主要注意的引用是不计引用计数的，就好理解了。 showImg(https://segmentfault.com/img/remote/1460000019147368?w=900&h=383); 前...

cgh1999520 2019-08-26 13:44 评论0 收藏0