typescript发送post请求-带你一步步使用typescript实现一个axios库（一）

bendan520 2023年9月5日 typescript 0

注：本教程基于慕课网黄学长的课程

源地址

前言

我是一名后端新手，工作一年多了。 喜欢写代码typescript发送post请求typescript发送post请求，喜欢分享。最近在学习黄前辈的课程，想到写一篇博客来记录一下。 一方面可以加深自己的理解，另一方面可以分享给需要的人。

需求分析

我们要做的是使用typescript来构建axios，所以需要先熟悉axios。 此版本将支持以下功能。

项目初始化

这里我们使用typescript-library-starter，一个typescript的脚手架工具。 如果您有兴趣，可以点击进一步了解。

前言

如果你还不了解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
复制代码

typescript发送post请求_发送请求失败(-999)_发送请求英文

这时，你的编辑器会给你一个蓝色波浪线警告和一个红色警告（如果没有，请安装TSlint插件），并且在移动键盘时会显示错误信息。 如右图所示...

这是图片

移动到配置将显示

1、已声明“config”，但从未读取其值。ts(6133)
参数“config”隐式具有“any”类型。ts(7006)
2、移到绿色的那里会告诉你这个函数不能为空
原因：默认在tsconfig.json文件中吧strict设置为了true(建议开启，不要吧它设置成false)
复制代码

解决方案：为config定义socket类型

创建类型文件（类型）

发送请求失败(-999)_发送请求英文_typescript发送post请求

在src目录下创建types目录，并在下面创建index.ts类型定义文件。

定义 AxiosRequestConfig 套接字类型

export interface AxiosRequestConfig {
  url: string   
  method: string
  data?: any  // 可选参数用?号表示
  params?: any
}
复制代码

其中url、data、params由用户随机填写，方法固定为get、post、put等。

所以这里我们需要将方法类型重写为字符串字面量类型。

然后我们将里面的代码重写如下

发送请求英文_发送请求失败(-999)_typescript发送post请求

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
}
复制代码

这将输入法限制为仅指定的字符串

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)
}
复制代码

待续...