![](https://img-blog.csdnimg.cn/20190918140145169.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
手写JavaScript源码系列
文章平均质量分 79
深入jsApi底层学习
可达鸭头上站青蛙
至妙之要,先存后忘。
展开
-
手写axios源码系列五:CancelToken取消请求类封装
在第一篇章节两种方式都可以取消请求,接下来我们探究一下两种取消请求的方式有何不同。原创 2023-04-24 08:52:38 · 1070 阅读 · 1 评论 -
手写axios源码系列四:interceptor拦截器
拦截器这里的逻辑其实就是将拦截器添加到数组的方式不同,所以产生的结果也不同,明白 unshift 与 push 将数据添加到数组的方式,也就明白拦截器的执行方式了。后面执行链执行时,使用 shift 从 chain 中取数据,会改变 chain 的长度,明白这些点也就难不住你了。so easy。还有一点,就是声明执行链 chain 时,有一个undefined占位符。原因就是代码执行时,每次从 chain 中取出成对的回调函数,一个成功,一个失败,放到相应的位置执行。如果没有undefined。原创 2023-04-24 08:21:53 · 710 阅读 · 0 评论 -
手写axios源码系列三:dispatchRequest发送请求
dispatchRequest 这里的代码逻辑还是比较简单,比较清晰的。原创 2023-04-23 14:16:50 · 628 阅读 · 0 评论 -
手写axios源码系列二:创建axios函数对象
建议大家先下载 axios 的源码,然后过一遍源码的目录文件,主要文件全部在lib目录下,这里我就不一一介绍了。_Axios.js:axios的构造函数,因为有一个 axios.js,文件名不区分大小写会重复,所以添加了下横杠_Axios防止文件名重复;其中request方法为重点,拦截器功能在这里书写;:适配器,其中有一个方法getAdapter来获取发送请求的方式 xhr 或者 http;axios.js:整个目录的入口文件,创建了axios 函数对象以及对外暴露了一些属性以及方法;原创 2023-04-23 10:59:41 · 547 阅读 · 0 评论 -
手写axios源码系列一:axios核心知识点
最近从头搭建了一个vue小项目,想使用 axios 作为请求接口的第三方库。结果使用了 axios 这么长时间,想封装一下 axios ,也就是大部分项目中的文件,我居然无法默写出来,create 和 interceptors 这样的 api 都不知道怎么使用;所以决定深入一下 axios 源码,一探究竟 axios 到底是个什么东东。当前 axios 源码版本为。原创 2023-04-21 22:35:51 · 749 阅读 · 0 评论 -
前端面试题:手写call、apply、bind函数
bind() 方法创建一个新的函数,在 bind() 被调用时,这个新函数的 this 被指定为 bind() 的第一个参数,而其余参数将作为新函数的参数,供调用时使用。apply() 方法调用一个具有给定 this 值的函数,以及以一个数组(或一个类数组对象)的形式提供的参数。call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。说白了就是改变当前调用函数的this指向,并向调用函数中传参。原创 2023-02-21 19:31:15 · 686 阅读 · 0 评论 -
手写promise原理系列一:promise基础知识解析,then、catch、resolve、reject、all、race等promise api的用法
开篇点题,最近复习了前端技术点中有关 promise 的相关知识,但是还从未深入过源码,从未手写过 promise,项目中已经全面使用 promise 作为异步编程的解决方式,避免了回调地狱。为了深入理解 promise 的工作原理,决定写一个关于"手写promise"的系列教程,希望自己能坚持写完,不要半途而废。。好了,话不多说,先来熟悉一下 promise 的基础知识。原创 2023-03-12 11:42:22 · 563 阅读 · 0 评论 -
手写promise原理系列二:手写promise的关键逻辑梳理,promise用法原理
书接上回,上一篇中讲解了一些promise的基础知识以及常用API的使用,这篇文章的重点在于深入了解promise的运行方式,梳理其中的关键性逻辑,为接下来正式手写promise做一些准备工作。大家千万不要着急,当真正进入手写promise环节后,可能还需要不断返回当前篇章,仔细斟酌这其中字句,才能真正了解promise中的无穷奥妙,全是以及。原创 2023-03-12 17:01:56 · 362 阅读 · 0 评论 -
手写promise原理系列三:封装Promise构造函数,Promise构造函数的用法
然后resolve()时,将状态变更为成功,reject()时,将状态变更为失败,throw抛出错误时,状态也变更为失败。目前咱们封装完成了 Promise 构造函数,这只是一个19行代码的简单版本,只处理了三个问题点,但对于小白理解 promise 源码以及 promise 的工作方式有深刻意义,至少我在初窥门径时眼前是豁然开朗。因为初始状态为 pending ,当状态不为 pending 时,那说明状态被变更过了,所以就不再进行任何操作;好了,话不多说,撸起袖子接着干。原创 2023-03-12 22:12:52 · 611 阅读 · 0 评论 -
手写promise原理系列四:封装Promise.prototype.then方法,promise.then的用法
then 方法接受两个参数,第一个参数为状态变为成功时的回调函数onResolved,第二个参数为状态变为失败时的回调函数onRejected。原创 2023-03-13 12:45:26 · 496 阅读 · 1 评论 -
手写promise原理系列五:Promise.prototype.catch方法的封装与异常穿透,promise.catch的用法
在上面代码中的第一个 then 方法中没有传递回调函数,这时候咱们封装的 then 方法肯定报错,程序无法执行,因为不传参数,相当于传递两个 undefined 值,undefined 值无法进行函数调用,因为 then 方法内部默认是传递函数作为参数的。catch 方法接受一个参数,就是失败时的回调,而 then 方法接受两个参数,第二个参数为失败时的回调,那可不可以只使用 then 方法的第二个参数呢?下图为上面代码的图示理解,我尽力了。原创 2023-03-13 16:53:46 · 398 阅读 · 0 评论 -
手写promise原理系列六:封装Promise.resolve方法,Promise.resolve的用法
在前面几篇文章中,我们封装了 Promise 构造函数、原型对象方法 then 以及 catch ,相信大家是有所收获的,接下来的篇章我们去探寻一下 Promise 构造函数的静态方法:resolve、reject、all以及race方法。Promise.resolve 方法接受一个参数,可以是 promise 对象,也可以是非 promise 对象的任意值。下一章节探讨一下和 Promise.resolve 相对应的 api:Promise.reject 方法的使用以及封装。原创 2023-03-13 20:43:30 · 1109 阅读 · 0 评论 -
手写promise原理系列七:封装Promise.reject方法,Promise.reject的用法
在上篇文章中我们知道了 Promise.resolve 的用法以及手动封装了 Promise.resolve 方法,这篇文章继续研究 Promise.reject 方法的用法以及手动封装一个 Promise.reject 方法。Promise.reject 方法接受一个参数,可以是 promise 对象,也可以是非 promise 对象的任意值。让我们开始吧,先看Promise.reject 的用法。原创 2023-03-14 07:55:45 · 787 阅读 · 0 评论 -
手写promise原理系列八:封装Promise.all方法,Promise.all的用法
Promise.all 方法的参数是一个 promise 对象组成的数组,当 Promise.all 方法的参数中有一个失败的状态时,直接返回当前失败的 promise 对象的状态以及结果。由上面的同步、异步调用方式可知,不管 promise 对象是同步改变状态还是异步改变状态,Promise.all 的执行结果都是。其实,关键点在于异步改变状态时,如何让 Promise.all 的执行结果变为有序的?的意思,其实就是全部 promise 对象执行成功才返回结果,只要有一个失败,就返回失败的结果。原创 2023-03-14 10:28:21 · 536 阅读 · 0 评论 -
手写promise原理系列九:封装Promise.race方法,Promise.race的用法
的意思,其实就是看哪个 promise 对象优先执行,返回优先执行的 promise 对象的结果,不管结果是成功还是失败。小伙伴们,你们好,本篇为"手写promise原理系列" 最后一篇文章了,虽然 promise 我们已经学习了很多,但是在。的道路上,任重而道远,后面我会单独出一篇文章来探讨一下一种更好的异步实践方式 async/await 的使用方法。执行时,当前 promise 对象的状态变为了失败,所以就直接返回了。变为了异步执行,所以此时最先执行的为。最先执行,所以返回结果为。原创 2023-03-14 10:47:04 · 487 阅读 · 0 评论