code

最近在思考promise的实现原理

于是准备自己写一个简单的demo

一开始想到的问题有两个

1.链式调用

2.异步顺序执行

-------------------------------------------------

我们先声明一个异步操作的函数 来模拟异步请求

    function http(url){
return new MyPromise(function(resolve,reject){
setTimeout(function(){
resolve(url);
},1000)
})
}

下面就开始写一个简单的promise

有 then,resolve,reject方法

1.then里面会有一个回调方法,我们用callback存起来

2.then回调之后可能会 return,我们用 res保存 callback的返回值,丢到下一个then的resolve中,作为参数。

3.注意,有时候我们没写then方法,所以没有回调。这个时候就要判断了,不需要执行回调

    function MyPromise(fn) {
var res = null,
       callback = null;
function resolve(val) {
if(typeof(callback) === 'function'){
res = callback(val);
}
} function reject(val){
if(typeof(callback) === 'function'){
res = callback(val);
}
} this.then = function (cb) {
callback = cb;
return new MyPromise(function(resolve,reject){
setTimeout(() => {
resolve(res);
}, 3000);
})
}; fn(resolve,reject);
}

现在我们调用一下

    http('www.123.com').then(function(res){
console.log(res)
return 123132;
}).then(function(res){
console.log(res)
})

输出

和我们预期的一样,第一个 then里面的参数也传到第二个then方法中了

但是这样也有很多问题

1.第一个异步时间是1000ms,then方法里面的异步时间是 3000ms

加入第二个请求比第一个快,那个 前面的return 后面接收不到。结果输出undefiend

2.如果第一个 return一个异步请求,那么 第二个then收到的是一个promise对象,而不是 promise resolve之后的值

请看下一章

简易promise的实现(一)的更多相关文章

  1. 简易promise

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  2. 实现简易Promise

    概述 异步编程离不开promise, async, 事件响应这些东西,为了更好地异步编程,我打算探究一下promise的实现原理,方法是自己实现一个简易的promise. 根据promise mdn上 ...

  3. 简易promise的实现(二)

    code 上一章中我们遇到了两个问题 1.异步调用顺序的问题 2.then返回一个promise的问题 思考 如果控制异步回调的顺序? 因为异步操的时间作我们无法控制,但是我们只需要按顺序执行回调函数 ...

  4. ES6之promise原理

    我在这里介绍了promise的原理: https://juejin.im/post/5cc54877f265da03b8585902 我在这里 仅仅张贴 我自己实现的简易promise——DiProm ...

  5. 用JavaScript完成页面自动操作

    在之前的一篇<JavaScript实现按键精灵>中曾记录了几个事件对象,本文将会对它们进行一次实战,要完成的动作包括滚动.点击和翻页. 一.滚动 滚动是通过修改容器元素的scrollTop ...

  6. Promise实现简易AMD加载器

    在最新的Chrome和FF中已经 实现了Promise.有了Promise我们用数行代码即可实现一个简易AMD模式的加载器 var registry = { promises: { }, resolv ...

  7. 10行代码实现简易版的Promise

    实现之前,我们先看看Promise的调用 const src = 'https://img-ph-mirror.nosdn.127.net/sLP6rNBbQhy0OXFNYD9XIA==/79910 ...

  8. 手写简易版Promise

    实现一个简易版 Promise 在完成符合 Promise/A+ 规范的代码之前,我们可以先来实现一个简易版 Promise,因为在面试中,如果你能实现出一个简易版的 Promise 基本可以过关了. ...

  9. 手写Promise简易版

    话不多说,直接上代码 通过ES5的模块化封装,向外暴露一个属性 (function(window){ const PENDING = 'pending'; const RESOLVED = 'fulf ...

随机推荐

  1. bzoj1814 Ural 1519 Formula 1(插头DP)

    对插头DP的理解还不是很透彻. 先说一下肤浅的理解吧. 插头DP使用范围:指数级复杂度,且适用于解决网格图连通性问题,如哈密顿回路等问题.插头一般指每相邻2个网格的接口. 题目难度:一般不可做. 使用 ...

  2. Java基础 -- 嵌套类(非静态嵌套类、静态嵌套类)

    可以将一个类的定义放在另一个类的内部定义,这样的类就被称为嵌套类,包含嵌套类的类被称为外部类(outer class),也可以叫做封闭类. 嵌套类可以分为两种: 静态嵌套类(Static Nested ...

  3. C# 中的#if、#elif、#else、#endif等条件编译符号

    C#编译器遇到一个由#if和#endif包围起来的语句块时,会检查#if后面的符号是否已经被定义了,如果已经被定义,那么才会编译语句块之间的代码.而定义一个可以被#if测试的符号需要事先用#defin ...

  4. 支付宝aar添加与友盟冲突解决

    Program type already present: com.ta.utdid2.b.a.e" 错误提示: 删掉libs中utdid的jar.

  5. JAVA helloworld!

    idea创建java项目 https://jingyan.baidu.com/article/48b558e3f8f6637f39c09a44.html 本地文档运行 java helloworld ...

  6. 序列化 反序列化 MessagePack for C#

    阅读目录 快速序列化组件MessagePack介绍 简介 使用 快速开始 分析器 内置的支持类型 对象序列化 DataContract兼容性 序列化不可变对象(序列化构造器) 序列化回调 Union ...

  7. mysql8用户管理

    查看当前登录用户: 创建用户: create user '用户名'@'主机地址' identified with mysql_native_password by '密码'; 修改密码: alter ...

  8. THUWC2019 GG记

    所以要什么时候才不会出现像这样的滚粗记呢? Day-?~Day-4 我也不清楚具体干了什么 不过学了很多东西,至少相对于去年还是个小菜鸡,今年已经变成大菜鸡了 Day-3~Day-1 几乎就是复习前面 ...

  9. Luogu CF451E Devu and Flowers 题解报告

    题目传送门 [题目大意] 有n种颜色的花,第i种颜色的花有a[i]朵,从这些花中选m朵出来,问有多少种方案?答案对109+7取模 [思路分析] 这是一个多重集的组合数问题,答案就是:$$C_{n+m- ...

  10. Python3:输出当前目录所有文件的第二种方式-walk()函数

    上一篇,我们讲了用递归的方式输入所有文件路径,其实os还提供了一个好用的方法-walk() 简单看一下: 中文大意就是: 返回的是一个三元tupple(dirpath, dirnames, filen ...