初始文件目录
企业微信截图_0df730a7-22b0-43ce-92ba-06ae2526c814.png
在src目录下
1、先创建一个 index.ts 文件，作为整个库的入口文件，然后我们先定义一个 axios 方法，并把它导出
export default function axios(config) {
// todo
}
2、在src下创建文件夹types，创建文件index.ts，作为我们项目中定义类型的公用文件
- 首先定义AxiosRequestConfig
interface AxiosRequestConfig {
url: string,
method?: string,
data?: any,
params?: any
}
method是可选的，默认应该是get，data和params都是可选的
为了让method传入特定的字符串，我们定义字符串字面量类型
type Method = 'get' | 'GET'
| 'delete' | 'DELETE'
| 'put' | 'PUT'
| 'options' | 'OPTIONS'
| 'head' | 'HEAD'
| 'post' | 'POST'
| 'patch' | 'PATCH'
- 接下来我们把AxiosRequestConfig中的method属性类型改为method类型
interface AxiosRequestConfig {
url: string,
method?: Method,
data?: any,
params?: any
}
3、返回到index.ts，继续完善axios方法
import { AxiosRequestConfig } from "./types";
export default function axios(config: AxiosRequestConfig) {
// todo
}
4、使用XMLHttpRequest发送请求，在src下新建一个xhr.ts的文件，将发送请求的逻辑分离出来
import { AxiosRequestConfig } from "./types";
export default function xhr(config: AxiosRequestConfig): void {
}
5、实现xhr的整体逻辑
import { AxiosRequestConfig } from "./types";
export default function xhr(config: AxiosRequestConfig): void {
// method和data可能没有， 所以给出默认值
const { url, method = 'get', data = null } = config
const request = new XMLHttpRequest()
request.open(method.toUpperCase(), url)
request.send()
}
6、在index.ts中引入xhr模块
import { AxiosRequestConfig } from "./types";
import xhr from './xhr'
export default function axios(config: AxiosRequestConfig) {
xhr(config)
}
7、编写demo
import axios from '../../src/index'
axios({
url: '/api/demo1/get',
params: {
a: 1,
b: 2
}
})
至此，我们实现了一个简单的请求，但是可以发现，我们的params没有被用到；我们的request body的数据格式、请求头headers也没有处理；另外我们虽然接收到了响应数据，但是我们没有对响应数据做任何处理。接下来，我们需要处理这些问题。
