typescript
文章平均质量分 92
赵sir来了
taste new experience
展开
-
基于 TS 实现 axios(九)
这一章是最后一章,主要是进行单元测试。jest什么是 jestjest 是 Facebook 弄出来的一个 JavaScript 的测试框架,这个是很好用的。我把的它的官网地址放在了这里:https://jestjs.io/zh-Hans/安装 jest由于我们的项目是使用 typescript-library-starter 初始化的,已经内置了 Jest 的安装,但是安装的版本却不是最新的,我们可以对 package.json 中的相关依赖版本做修改,重新安装来进行更新。{ "@typ原创 2020-06-15 15:12:06 · 286 阅读 · 0 评论 -
基于 TS 实现 axios(八)
这一章主要完善接口目录结构没有进行修改withCredentials这个功能是可以携带跨越请求的,默认情况下是自动携带同源 cookie 的 ,但是跨域的时候是不可以进行携带的,将 withCredentials 设置成 true 就可以进行携带了。types/index.tsexport interface AxiosRequestConfig { // ... withCredentials?:boolean, //...}core/xhr.ts// ...i原创 2020-06-11 21:54:52 · 979 阅读 · 0 评论 -
基于 TS 实现 axios(七)
这一章节,主要是写取消请求目录:取消请求有些场景下,我们希望能主动取消请求,比如常见的搜索框案例,在用户输入过程中,搜索框的内容也在不断变化,正常情况每次变化都应该向服务器发送一次请求,但在当用用户输入过快的时候,我们不希望每次变化请求都发出去,通常一个解决方案是前端用 debounce 的方案,比如延时 200 ms 发送请求,这样当用户连续输入的字符,只要输入间隔小于 200 ms,前面输入的字符都不会发请求。但是还有一种极端情况下,后端接口很慢,比如超过1s才能响应,这个时候即使多了 200m原创 2020-06-02 22:27:15 · 556 阅读 · 0 评论 -
基于 TS 实现 axios(六)
这一章主要实现一些配置化,让用户可以进行配置默认配置transformRequest 和 transformResponseaxios.create API目录:默认配置添加 defaults.ts :import {AxiosRequestConfig} from './types';const defaults: AxiosRequestConfig = { method: 'get', timeout: 0, headers:{ comm原创 2020-05-24 21:22:28 · 684 阅读 · 0 评论 -
基于 TS 实现 axios(五)
今天这一章节主要介绍 拦截器目录结构:拦截器先问什么是拦截器?可以从字面意思理解大概就是拦截数据,主要运用在发起请求前或请求返回数据后对数据进行处理,可以运用在登录、处理一些格式化数据之类的。按照请求的时间不同分为:请求前的 请求拦截器,请求后的 响应拦截器在 types/index.ts 中新增代码// ...// 最后加入export interface AxiosInterceptorManage<T>{ use(resolved:ResolvedFn<T原创 2020-05-23 21:32:22 · 834 阅读 · 0 评论 -
基于 TS 实现 axios(四)
这一章主要实现接口的扩展接口扩展目录结构:core 目录:core 中的都是一些核心代码Axios.ts这个是新加的类,扩展接口,可以向 axios,axios.get,axios.post 那样使用import {AxiosRequestConfig, AxiosPromise,Method} from '../types'import dispatchRequest from './dispatchRequest';export default class Axios{ re原创 2020-05-12 21:06:17 · 2425 阅读 · 0 评论 -
基于 TS 实现 axios(三)
这一小节,主要是把异常的处理加上处理错误网络错误就在你发送 Ajax 请求的地方,new 出来的 XMLHttpRequest 有一个 onerror 的方法,把你的方法挂上去就可以了。request.onerror = function handleError() { reject(new Error('Network Error'));} 超时错误同样的,在new 出来...原创 2020-04-28 22:04:11 · 442 阅读 · 0 评论 -
基于 TS 实现 axios(二)
这一次主要是基础功能实现目录结构:仅仅包含 src 下的编码注:get 中的参数是在 url地址上的;post 中的参数是在 data 中的,并不能在 url 地址中url 编码实现了这个功能其实就意味着实现了 GET ,想要实现 POST 就必须加上响应头 header要想传递请求,我们必须将 URL地址 和 参数 按照一定规则拼接起来,不多说,先上代码:// 判断类型是否...原创 2020-04-20 21:57:24 · 655 阅读 · 0 评论 -
基于 TS 实现 axios(一)
需求分析我们写的 axios 具有以下特点:在浏览器使用 XMLHttpRequest 对象通讯支持 Promise API支持请求和响应的拦截器支持请求数据和响应数据的转换支持请求的取消JSON 数据的自动转换客户端防止 XSPF准备1、需要一个远程仓库需要一个 GitHub 的账号(其他的远程仓库也是可以的),建立一个仓库。注:GitHub 仓库的地址:https...原创 2020-04-14 21:43:49 · 3419 阅读 · 0 评论 -
TypeScript 语法学习(二)
类介绍从 ES6 开始,JS 程序员将能够使用基于类的面向对象的方式。 使用TypeScript,我们允许开发者现在就使用这些特性,并且编译后的 JS 可以在所有主流浏览器和平台上运行,而不需要等到下个 JS 版本。使用class Greeter { greeting: string constructor (message: string) { this....原创 2020-04-06 22:25:13 · 427 阅读 · 0 评论 -
TypeScript 语法学习(一)
TypeScript 是 JavaScript 的超集安装npm i typescript -g使用tsc xx.ts文件路径 输出文件路径数据类型TypeScript 包含 JavaScript 的类型,加了一些类型。只不过声明的时候记得加 :类型名称基本数据类型let a:number = 1;let bool:boolean = true;let b:string...原创 2020-03-30 21:04:34 · 401 阅读 · 0 评论