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. OpenLayers学习笔记(十)— 动态加载JSON数据模拟航迹线

    在openlayers 3 上,加载本地json数据,动态绘制航迹线,以飞机当前位置为地图中心,此例子是模拟DEMO 本文链接:动态加载JSON数据模拟航迹线 作者:狐狸家的鱼 GitHub:八至 前 ...

  2. 将gbk字符串转换成utf-8,存储到注册表中后,再次从注册表读取转换成gbk,有问题!!!

    char *a = "新2新"; printf("gbk:'%s'\n", a); int ii; ; ii < strlen(a); ii++) { p ...

  3. SQL2012数据库还原失败System.Data.SqlClient.SqlError: 无法执行 BACKUP LOG,因为当前没有数据库备份

    在一次数据库还原的操作过程中遇到如上错误,去百度了下找到了对应的解决方法 第一个: 在还原完整备份时候,在回复状态状态哪里选择 restore with norecovery ,尾日志部分可选可不选, ...

  4. C#利用 HttpWebRequest 类发送post请求,出现“套接字(协议/网络地址/端口)只允许使用一次”问题

    声明:问题虽然已经被解决,但是并没有明白具体原理,欢迎大佬补充. 最近网站出现一个问题,在C#里面使用  HttpWebRequest 类去发送post请求,偶尔 会出现 “套接字(协议/网络地址/端 ...

  5. day20面向对象三大特性 , 类嵌套

    #!/usr/bin/env python# -*- coding:utf-8 -*- # 1.简述面向对象三大特性并用代码表示."""封装:class Account: ...

  6. 教你如何绘制数学函数图像——numpy和matplotlib的简单应用

    numpy和matplotlib的简单应用 一.numpy库 1.什么是numpy NumPy系统是Python的一种开源的数值计算扩展.这种工具可用来存储和处理大型矩阵,比Python自身的嵌套列表 ...

  7. 如何在Eclipse中创建web项目并使用tomcat8 运行servlet开发简单的动态网页?

    今天花了一天时间.因为用eclipse没多久,不是很熟悉使用,看的教程又是使用myeclipse的,但是eclipse相对没有myeclipse灵活,所以在网上找了很多资料,最后算是可以实现了.新手可 ...

  8. win 域

    域/AD域/域环境: 1.域:Domain 2.微软技术:1)工作组:平等             2)域 3.主要优点:集中管理/统一管理 4.域成员:1)域控制器:DC           2)成 ...

  9. ccf 201503-5 最小花费 这题交上去只有10分嗨!求大佬的题解啊

    问题描述 C国共有n个城市.有n-1条双向道路,每条道路连接两个城市,任意两个城市之间能互相到达.小R来到C国旅行,他共规划了m条旅行的路线,第i条旅行路线的起点是si,终点是ti.在旅行过程中,小R ...

  10. 第31月第19天 NV12

    1. //设置CIContext,并从CIImage -> CGImage -> UIImage CIContext *context = [CIContext contextWithOp ...