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

最新推荐文章于 2024-09-27 16:23:10 发布

m0_68309348

最新推荐文章于 2024-09-27 16:23:10 发布

阅读量52

点赞数 1

文章标签： vue

本文链接：https://blog.youkuaiyun.com/m0_68309348/article/details/124390520

版权

本文档描述了如何在src目录下创建一个utils文件夹，然后在此文件夹中建立request.js，用于引入并配置axios。通过axios.create设置基础URL和超时时间，并实现请求和响应拦截器。请求拦截器用于获取vuex的token并添加到请求头，同时处理loading状态。响应拦截器处理token过期、错误响应以及结束loading。最后，导出axios实例。在src目录下创建api文件夹，按模块创建js文件，封装API方法，并导出封装好的API接口。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

                    
                        
                    
                    在src⽂件夹内创建utils⽂件夹
在utils⽂件夹内创建request.js⽂件
在request.js内引⼊axios
使⽤axios.create⽅法创建axios的实例,在axios.create⽅法⾥⾯可以配置请求的公共地址和超时时间以及其他的⼀些配置
在创建请求拦截器和响应拦截器
在请求拦截器⾥⾯可以获取vuex的token,并通过config.header.token = vuex的token,将token发送给后台
在请求拦截器⾥⾯我们配置loading加载
在响应拦截器⾥⾯我们可以结束loading加载以及token的过期处理,以及错误响应信息的处理
最后通过export default 导出axios的实例对象
在src⽂件内创建api⽂件夹
在api⽂件夹内创建对应模块的js⽂件
在对应的⽂件⾥⾯引⼊request.js⽂件
封装api⽅法
最后通过export default 导出封装的api⽅法

                