手把手带你使用 typescript 实现一个 axios 库(一)
栏目: JavaScript · 发布时间: 5年前
内容简介:注:本教程基于慕课网黄大神的课程进行的整理本人是个工作一年多的前端小菜鸟,热爱写代码,喜欢分享。近期在学习黄大神的课程,就想着写博客来记录一下,一方面加深自己的理解,一方面分享出来给需要的人
注:本教程基于慕课网黄大神的课程进行的整理
前言
本人是个工作一年多的前端小菜鸟,热爱写代码,喜欢分享。近期在学习黄大神的课程,就想着写博客来记录一下,一方面加深自己的理解,一方面分享出来给需要的人
需求分析
我们要做的是用 typescript 来重构 axios,so 你需要先熟悉axios,此次重构,会支持以下功能。
- 在浏览器端使用 XMLHttpRequest 对象通讯
- 支持 Promise API
- 支持请求和响应的拦截器
- 支持请求数据和响应数据的转换
- 支持请求的取消
- JSON 数据的自动转换
- 客户端防止 XSRF
项目初始化
这里我们使用 typescript 的一个脚手架工具 typescript-library-starter ,感兴趣的可以点击进去进一步学习。
前言
如果你还不了解typescript,可以先看一下官网的5分钟上手TypeScript这篇文章
使用方式
git clone https://github.com/alexjoverm/typescript-library-starter.git ts-axios-pro cd ts-axios-pro npm install // 如果npm安装慢的话,可以用如下命令替换为国内的淘宝源 npm install --registry=https://registry.npm.taobao.org 复制代码
目录结构
├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── code-of-conduct.md ├── node_modules ├── package-lock.json ├── package.json ├── rollup.config.ts // rollup 配置文件 ├── src // 源码目录 ├── test // 测试目录 ├── tools // 发布到 GitHup pages 以及 发布到 npm 的一些配置脚本工具 ├── tsconfig.json // TypeScript 编译配置文件 └── tslint.json // TypeScript lint 文件 复制代码
基础请求代码的实现
先看一个基础的请求,我们通过传入一个对象来发送请求。
axios({ method: 'get', url: '/simple/get', params: { a: 1, b: 2 } }) 复制代码
创建入口文件
在src目录下创建一个index.ts文件用来作为我们的入口文件。如果你仔细观察了上面的axios请求,不难写出如下的代码
function axios(config) { } export default axios 复制代码
此时,你的编辑器会给你一个红色的波浪线警告和一个绿色的警告(如果没有,请安装TSlint插件),鼠标移上去会显示错误信息。如下图...
这里是图片
移到config上会展示
1、已声明“config”,但从未读取其值。ts(6133) 参数“config”隐式具有“any”类型。ts(7006) 2、移到绿色的那里会告诉你这个函数不能为空 原因:默认在tsconfig.json文件中吧strict设置为了true(建议开启,不要吧它设置成false) 复制代码
解决方法:给config定义接口类型
创建类型文件(type)
在src目录下创建一个 types
目录,在下面创建一个index.ts类型定义文件。
定义一个AxiosRequestConfig接口类型
export interface AxiosRequestConfig { url: string method: string data?: any // 可选参数用?号表示 params?: any } 复制代码
其中 url
, data
, params
这三者都是用户随机填写的,但是 method
是固定为 get
、 post
、 put
等。
so我们这里需要把 method
的类型改写为字符串字面量类型。
接下来我们改写上面的代码如下
export type Method = 'get' | 'GET' | 'delete' | 'DELETE' | 'head' | 'HEAD' | 'options' | 'OPTIONS' | 'post' | 'POST' | 'put' | 'PUT' | 'patch' | 'PATCH' export interface AxiosRequestConfig { url: string method: Method data?: any params?: any } 复制代码
这样限制了输入的method只能为指定的字符串
scr
下的 index.ts
为
import { AxiosRequestConfig } from './types' function axios(config: AxiosRequestConfig) { // aaa } export default axios 复制代码
此时,就不会有警告信息
编写原生ajax请求代码
我们利用模块化的思想,将这部分逻辑拆分为一个单独的ts文件。在 src
目录下新建一个 xhr.ts
文件,内容如下
import { AxiosRequestConfig } from './types' // 引入config类型定义 // void: 它表示没有任何类型。 当一个函数没有返回值时,你通常会见到其返回值类型是 void: export default function xhr(config: AxiosRequestConfig): void { const { url, method = 'get', data = null } = config // 从config中解构出url,method, data 参数 // 创建XMLHttpRequest对象 const request = new XMLHttpRequest() /** * @description: 发送 * @param method {String} 请求方式 * @param url { String} 请求url * @param async {Boolean} 是否异步 */ request.open(method.toUpperCase(), url, true) request.send(data) } 复制代码
未完待续...
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 使用Akka实现并发
- 使用GOLANG实现猴子排序
- 使用 WebSocket 实现 JsBridge
- 使用 RabbitMQ 实现 RPC
- 使用Kafka实现事件溯源
- 使用 Swift 实现 Promise
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
网站开发案例课堂:HTML5+CSS3+JavaScript网页设计案例课堂
刘玉红 / 2015-1-1 / 68
《网站开发案例课堂:HTML5+CSS3+JavaScript网页设计案例课堂》作者根据在长期教学中积累的网页设计教学经验,完整、详尽地介绍HTML 5 + CSS 3 + JavaScript网页设计技术。 《网站开发案例课堂:HTML5+CSS3+JavaScript网页设计案例课堂》共分24章,分别介绍HTML 5概述、HTML 5网页文档结构、HTML 5网页中的文本和图像、HTML......一起来看看 《网站开发案例课堂:HTML5+CSS3+JavaScript网页设计案例课堂》 这本书的介绍吧!