axios

近期在做一个 DNS 服务器切换升级的演练中发现，我们在 NodeJS 中使用的 axios 以及默认的 dns.lookup 存在一些问题，会导致切换过程中的响应耗时从 ~80ms 上升至 ~3min，最终 nginx 层出现大量 502。 具体背景与分析参见 《node中请求超时的一些坑》 ➡️ 总结来说，NodeJS DNS 这块的“坑”可能有↓↓ 使用 http 模块发起请求（axios 也用的它），默认会使用 dns.lookup 来进行 DNS 查询，其底层调用了系统函数 getaddrinfo 。 getaddrinfo 会同步阻塞 ，所以使用线程池来模拟异步，默认数量为 4。因此如果 DNS 查询时间过长且并发请求多，则会导致整体事件循环（Event Loop）出现延迟（阻塞）。 如果 使用 axios 来设置 timeout ，在 0.19.0 之后 实际会调用 Request#setTimeout 方法，该方法的超时时间不包括 DNS 查询。因此如果你将超时设为 3s，但是 DNS 查询由于 DNS 服务器未响应挂起了 5s（甚至更久），这种情况下你的请求是不会被超时释放的。随着请求的越来越多问题会被累积，造成雪崩。 getaddrinfo 使用 resolv.conf 中 nameserver 配置作为本地 DNS 服务器，可以配置多个作为主从

项目搭建 + ⾸⻚布局实现 上篇对该项目做了个总述 : Vue + Element-ui实现后台管理系统(1) --- 总述 这篇主要讲解 项目搭建 + 后台⾸⻚布局实现 ： 整体效果 后台首页按布局一共包含3个部分: 1、左侧栏部分 2、头部部分 3、内容部分。 说明 在整个后台管理系统中， 左侧栏和头部部分是应该一直在页面中展示的 ，所以对于每个页面这两个组件都应该存在,而 内容部分 才是通过router的跳转而跳到不同的组件。 下面先把整个项目搭建一下，然后再来讲解上面三个部分 一、项目搭建 1、环境搭建 #1、安装node （node -v查询版本号） node 安装 #2、安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org #3、安装 webpack，以全局的方式安装 npm install webpack -g #4、全局安装vue以及脚手架vue-cli npm install @vue/cli -g --unsafe-perm #5、创建vue项目 mall-manage-system是你起的项目名称 vue create mall-manage-system #6、运行当前项目 这个整个项目就搭建好了 npm run serve 在安装中可能会存在的问题 1、 node升级后

70行实现Promise核心源码 前言： ​ 一直以来都是只会调用Promise的API，而且调API还是调用axios封装好的Promise，太丢人了！！！没有真正的去了解过它的原理是如何实现的，自己也看过很多博主实现的Promise，但总觉得用原型链的OOP晦涩难懂。 个人的理解：如果带着观察者模式的想法来理解Promise源码，你就会发现Promise本身其实一种微任务的观察者模式，一个异步任务的完成， res/rej 的状态回调hook => 通知所有 then() 订阅的promise对象。promise只是将观察者模式运用到微任务。让promise对象能够具有很高的优先级。说到底还是一种解藕的设计模式。 promise是诞生的原因？ ​ 在了解Promise之前，我觉得有必要去了解一下Promise诞生的原因。 直接就那上面的axios来说吧，以前没有出现axios的时候，大家是怎么去与后台接口做交互的呢？ 我当时是用jQuery封装好的AJAX去做的。下面有一个例子 $.ajax({ type: 'POST', //GET or POST url: "jquery-ajax", cache: false, data: { todo: "ajaxexample1"}, success: functionSucceed, error: functionFailed,

初识easy-mock-cli,始于一场缘分 在谈及easy-mock-cli的时候，先说一下easy-mock是什么把？官方解释是：Easy Mock 是一个可视化，并且能快速生成 模拟数据 的持久化服务。通俗易懂的话，就是假数据。使用的目的就是为了在前后端开发的过程中，前端会比后端先行一步，在还原完页面就需要等后端的接口在去开发功能，这样，就会造成前后端开发时间不同步，浪费开发的时候，mock的出现就解决了这个困境。前端在还原完页面之后，可以根据与后端定义好的mock接口，进行开发。等后端开发完成之后，与后端联调。项目大功告成，也没有谁等谁，互相嫌弃的问题了。 easy-mock-cli 的自我介绍 Easy Mock 是一个可视化，并且能快速生成模拟数据的服务。以项目管理的方式组织 Mock List，能帮助我们更好的管理 Mock 数据，不怕丢失。 Easy Mock CLI 是一个基于 Easy Mock 快速生成 API 调用文件的命令行工具。 可以根据你mock的接口，结合axios生成的api层，一开始觉得真好啊，不用去一个个手写api层，自动生成了mock中所有的，觉得真开心呀，省事省力，然后就开始用mock模拟数据，进行接口测试。 easy-mock-cli的安装 npm install -g easy-mock-cli 创建配置文件 .easymockrc {

1、什么是分片上传 　　分片上传就是把一个大的文件分成若干块，一块一块的传输。这样做的好处可以减少重新上传的开销。比如：如果我们上传的文件是一个很大的文件，那么上传的时间应该会比较久，再加上网络不稳定各种因素的影响，很容易导致传输中断，用户除了重新上传文件外没有其他的办法，但是我们可以使用分片上传来解决这个问题。通过分片上传技术，如果网络传输中断，我们重新选择文件只需要传剩余的分片。而不需要重传整个文件，大大减少了重传的开销。 　　但是我们要如何选择一个合适的分片呢？因此我们要考虑如下几个事情： 　　 1. 分片越小，那么请求肯定越多，开销就越大。因此不能设置太小。 　　2. 分片越大，灵活度就少了。 　　3. 服务器端都会有个固定大小的接收Buffer。分片的大小最好是这个值的整数倍。 　　因此，综合考虑到推荐分片的大小是2M-5M，具体分片的大小需要根据文件的大小来确定，如果文件太大，建议分片的大小是5M，如果文件相对较小，那么建议分片的大小是2M。 　　 实现文件分片上传的步骤如下： 　　1. 先对文件进行md5加密。使用md5加密的优点是：可以对文件进行唯一标识，同样可以为后台进行文件完整性校验进行比对。 　　2. 拿到md5值以后，服务器端查询下该文件是否已经上传过，如果已经上传过的话，就不用重新再上传。 　　3. 对大文件进行分片。比如一个100M的文件

写在前面 这个作业属于哪个课程 <班级的链接> 这个作业要求在哪里 <作业要求的链接> 团队名称 啥都有 这个作业的目标 alpha冲刺 作业正文 正文如下 其他参考文献 ... Part1.每日汇报 学号 昨日进展 今日安排 存在问题 心得 221701207 设置获取全部订单，确认订单，取消订单的接口 设置获取公告信息接口，商品搜索接口，详细商品信息接口，顺便设置了异常处理(但不属于我负责，所以没有继续测试运行) 今天发现我的文件没有上传到github-dev 而是上传到了我的fork里面，之后重新clone了一遍并且把复制的数据写入，并测试了无误 得和前端进行及时的交流，不然出现了低级错误还会影响前端的进程 221701212 表单验证、商品搜索结果页面初步实现 继续完善商品搜索结果页面 CSS布局再次遇到问题(已解决) 刚说布局上手，就被现实迎头痛击，太菜了 221701218 商品详情页+首页+历史订单页的所有axios交互请求 修复负责页面的小bug，后端部分接口交互 前后端对接口文档有分歧应当尽早协商 团队交流沟通具体到前后端的交流沟通也很重要 221701226 模块化处理完成，修改了发布商品功能 增加Json对象封装类，进行统一异常处理 第一次知道统一异常处理，有些不熟练 以前对于异常总是不重视，如今开始要重视起来 221701229 管理端剩余页面完成

开发企业级移动端音乐App，拿下Vue.js高级知识点 一、声明 本项目来自于 黄轶 老师的慕课网教程 Vue 2.0高级实战 开发移动端音乐 WebAPP ,目的在学习交流，如果有冒犯相关的权益，还望告知。 二、简述 由于本人也是第一次写文章，才薄智浅，博众一笑。关于某课上的音乐项目《Chicken Music》本人也是十分感兴趣，这篇文章主要目的是在于让更多的同学学习到深层次的前端知识（有点等于没说~哈哈哈）。本人是十分尊重知识产权的，但是日益增长的物质文化需要（支付不起价格）同落后的社会生产之间（工资低）的矛盾。本人怀着共同学习，共同进步的原则会为大家持续更新，数据接口一旦崩溃、修改、超时，会为大家在第一时间修改。 三、效果 四、页面代码块 由于代码量太多只能展示部分关键代码，还望海涵。 五、项目演示地址 六、项目帮助 此项目代码量巨大一篇文章，三言两语，远远不能表述清楚。如有需要本人可在闲暇之余提供力所能及的帮助 WeChat:13751817115 。也可以通过私人电邮联系我: 13751817115@163.com 。 项目运用了: 1.Vue.js 的高级应用 - Vuex、嵌套路由、slot、mixin、code spliting 等技术 2.庞大的组件库 - 13个基础组件+15个业务组件 3.MVVM框架：Vue.js 4.状态管理：Vuex 5.前端路由

背景 申请季开始进入尾声... 前段时间有幸和「哈陆 Halu」一位去年刚入学加拿大滑铁卢大学的 dalao 通过交换友情链接认识了，他的博客链接是 → halu.lu ，保存在「伙伴」栏目名为「無位小站」。借着讨论 Nuxt.js 的机会和他聊了一聊，了解了一些他参加的 Co-op 项目和滑大数学系的情况... 他在博文中有提到他收到的另一所学校录取——华盛顿大学(也是 UW 🙂 ) 其世界综合排名会考前很多 (在 2020 US News 世界大学排名中最靠前，第 10 名，实属 dalao)，但是最后没有选择去的原因应该还是因为滑铁卢大学独有的 Co-op 项目... 大概意思就是一共 5 年大学本科，每年有 3 个学期，从第一年开始 Co-op 项目即在其中包括一个学期的 Work Term。在 Work Term 中学生可以申请在 7000+ 个合作企业中选择做带薪实习工作，根据官网所述最低总收入为 42,000 加币还是非常可观的。工作目的地包括谷歌等大厂，可选择在加拿大或其他国家(比如美国硅谷等)。本科毕业后就会拥有 2 年工作经验，学习与工作相交的大学体验听起来非常啊梅子英啊 🙂 扯太多了....但是他也谈到他的第一年 Co-op 申请中大多数的职位都有对于 React.js 的技能要求，他也是属于要 React 会 Vue 又没有时间现学的状态吧。不过 React

为什么要写这篇文章 从开始面试到现在也有4年多了，面过实习生，校招，也有很多资深的人，其中不乏有很多优秀的人，但大部分人对前端还是一知半解，尤其是在校生和工作年限比较少的人在面试过程中会有很多问题比如 简历内容太乱：写了很多和技术无关的东西 基础不够扎实：只会react，vue却不知道虚拟dom，只会用fetch，axios确不知道ajax请求的过程 代码能力差：递归，查找等一些简单的算法写不出，代码不规范。 工作只做了业务，却没有技术积累 这和学习方法有关，也可能和我们的经验有关。所以在参加完今年校招之后想通过一系列前端面试的文章来帮助大家找到一份满意的工作，同时找到一些适合自己学习方法。这些文章会包括写简历，面试流程，面试题分析和offer选择等，也会把一些面试的案例拿出来分析，希望可以帮助到大家。 简历 简历是找工作的敲门砖，通过简历可以简单的了解一个人，可以说简历就是给面试官的第一印象。很多人投出去的简历都石沉大海，那么很可能是第一印象没有打好。今天就和大家聊一聊前端面试的简历应该怎么写。 如何通过简历筛选 一般正规流程的公司，简历会有两次筛选一次是hr，一次技术负责人。有一些员工会在各种论坛去发招聘信息，这种一般简历会直接到达部门负责人的手里，所以有机会的话还是建议大家多走内推，因为很多公司内推是有奖励的，所以内推跟进都是比较积极的。 我们先说下hr这一关

转载自：http://www.cnblogs.com/summer7310/p/6394379.html； 之前项目都是使用Angularjs，（注明此处主要讲Angularjs 1）在初步使用Vue.js后做一个简单的对比笔记。 首先从理论上简单说一下各自的特点，之后再用几个小的例子加以说明。 Angular 1，MVVM (Model-View)(View-model) 2，模块化（Module）控制器（Contoller）依赖注入： 3，双向数据绑定：界面的操作能实时反映到数据，数据的变更能实时展现到界面。 4，指令(ng-click ng-bind ng-model ng-href ng-src ng-if/ng-show...) 5，服务Service($compile $filter $interval $timeout $http...) 6，路由(ng-Route原生路由),ui-router(路由组件) 7，Ajax封装($http) 其中双向数据绑定的实现使用了$scope变量的脏值检测，使用$scope.$watch（视图到模型），$scope.$apply(模型到视图)检测，内部调用的都是digest，当然也可以直接调用$scope.$digest进行脏检查。值得注意的是当数据变化十分频繁时，脏检测对浏览器性能的消耗将会很大