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. App自动化(2)--Python&Appium实现安卓手机九宫格解锁

    九宫格作为常见的手势密码,我们在使用的时候,是从起点开始,按住不放,然后滑动手指,直到最后一个点松开手指,如果与设置的手势密码匹配,则解锁成功. 现在大多数九宫格作为一个元素存在,很难定位到每一个点. ...

  2. 【学习笔记】TensorFlow

    1. tf.Graph().as_default() 的作用 首先看官网上的解释: 再看博主 Joanna-In-Hdu&Hust 对此比较通俗易懂的解释(https://www.cnblog ...

  3. layui模板引擎

    <在模板中调用js方法> 1.js代码 layui.define(['laytpl', 'jquery'], function (exports) { var $ = layui.jque ...

  4. IntelliJ IDEA 2017新工具

    IntelliJ IDEA 2017 教程之概述 图文详解如何安装 Intellij IDEA 2017 深入剖析 IntelliJ IDEA 2017 的目录结构 图文详解如何配置 IntelliJ ...

  5. To making it count.

    - How do you take your caviar, sir? 鱼子酱还要吗,先生? - No caviar for me, thanks.  Never did like it much. ...

  6. webpack打包懒加载

    lazyload https://webpack.js.org/guides/lazy-loading/ 懒加载 -- 按需加载. Lazy, or "on demand", lo ...

  7. ccf 201712-4 行车路线(30分超时)

    问题描述 小明和小芳出去乡村玩,小明负责开车,小芳来导航. 小芳将可能的道路分为大道和小道.大道比较好走,每走1公里小明会增加1的疲劳度.小道不好走,如果连续走小道,小明的疲劳值会快速增加,连续走s公 ...

  8. json 格式化的时候,日期格式化

    public class CustomIsoDateTimeConverter : IsoDateTimeConverter { public CustomIsoDateTimeConverter() ...

  9. vue.js学习系列-第一篇

    VUE系列一 简介    vue是一个兴起的前端js库,是一个精简的MVVM.从技术角度讲,Vue.js专注于 MVVM 模型的 ViewModel 层.它通过双向数据绑定把 View 层和 Mode ...

  10. Pytorch学习笔记(二)---- 神经网络搭建

    记录如何用Pytorch搭建LeNet-5,大体步骤包括:网络的搭建->前向传播->定义Loss和Optimizer->训练 # -*- coding: utf-8 -*- # Al ...