runrunlolz

runrunlolz 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

runrunlolz 发布了文章 · 2月23日

Promise小结

Promise的生命周期

每个Promise都有自己的一个生命周期,开始未处理然后变成已处理。开始pedding状态表示进行中,操作结束后。Promise可能进入以下两种状态某一个:
  • Fuiflled Promise操作完成。
  • Rejected 程序错误或者其他原因Promise为可以完成。

image.png

内部[[PromiseState]]用来表示三个状态:pending,fulfilled及rejected。这个属性并没有暴露在Promise对象上,所以检测不到。Promise状态改变的时候通过then获得。

所有Promise都有then方法,两个参数:第一个是Promise的状态变为fulfilled时候调用的函数,与异步操作有关数据传递给这个参数。第二个是变为rejected时执行的函数,失败相关附加数据可以通过参数传递给这个拒绝函数。

  • Tips

注意new Promise的时候传递函数会立即执行并且函数体内的操作是一个同步操作。
new Promise((res,rej) =>{}),接收一个函数作为参数,函数有两个参数是两个callback表示成功和失败的时候执行的。

    let p = new Promise((res,rej) => {
        console.log(1,'1')
        res("success")
        console.log(2,'2')
    })
    p.then((resolve)=>{
        console.log(resolve,'resolve')
    },(reject)=> {
        console.log(reject,'reject')
    })
    console.log(4)
    // 输出顺序 1 2 4 success

Promise链的返回值

Promise链的一个重要特性就是可以给下游Promise传递数据,如果在完成处理程序中指定一个返回值,则可以沿着这条链继续传递数据。

  • Tips:
  • Promise链中的返回值如果是Promise对象的话根据返回的Promise状态进行执行对应then和catch,如果return一个非Promise那么会把它使用Promise.resolve包装成为一个fulfilled状态的Promise。
  • 如果then中没有return值,那就相当于return一个空的Promise对象(已完成状态)。比如:
let a = new Promise((res,rej) => {
    res(6)
})
a.then((res) => {
    console.log(res,'第一个执行完成')
    // 6
}).then(res=> {
    console.log("第二个返回打印",res)
    // 第二个返回打印 undefined
})
链式调用Promise:
let p1 = new Promise(function (resolve,reject) {
    resolve(42)
})

p1.then(function(value) {
    console.log(value)
    // return一个常量 then中的return会自动包装为Promise.resolve(xx)
    return value+1
}).then((res) => {
    console.log(res) // 43
})

// 拒绝处理程序中是同样的
let p1 = new Promise((reslove,reject) => {
    reject(42)
})

p1.catch((rej) => {
    console.log(rej)
    return rej+1 // return非Promise对象,使用Promise.resolve包装
}).then((value) => {
    console.log(value) //43
}) 

Promise错误解决方案

Promise的错误捕捉有两种方式
  1. then函数的第二个参数。
let a = new Promise((res,rej) => {
    rej(2)
})

a.then( (res) => {
    // success do
},(rej) => {
    // reject do
    console.log(2) // 2
}) 
  1. catch函数
let a = new Promise((res,rej) => {
    rej(2)
})
a.then(res => {
    // success do
}).catch(err => {
    // do sth
}) 
catch函数可以在链式调用的时候当作整个链的Promise错误处理程序。
a.then(res=> {
    
}).then(res=> {
    
}).then((res) => {
    
}).catch(rej => {
    // 任意一个环节走到错误都会走到.catch这里
    // 并且无return中断环节的执行(因为已经catch失败,第一个then就调用不到了,所以链式结束)。
}) 

Promise的继承

Promise类和其他内建类型一致,也可以作为基类派生类,所以也可以定义自己的Promise变量来扩展Promise的功能。
class MyPromise extends Promise {
    // 使用默认的Promise构造函数
    success(resolve,reject) {
        return this.then(reslove,reject)
    }
    failure(reject) {
        return this.catch(reject)
    }
}
let promise = new MyPromise(function (resolve,reject) {
    resolve(42)
})
promise.success(function(value) {
    console.log(value)
},function(value) {
    console.log(value)
})

// or
promise.failure(function (value) {
    console.log(value)
}) 
这个例子中扩展了两个success和failure方法。 这两个方法都通过this调用它模仿的方法,派生Promise与内建Promise功能一致,只不过多了success和failure这两个可以调用的方法。

用于静态方法会也会被继承,因此派生的Promise也都存在MyPromise.resolve(),MyPromise.reject(),MyPromise.all(),MyPromise.race()静态方法。
后两者与内建方法完全不同,前两个稍有不同。

查看原文

赞 6 收藏 4 评论 0

runrunlolz 关注了专栏 · 2月22日

终身学习者

我要先坚持分享20年,大家来一起见证吧。

关注 51536

runrunlolz 关注了专栏 · 2月22日

Jrain-前端玩具盆

记录一路以来的各种折腾。

关注 7139

runrunlolz 关注了专栏 · 2月22日

随笔

希望可以记录下我的成长之旅,也希望可以帮助大家

关注 1102

runrunlolz 关注了专栏 · 2月22日

进击的大前端

前端工程师,底层技术人。 思否2020年度“Top Writer”! 掘金“优秀作者”! 开源中国2020年度“优秀源创作者” 分享各种大前端进阶知识! 关注公众号【进击的大前端】第一时间获取高质量原创。 更多文章和示例源码请看:https://github.com/dennis-jiang/Front-End-Knowledges

关注 13085

runrunlolz 关注了标签 · 2月22日

css

层叠样式表(英语:Cascading Style Sheets,简写CSS),又称串样式列表,由W3C定义和维护的标准,一种用来为结构化文档(如HTML文档或XML应用)添加样式(字体、间距和颜色等)的计算机语言。

关注 93132

runrunlolz 关注了标签 · 2月22日

javascript

JavaScript 是一门弱类型的动态脚本语言,支持多种编程范式,包括面向对象和函数式编程,被广泛用于 Web 开发。

一般来说,完整的JavaScript包括以下几个部分:

  • ECMAScript,描述了该语言的语法和基本对象
  • 文档对象模型(DOM),描述处理网页内容的方法和接口
  • 浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口

它的基本特点如下:

  • 是一种解释性脚本语言(代码不进行预编译)。
  • 主要用来向HTML页面添加交互行为。
  • 可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。

JavaScript常用来完成以下任务:

  • 嵌入动态文本于HTML页面
  • 对浏览器事件作出响应
  • 读写HTML元素
  • 在数据被提交到服务器之前验证数据
  • 检测访客的浏览器信息

《 Javascript 优点在整个语言中占多大比例?

关注 172020

runrunlolz 关注了标签 · 2月22日

程序员

一种近几十年来出现的新物种,是工业革命的产物。英文(Programmer Monkey)是一种非常特殊的、可以从事程序开发、维护的动物。一般分为程序设计猿和程序编码猿,但两者的界限并不非常清楚,都可以进行开发、维护工作,特别是在中国,而且最重要的一点,二者都是一种非常悲剧的存在。

国外的程序员节

国外的程序员节,(英语:Programmer Day,俄语:День программи́ста)是一个俄罗斯官方节日,日期是每年的第 256(0x100) 天,也就是平年的 9 月 13 日和闰年的 9 月 12 日,选择 256 是因为它是 2 的 8 次方,比 365 少的 2 的最大幂。

1024程序员节,中国程序员节

1024是2的十次方,二进制计数的基本计量单位之一。程序员(英文Programmer)是从事程序开发、维护的专业人员。程序员就像是一个个1024,以最低调、踏实、核心的功能模块搭建起这个科技世界。1GB=1024M,而1GB与1级谐音,也有一级棒的意思。

从2012年,SegmentFault 创办开始我们就从网络上引导社区的开发者,发展成中国程序员的节日 :) 计划以后每年10月24日定义为程序员节。以一个节日的形式,向通过Coding 改变世界,也以实际行动在浮躁的世界里,固执地坚持自己对于知识、技术和创新追求的程序员们表示致敬。并于之后的最为临近的周末为程序员们举行了一个盛大的狂欢派对。

2015的10月24日,我们SegmentFault 也在5个城市同时举办黑客马拉松这个特殊的形式,聚集开发者开一个编程大爬梯。

特别推荐:

【SF 黑客马拉松】:http://segmentfault.com/hacka...
【1024程序员闯关秀】小游戏,欢迎来挑战 http://segmentfault.com/game/

  • SF 开发者交流群:206236214
  • 黑客马拉松交流群:280915731
  • 开源硬件交流群:372308136
  • Android 开发者交流群:207895295
  • iOS 开发者交流群:372279630
  • 前端开发者群:174851511

欢迎开发者加入~

交流群信息


程序员相关问题集锦:

  1. 《程序员如何选择自己的第二语言》
  2. 《如何成为一名专业的程序员?》
  3. 《如何用各种编程语言书写hello world》
  4. 《程序员们最常说的谎话是什么?》
  5. 《怎么加入一个开源项目?》
  6. 《是要精于单挑,还是要善于合作?》
  7. 《来秀一下你屎一般的代码...》
  8. 《如何区分 IT 青年的“普通/文艺/二逼”属性?》
  9. 程序员必读书籍有哪些?
  10. 你经常访问的技术社区或者技术博客(IT类)有哪些?
  11. 如何一行代码弄崩你的程序?我先来一发
  12. 编程基础指的是什么?
  13. 后端零起步:学哪一种比较好?
  14. 大家都用什么键盘写代码的?

爱因斯坦

程序猿崛起

关注 150188

runrunlolz 关注了标签 · 2月22日

前端

Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行为也以浏览为主。2005年以后,互联网进入Web 2.0时代,各种类似桌面软件的Web应用大量涌现,网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。

Web前端优化
  1. 尽量减少HTTP请求 (Make Fewer HTTP Requests)
  2. 减少 DNS 查找 (Reduce DNS Lookups)
  3. 避免重定向 (Avoid Redirects)
  4. 使得 Ajax 可缓存 (Make Ajax Cacheable)
  5. 延迟载入组件 (Post-load Components)
  6. 预载入组件 (Preload Components)
  7. 减少 DOM 元素数量 (Reduce the Number of DOM Elements)
  8. 切分组件到多个域 (Split Components Across Domains)
  9. 最小化 iframe 的数量 (Minimize the Number of iframes)
  10. 杜绝 http 404 错误 (No 404s)

关注 190061

runrunlolz 关注了标签 · 2月22日

typescript

TypeScript 是微软开发的 JavaScript 的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行。TypeScript与JavaScript相比进步的地方。包括:加入注释,让编译器理解所支持的对象和函数,编译器会移除注释,不会增加开销;增加一个完整的类结构,使之更新是传统的面向对象语言。

关注 31594

认证与成就

  • 获得 7 次点赞
  • 获得 0 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 0 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2月22日
个人主页被 543 人浏览