蚌埠做网站的公司哪家好,买域名需要备案吗,手机网站预约表单,个人免费域名注册网站大家好#xff0c;我是若川。最近组织了源码共读活动#xff0c;感兴趣的可以点此加我微信 ruochuan12 参与#xff0c;每周大家一起学习200行左右的源码#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。本文仓库 https://githu… 大家好我是若川。最近组织了源码共读活动感兴趣的可以点此加我微信 ruochuan12 参与每周大家一起学习200行左右的源码共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。本文仓库 https://github.com/lxchuan12/delay-analysis.git求个star^_^[1]源码共读活动 每周一期已进行到17期。于是搜寻各种值得我们学习且代码行数不多的源码。delay 主文件仅70多行[2]非常值得我们学习。阅读本文你将学到1. 学会如何实现一个比较完善的 delay 函数
2. 学会使用 AbortController 实现取消功能
3. 学会面试常考 axios 取消功能实现
4. 等等2. 环境准备# 推荐克隆我的项目保证与文章同步
git clone https://github.com/lxchuan12/delay-analysis.git
# npm i -g yarn
cd delay-analysis/delay yarn i
# VSCode 直接打开当前项目
# code .
# 我写的例子都在 examples 这个文件夹中可以启动服务本地查看调试
# 在 delay-analysis 目录下
npx http-server examples
# 打开 http://localhost:8080# 或者克隆官方项目
git clone https://github.com/sindresorhus/delay.git
# npm i -g yarn
cd delay yarn i
# VSCode 直接打开当前项目
# code .3. delay我们从零开始来实现一个比较完善的 delay 函数[3]。3.1 第一版 简版延迟要完成这样一个延迟函数。3.1.1 使用(async() {await delay1(1000);console.log(输出这句);
})();3.1.2 实现用 Promise 和 setTimeout 结合实现我们都很容易实现以下代码。const delay1 (ms) {return new Promise((resolve, reject) {setTimeout(() {resolve();}, ms);});
}我们要传递结果。3.2 第二版 传递 value 参数作为结果3.2.1 使用(async() {const result await delay2(1000, { value: 我是若川 });console.log(输出结果, result);
})();我们也很容易实现如下代码。传递 value 最后作为结果返回。3.2.2 实现因此我们实现也很容易实现如下第二版。const delay2 (ms, { value } {}) {return new Promise((resolve, reject) {setTimeout(() {resolve(value);}, ms);});
}这样写Promise 永远是成功。我们也需要失败。这时我们定义个参数 willResolve 来定义。3.3 第三版 willResolve 参数决定成功还是失败。3.3.1 使用(async() {try{const result await delay3(1000, { value: 我是若川, willResolve: false });console.log(永远不会输出这句);}catch(err){console.log(输出结果, err);}
})();3.3.2 实现加个 willResolve 参数决定成功还是失败。于是我们有了如下实现。const delay3 (ms, {value, willResolve} {}) {return new Promise((resolve, reject) {setTimeout(() {if(willResolve){resolve(value);}else{reject(value);}}, ms);});
}3.4 第四版 一定时间范围内随机获得结果延时器的毫秒数是写死的。我们希望能够在一定时间范围内随机获取到结果。3.4.1 使用(async() {try{const result await delay4.reject(1000, { value: 我是若川, willResolve: false });console.log(永远不会输出这句);}catch(err){console.log(输出结果, err);}const result2 await delay4.range(10, 20000, { value: 我是若川range });console.log(输出结果, result2);
})();3.4.2 实现我们把成功 delay 和失败 reject 封装成一个函数随机 range 单独封装成一个函数。const randomInteger (minimum, maximum) Math.floor((Math.random() * (maximum - minimum 1)) minimum);const createDelay ({willResolve}) (ms, {value} {}) {return new Promise((relove, reject) {setTimeout(() {if(willResolve){relove(value);}else{reject(value);}}, ms);});
}const createWithTimers () {const delay createDelay({willResolve: true});delay.reject createDelay({willResolve: false});delay.range (minimum, maximum, options) delay(randomInteger(minimum, maximum), options);return delay;
}
const delay4 createWithTimers();实现到这里相对比较完善了。但我们可能有需要提前结束。3.5 第五版 提前清除3.5.1 使用(async () {const delayedPromise delay5(1000, {value: 我是若川});setTimeout(() {delayedPromise.clear();}, 300);// 300 milliseconds laterconsole.log(await delayedPromise);// 我是若川
})();3.5.2 实现声明 settle变量封装 settle 函数在调用 delayPromise.clear 时清除定时器。于是我们可以得到如下第五版的代码。const randomInteger (minimum, maximum) Math.floor((Math.random() * (maximum - minimum 1)) minimum);const createDelay ({willResolve}) (ms, {value} {}) {let timeoutId;let settle;const delayPromise new Promise((resolve, reject) {settle () {if(willResolve){resolve(value);}else{reject(value);}}timeoutId setTimeout(settle, ms);});delayPromise.clear () {clearTimeout(timeoutId);timeoutId null;settle();};return delayPromise;
}const createWithTimers () {const delay createDelay({willResolve: true});delay.reject createDelay({willResolve: false});delay.range (minimum, maximum, options) delay(randomInteger(minimum, maximum), options);return delay;
}
const delay5 createWithTimers();3.6 第六版 取消功能我们查阅资料可以知道有 AbortController 可以实现取消功能。caniuse AbortController[4]npm abort-controller[5]mdn AbortController[6]fetch-abort[7]fetch#aborting-requests[8]yet-another-abortcontroller-polyfill[9]3.6.1 使用(async () {const abortController new AbortController();setTimeout(() {abortController.abort();}, 500);try {await delay6(1000, {signal: abortController.signal});} catch (error) {// 500 milliseconds laterconsole.log(error.name)// AbortError}
})();3.6.2 实现const randomInteger (minimum, maximum) Math.floor((Math.random() * (maximum - minimum 1)) minimum);const createAbortError () {const error new Error(Delay aborted);error.name AbortError;return error;
};const createDelay ({willResolve}) (ms, {value, signal} {}) {if (signal signal.aborted) {return Promise.reject(createAbortError());}let timeoutId;let settle;let rejectFn;const signalListener () {clearTimeout(timeoutId);rejectFn(createAbortError());}const cleanup () {if (signal) {signal.removeEventListener(abort, signalListener);}};const delayPromise new Promise((resolve, reject) {settle () {cleanup();if (willResolve) {resolve(value);} else {reject(value);}};rejectFn reject;timeoutId setTimeout(settle, ms);});if (signal) {signal.addEventListener(abort, signalListener, {once: true});}delayPromise.clear () {clearTimeout(timeoutId);timeoutId null;settle();};return delayPromise;
}const createWithTimers () {const delay createDelay({willResolve: true});delay.reject createDelay({willResolve: false});delay.range (minimum, maximum, options) delay(randomInteger(minimum, maximum), options);return delay;
}
const delay6 createWithTimers();3.7 第七版 自定义 clearTimeout 和 setTimeout 函数3.7.1 使用const customDelay delay7.createWithTimers({clearTimeout, setTimeout});(async() {const result await customDelay(100, {value: 我是若川});// Executed after 100 millisecondsconsole.log(result);// 我是若川
})();3.7.2 实现传递 clearTimeout, setTimeout 两个参数替代上一版本的clearTimeoutsetTimeout。于是有了第七版。这也就是delay的最终实现。const randomInteger (minimum, maximum) Math.floor((Math.random() * (maximum - minimum 1)) minimum);const createAbortError () {const error new Error(Delay aborted);error.name AbortError;return error;
};const createDelay ({clearTimeout: defaultClear, setTimeout: set, willResolve}) (ms, {value, signal} {}) {if (signal signal.aborted) {return Promise.reject(createAbortError());}let timeoutId;let settle;let rejectFn;const clear defaultClear || clearTimeout;const signalListener () {clear(timeoutId);rejectFn(createAbortError());}const cleanup () {if (signal) {signal.removeEventListener(abort, signalListener);}};const delayPromise new Promise((resolve, reject) {settle () {cleanup();if (willResolve) {resolve(value);} else {reject(value);}};rejectFn reject;timeoutId (set || setTimeout)(settle, ms);});if (signal) {signal.addEventListener(abort, signalListener, {once: true});}delayPromise.clear () {clear(timeoutId);timeoutId null;settle();};return delayPromise;
}const createWithTimers clearAndSet {const delay createDelay({...clearAndSet, willResolve: true});delay.reject createDelay({...clearAndSet, willResolve: false});delay.range (minimum, maximum, options) delay(randomInteger(minimum, maximum), options);return delay;
}
const delay7 createWithTimers();
delay7.createWithTimers createWithTimers;4. axios 取消请求axios取消原理是通过传递 config 配置 cancelToken 的形式来取消的。判断有传cancelToken在 promise 链式调用的 dispatchRequest 抛出错误在 adapter 中 request.abort() 取消请求使 promise 走向 rejected被用户捕获取消信息。更多查看我的 axios 源码文章取消模块 学习 axios 源码整体架构取消模块(可点击)5. 总结我们从零开始实现了一个带取消功能比较完善的延迟函数。也就是 delay 70多行源码[11]的实现。包含支持随机时间结束、提前清除、取消、自定义 clearTimeout、setTimeout等功能。取消使用了 mdn AbortController[12] 由于兼容性不太好社区也有了相应的 npm abort-controller[13] 实现 polyfill。yet-another-abortcontroller-polyfill[14]建议克隆项目启动服务调试例子印象会更加深刻。# 推荐克隆我的项目保证与文章同步
git clone https://github.com/lxchuan12/delay-analysis.git
cd delay-analysis
# 我写的例子都在 examples 这个文件夹中可以启动服务本地查看调试
npx http-server examples
# 打开 http://localhost:8080最后可以持续关注我若川。欢迎加我微信 ruochuan12 交流参与 源码共读 活动每周大家一起学习200行左右的源码共同进步。参考资料[1]本文仓库 https://github.com/lxchuan12/delay-analysis.git求个star^_^: https://github.com/lxchuan12/delay-analysis.git[2]delay 主文件仅70多行: https://github.com/sindresorhus/delay/blob/main/index.js更多点击阅读原文查看。················· 若川简介 ·················你好我是若川毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》20余篇在知乎、掘金收获超百万阅读。从2014年起每年都会写一篇年度总结已经写了7篇点击查看年度总结。同时最近组织了源码共读活动帮助3000前端人学会看源码。公众号愿景帮助5年内前端人走向前列。识别上方二维码加我微信、拉你进源码共读群今日话题略。分享、收藏、点赞、在看我的文章就是对我最大的支持
