好习惯不能丢，先上成果

思路：

1. 引入axios

2. 实例化一个axios起名request

3. 为request配置请求和响应的拦截器

4. 请求拦截器中：为请求头带上json web token（也有用cookie的，看后端），并开启加载动画

5. 响应拦截器中：无论成功还是失败先关闭加载动画、判断响应status是否为200，若是则返回data，反之，弹出消息提示并中断promise链

6. 用async函数再包一层、实现自定义泛型为请求结果声明类型

7. 导出包装后的async函数

坑：

• 上面那个是为Vue3项目封装的，React项目不能直接拿去用

• 请求过程的加载动画和请求失败的消息提示依赖于element-plus

• 响应拦截器中对于HTTP的status判断过于简单粗暴，实际上status在200~299之间都算成功

• 如果status为200，响应结果会自动解包为data不需在then中手动再解

• 不支持get、post、put、delete等别名调用

• 加载动画是需要真实DOM的，在DOM挂载前就发起请求可能会出现问题

HTTP状态码：

• 1xx：服务端收到客户端的请求，但还需要客户端下一步动作

• 2xx：通俗的说，就是成功了

• 3xx：需要重定向

• 4xx：客户端有问题，比如404客户端的请求找不到对应资源，401客户端未携带正确的token或cookie认证信息

• 5xx：服务器报错，出现这个找后端就完了，一般不是前端的锅