卡比记账项目——Axios封装

封装思路

1. 使用中间层，即不直接使用Axios，使用HttpClient的类对Axios进行封装，好处是使用HttpClient可以修改参数。这样一来比较方便我们后续的修改以及维护
2. 统一的错误处理。比如过于频繁的发送请求会得到429的状态码
3. 加载中的动画
4. 权限控制
5. 统一刷新token

封装HttpClient

目前主要做的内容就是增删改查，所以只需要get，post，patch，delete分别代表http的四个动词。 get负责read，post负责create，patch负责update， delete负责destory

除此之外，还有构造constructor部分，里面就有一些基础的参数 比如：baseURL它是一个字符串。 由于我们底层还是使用的axios所以要加一个Axios的实例， instance:AxiosInstance

然后进行初始化，一开始我们就创建一个实例，把baseURL传进去。

接下来get就可以使用instance的方法了，我们直接使用通用方法request。 request接受这些参数

我们可以自己定义接受什么参数，首先是一个url，然后是一个查询字符串query，如果还有其他的配置就加上config，类型是 AxiosRequestConfig

回到request，只接受一个对象，里面有url：url，params：query，method：'get'

把config复制过来，再return就封装完成了。

如果担心有覆盖问题，可以用Omit，第一个参数是模仿的类型，第二个参数是删掉的类型。 我们在使用get的时候，一般是先声明一个get的实例，然后获取一些东西。但是我们没办法知道这个result的类型。 所以我们最好给get接受一个类型。 查询参数和config都可以不传所以加上一个？ 后面的post，patch，delete也以此类推

封装一个实例以及拦截器的使用。

const http = new Http('/api/v1')

可以对其默认的instance进行一些封装，比如拦截器。 我们只管响应，用到

http.instance.interceptors.response.use

做一个映射可以得到统一错误。我们将其命名为getFriendlyError

const map: Record<string, string> = {
    'is invalid': '格式不正确'
}
export const getFriendlyError = (error: string) => {
    console.log(error)
    return map[error] || error
}