MVVM模式
提示 说明：本章内容是博主的Vue学习笔记，以官方文档为准。 MVVM模式MVVM模式，M即 model，数据模型；V即 view，视图；VM即 view-model，视图模型。 理解 首先，数据Model通过Data Bindings把数据绑定在View视图上， 当View视图有交互（有改变）的时候，Dom listeners会自动监听，然后更新数据Model。 Q：什么是MVVM模式？ A：MVVM模式，第一个M代表数据模型，V代表视图，VM代表视图模型；它的实际操作原理是：后台数据通过视图模型来渲染视图，就是页面。当用户在页面上进行操作的时候，视图模型会自动监听到用户的操作，从而改变后台数据。 来源：本文导入自 xugaoyi/vuepress-theme-vdoing 的 docs/《Vue》笔记/01.基础/00.MVVM模式.md。原作者：xugaoyi。许可证：MIT。
ECMAScript 6 简介
说明：本章内容为博主在原教程基础上添加自己的学习笔记，来源http://es6.ruanyifeng.com/，教程版权归原作者所有。 ECMAScript 6 简介ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 ECMAScript 和 JavaScript 的关系一个常见的问题是，ECMAScript 和 JavaScript 到底是什么关系？ 要讲清楚这个问题，需要回顾历史。1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织 ECMA，希望这种语言能够成为国际标准。次年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。 该标准从一开始就是针对 JavaScript 语言制定的，但是之所以不叫 JavaScr...
事件
事件一、EventTarget 接口 事件的本质是程序各个组成部分之间的一种通信方式，也是异步编程的一种实现。DOM 支持大量的事件，本章开始介绍 DOM 的事件编程。 1、概述DOM 的事件操作（监听和触发），都定义在EventTarget接口。所有节点对象都部署了这个接口，其他一些需要事件通信的浏览器内置对象（比如，XMLHttpRequest、AudioNode、AudioContext）也部署了这个接口。 该接口主要提供三个实例方法。 addEventListener：绑定事件的监听函数 removeEventListener：移除事件的监听函数 dispatchEvent：触发事件 2、EventTarget.addEventListener()EventTarget.addEventListener()用于在当前节点或对象上，定义一个特定事件的监听函数。一旦这个事件发生，就会执行监听函数。该方法没有返回值。 12target.addEventListener(type, listener[, useCapture]);// 事件名称，监听函数 [，是否在捕获阶段触...
处理请求 url 参数
处理请求 url 参数需求分析还记得我们上节课遗留了一个问题，再来看这个例子： 12345678axios({ method: 'get', url: '/base/get', params: { a: 1, b: 2 }}) 我们希望最终请求的 url 是 /base/get?a=1&b=2，这样服务端就可以通过请求的 url 解析到我们传来的参数数据了。实际上就是把 params 对象的 key 和 value 拼接到 url 上。 再来看几个更复杂的例子。 参数值为数组1234567axios({ method: 'get', url: '/base/get', params: { foo: ['bar', 'baz'] }}) 最终请求的 url 是 /base/get?foo[]=bar&foo[]=baz'。 ...
上传和下载的进度监控
上传和下载的进度监控需求分析有些时候，当我们上传文件或者是请求一个大体积数据的时候，希望知道实时的进度，甚至可以基于此做一个进度条的展示。 我们希望给 axios 的请求配置提供 onDownloadProgress 和 onUploadProgress 2 个函数属性，用户可以通过这俩函数实现对下载进度和上传进度的监控。 1234567891011axios.get('/more/get',{ onDownloadProgress(progressEvent) { // 监听下载进度 }})axios.post('/more/post',{ onUploadProgress(progressEvent) { // 监听上传进度 }}) xhr 对象提供了一个 progress 事件，我们可以监听此事件对数据的下载进度做监控；另外，xhr.uplaod 对象也提供了 progress 事件，我们可以基于此对上传进度做监控。 代码实现首先修改...
辅助模块单元测试
辅助模块单元测试准备工作通常我们会优先为一个库的辅助方法编写测试，我们会优先为 ts-axios 库的 helpers 目录下的模块编写测试。我们在 test 目录下创建一个 helpers 目录，创建一个 boot.ts 空文件，这个是因为我们上节课给 Jest 配置了 setupFilesAfterEnv 指向了这个文件，后面的章节我们会编写这个文件。 然后我们可以在控制台运行 npm test，它实际上是执行了 jest --coverage 来跑单元测试，我们会发现它会报错，没有匹配的测试文件，那是因为我们还没有在 test 目录下编写任何一个 .spec.ts 结尾的测试文件。接下来我们就来为这些辅助模块编写相应的测试。 util 模块测试test/helpers/util.spec.ts： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475...
自定义合法状态码
自定义合法状态码需求分析之前 ts-axios 在处理响应结果的时候，认为 HTTP status 在 200 和 300 之间是一个合法值，在这个区间之外则创建一个错误。有些时候我们想自定义这个规则，比如认为 304 也是一个合法的状态码，所以我们希望 ts-axios 能提供一个配置，允许我们自定义合法状态码规则。如下： 123456789axios.get('/more/304', { validateStatus(status) { return status >= 200 && status < 400 }}).then(res => { console.log(res)}).catch((e: AxiosError) => { console.log(e.message)}) 通过在请求配置中配置一个 validateStatus 函数，它可以根据参数 status 来自定义合法状态码的规则。 代码实现首先修改一下...
错误处理
错误处理需求分析在上一章节，我们实现了 ts-axios 的基础功能，但目前为止我们都是处理了正常接收请求的逻辑，并没有考虑到任何错误情况的处理，这对于一个程序的健壮性而言是远不够的，因此我们这一章需要对 AJAX 各种错误情况做处理。 并且我们希望程序也能捕获到这些错误，做进一步的处理。 12345678axios({ method: 'get', url: '/error/get'}).then((res) => { console.log(res)}).catch((e) => { console.log(e)}) 如果在请求的过程中发生任何错误，我们都可以在 reject 回调函数中捕获到。 我们把错误分成了几类，接下来我们就来分别处理这些错误情况。 处理网络异常错误当网络出现异常（比如不通）的时候发送请求会触发 XMLHttpRequest 对象实例的 error 事件，于是我们可以在 onerror 的事件回调函数中捕获此类错误。 我们在 xhr ...
请求取消模块单元测试
请求取消模块单元测试请求取消模块是 ts-axios 库核心流程其中一个分支，也是非常重要的模块，我们将从基础库和业务流程模块 2 个方面去编写单元测试。 Cancel 类单元测试cancel/Cancel.spec.ts： 12345678910111213141516import Cancel, { isCancel } from '../../src/cancel/Cancel'describe('cancel:Cancel', () => { test('should returns correct result when message is specified', () => { const cancel = new Cancel('Operation has been canceled.') expect(cancel.message).toBe('Operation has been canceled....
自定义参数序列化
自定义参数序列化需求分析在之前的章节，我们对请求的 url 参数做了处理，我们会解析传入的 params 对象，根据一定的规则把它解析成字符串，然后添加在 url 后面。在解析的过程中，我们会对字符串 encode，但是对于一些特殊字符比如 @、+ 等却不转义，这是 axios 库的默认解析规则。当然，我们也希望自己定义解析规则，于是我们希望 ts-axios 能在请求配置中允许我们配置一个 paramsSerializer 函数来自定义参数的解析规则，该函数接受 params 参数，返回值作为解析后的结果，如下： 123456789101112axios.get('/more/get', { params: { a: 1, b: 2, c: ['a', 'b', 'c'] }, paramsSerializer(params) { return qs.stringify(params, { arrayFormat: &#...