一、项目目录介绍

在这里，我想通过写博客的方式，来记录一下自己的思考过程。本篇专栏主要是使用typescript来重写axios，开篇，先来熟悉一下项目的目录结构。

一、环境的搭建

我们这里使用了集成安装环境typescript-library-starter集成安装环境，可以帮助我们安装所需要的代码环境。至于这个集成环境的使用，我们可以点击进去了解更多。
安装好环境之后，我们的代码目录结构如下图所示

image.png
在这个目录中，我们会把核心代码放到src/目录中，在examples目录中，我们会编写一些测试用例。

二、创建请求、规范化数据

在了解项目的目录结构后，我们就开始写我们的代码。
首先新建文件（/src/index.ts）

1、首先创建axios构造函数，并将其暴露出去

function axios(config: AxiosRequestConfig) {
  processConfig(config)
  xhr(config)
}

export default axios

在这个构造函数中，我们需要传入config参数，对config参数的类型，我们可以定义一个接口类型约束一下。

2、定义接口约束

新建文件 src/types/index.ts

export interface AxiosRequestConfig {
  url: string
  method?: Method
  data?: any
  params?: any
  headers?: any
}

在这个接口中，我们定义Axios构造函数接受参数的格式，相信大家对接口中的参数是比较了解的。

3、创建xhr对象，发送请求

Axios构造函数有了，那么我们就要在该构造函数中实现发送请求的操作了。

import { AxiosRequestConfig } from './types'
export default function xhr(config: AxiosRequestConfig): void {
  const { data, url, method = 'get' } = config
  const request = new XMLHttpRequest()
  request.open(method.toUpperCase(), url, true)  //
  request.send(data)
}

我们新建XMLHttpRequest实例对象request，通过request.open(method, url, true)和request.send(data)发送请求。解释一些open()方法的第三个值。默认为trrue，表示要不要异步执行操作。如果值为false，send()方法直到收到答复前不会返回。

通过上面的步骤，我们的基本请求框架就算是搭建起来了，剩下就是给这个框架中添砖加瓦的呢。