关于axios的封装

如何对 axios 进⾏⼆次封装?以及 api 如何封装?

1. 在 src ⽂件夹内创建 utils ⽂件夹

2. 在 utils ⽂件夹内创建 request.js ⽂件

3. 在 request.js 内引⼊ axios

4. 使⽤ axios.create ⽅法创建 axios 的实例,在 axios.create ⽅法⾥⾯可以配置请求的公共地址和超时时间以及其他的⼀些配置

5. 在创建请求拦截器和响应拦截器

6. 在请求拦截器⾥⾯可以获取 vuex 的 token,并通过 config.header.token = vuex 的 token,将 token 发送给后台

7. 在请求拦截器⾥⾯我们配置 loading 加载

8. 在响应拦截器⾥⾯我们可以结束 loading 加载以及 token 的过期处理,以及错误响应信息的处理

9. 最后通过 export default 导出 axios 的实例对象

10. 在 src ⽂件内创建 api ⽂件夹

11. 在 api ⽂件夹内创建对应模块的 js ⽂件

12. 在对应的⽂件⾥⾯引⼊ request.js ⽂件

13. 封装 api ⽅法

14. 最后通过 export default 导出封装的 api ⽅法

axios 的拦截器的作⽤?应⽤场景都有哪些?

⾸先呢,axios 拦截器是 axios 给我们提供的两个⽅法,通过这两个⽅法我们可以对请求发送之前以及响应之后进⾏逻辑的再次处理(拦截). 有请求拦截和响应拦截 这两个拦截器不需要⼿动触发,只要发送 http 请求的时候就会⾃动触发. 我在项⽬中经常通过拦截器发送 token, 对 token 进⾏过期处理,加全局 loading 以及处理错误编码字典