webpack基础小结。

时间:2022-12-22 13:43:28

参考 Promise A+ 简单实现 promise,用的setTimeout 模拟的异步,与实际浏览器Promise 有出入(具体可以看Event loop 相关),本文只做思路理解参考。

Promise 的简单实现,主要理解规范,也可以再理解一下几个点方变记忆:

  • Promise的三种状态(pending,fulfilled,rejected), pending状态转移后不可变
  • resolve , resolve a promise with a promise
  • reject
  • Promise.prototype.then 返回一个新的promise 对象(链式操作)
  • thenable对象

1.简单实现

 const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected' function needResolve() {
throw new TypeError('need pass function to Promise')
} function needuseNew() {
throw new TypeError(
'Promise is a constructor and should be called with the `new` keyword'
)
} function Promise(task) {
var self = this
this.state = PENDING
this.value
this.fulArr = []
this.rejArr = [] function resolve(value) {
if (value != null && value.then && typeof value.then == 'function') {
return value.then(resolve, reject)
}
setTimeout(() => {
if (self.state == PENDING) {
self.state = FULFILLED
self.value = value
self.fulArr.forEach(item => {
item(self.value)
})
}
})
} function reject(reason) {
setTimeout(() => {
if (self.state == PENDING) {
self.state = REJECTED
self.value = reason
self.fulArr.forEach(item => {
item(self.value)
})
}
})
}
typeof task !== 'function' && needResolve()
!(this instanceof Promise) && needResolve()
try {
task(
function(value) {
resolve(value)
},
function(reason) {
reject(reason)
}
)
} catch (e) {
reject(e)
}
} function resolvePromise(promise, x, resolve, reject) {
if (promise === x) {
return reject(new TypeError('do not resolve promise with itself'))
}
var then, called
// resolve promise with promise
if (x instanceof Promise) {
if (x.status == PENDING) {
x.then(function(y) {
resolvePromise(promise, y, resolve, reject)
}, reject)
} else {
x.then(resolve, reject)
}
// thenable 其它的then
} else if (x !== null && (typeof x == 'function' || typeof x == 'object')) {
try {
// resolve promise with promise
then = x.then
if (typeof then === 'function') {
then.call(
x,
function(y) {
if (called) {
return
}
called = true
resolvePromise(promise, y, resolve, reject)
},
function(r) {
if (called) {
return
}
called = true
reject(r)
}
)
} else {
resolve(x)
}
} catch (e) {
if (called) {
return
}
called = true
reject(e)
}
} else {
resolve(x)
}
}
Promise.prototype.then = function(onFulfilled, onRejected) {
var self = this
onFulfilled =
typeof onFulfilled === 'function'
? onFulfilled
: function(value) {
return value
}
onRejected =
typeof onRejected === 'function'
? onRejected
: function(reason) {
throw reason
}
var promise2
if (self.state == PENDING) {
promise2 = new Promise(function(resolve, reject) {
self.fulArr.push(value => {
try {
let x = onFulfilled(value)
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e)
}
})
self.reject.push(reason => {
try {
let x = onRejected(reason)
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e)
}
})
})
}
if (self.state == FULFILLED) {
promise2 = new Promise(function(resolve, reject) {
setTimeout(() => {
try {
let x = onFulfilled(self.value)
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e)
}
})
})
}
if (self.state == REJECTED) {
promise2 = new Promise(function(resolve, reject) {
setTimeout(() => {
try {
let x = onRejected(self.value)
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e)
}
})
})
}
// then 必须返回一个新的promise
return promise2
} Promise.prototype.catch = function(onRejected) {
return this.then(null, onRejected)
} Promise.resolve = function(value) {
return new Promise((resolve, reject) => {
resolve(value)
})
}
Promise.reject = function(value) {
return new Promise((resolve, reject) => {
reject(value)
})
} function gen(time, resolve) {
let result = []
let i = 0
return function(index, value) {
if (i < time) {
i++
result[index] = value
} else {
resolve(result)
}
}
} Promise.race = function(arr) {
return new Promise((resolve, reject) => {
for (let i = 0; i < arr.length; i++) {
Promise.resolve(arr[i]).then(resolve, reject)
}
})
}
Promise.all = function(arr) {
return new Promise((resolve, reject) => {
let done = gen(arr.length, resolve)
for (let i = 0; i < arr.length; i++) {
Promise.resolve(arr[i]).then(function(value) {
done(value, i)
}, reject)
}
})
}
module.exports = Promise

webpack基础小结。的更多相关文章

  1. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. webpack基础&plus;webpack配置文件常用配置项介绍&plus;webpack-dev-server

    一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...

  3. 搭建webpack基础配置

    搭建webpack基础步骤: 1.去官方网站下载node.js(根据自己电脑的系统类型选择) 2.安装node.js完成后打开cmd命令提示符: 出现版本号证明安装成功 3.cd到工程目录下 npm ...

  4. Java 基础--小结

    Java  基础--小结 java基础 Java源程序(.java文件)——>java字节码文件(.class文件)——>由解释执行器(java.exe)将字节码文件加载到java虚拟机( ...

  5. nodejs&plus;gulp&plus;webpack基础知识

    nodejs+gulp+webpack基础知识 2019年08月22日 11:49:40 天府云创 阅读数 22   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文 ...

  6. Webpack基础学习

    Webpack基础学习:https://segmentfault.com/a/1190000008853009

  7. 学习webpack基础笔记01

    学习webpack基础笔记 1.webpack搭建环境最重要的就是如何使用loader和plugins,使用yarn/npm安装插件.预处理器,正确的配置好去使用 2.从0配置webpack - 1. ...

  8. android基础小结

    (注:此小结文档在全屏模式下观看效果最佳) 2016年3月1日,正式开始了我的android学习之路. 最最开始的,当然是学习怎样搭载环境了,然而苦逼的我在win10各种坑爹的指引下还是安装了一个星期 ...

  9. 【webpack】---模块打包机webpack基础使用---【巷子】

    001.什么是webpack? 作用有哪些? WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,Ty ...

随机推荐

  1. 小白Linux入门 三

    环境变量 shell 变量: 内存空间 ,命名的内存空间 echo $SHELL 其中SHELL是变量 里面是/bin/bash sudo su  进入root printenv 命令 命令: 内部命 ...

  2. 提取数据库字段里面的值,并改变&plus;图片懒加载,jquery延迟加载

    要求:手机端打开某个页面的详细信息,因为网速或者别的原因,响应太慢,因为图片大的原因,希望先进来,图片在网页运行的情况再慢慢加载(jquer延迟加载) http://www.w3cways.com/1 ...

  3. javascript除法如何取整

    Math.round(x) 四舍五入,如Math.round(0.60),结果为1:Math.round(0.49),结果为0: Math.floor(x) 向下舍入,如Math.floor(0.60 ...

  4. 【英语】Bingo口语笔记&lpar;21&rpar; - 表达&OpenCurlyDoubleQuote;请客吃饭”

  5. 剑指OFFER之栈的压入、弹出序列(九度OJ1366)

    题目描述: 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1,2,3,4,5是某栈的压入顺序,序列4,5,3,2,1是该压栈 ...

  6. 关于Handler与异步消息处理循环的摘抄

    Message:消息,其中包含了消息ID,消息处理对象以及处理的数据等,由MessageQueue 统一队列,终由Handler处理. Handler:处理者,负责Message的发送及处理.使用Ha ...

  7. Configuring Network Configuration-RHEL7

    1.查看网络状态systemctl status NetworkManager You can use the  systemctl status NetworkManager  command to ...

  8. 一C&plus;&plus;PSO(PSO)算法

    收集和变化PSO算法,它可用于参考实施: #include <cstring> #include <iostream> #include <cmath> #incl ...

  9. Wannafly挑战赛23B游戏

    https://www.nowcoder.com/acm/contest/161/B 题意:两个人van游戏,n堆石子,每次只能取这堆石子数目的因子个数,没得取的人输,问第一个人的必胜策略有多少种 题 ...

  10. PHP升级7&period;2之后需要注意的事情

    最近升级了PHP版本,从7.1升级到7.2,升级前版本: PHP 7.1.14 (cli) (built: Feb 2 2018 08:42:59) ( NTS ) Copyright (c) 199 ...