vue3+axios项目初使用
- 省略vue3项目创建
- 用vscode打开已有的vue3项目,npm install axios下载axios
- axios基础封装
在src目录下新建utils文件夹,新建http.js文件,引入axios模块,axios.create配置新建一个实例,配置基地址、超时时间、请求拦截、响应式拦截,如下图所示 - 接口封装
src文件夹下新建apis文件夹,再新建testAPI.js文件用来封装接口,如下图所示,先引入上一步创建的请求实例,通过函数封装
- 接口调用
测试:在main.js下引入对应的模块,调用封装好的函数,如下图
- 打开浏览器,打开调试工具,看到浏览器打印出请求到的数据,如下图
点击Network,选中FETCH/XHR,可以看到请求头和状态码200,表示请求成功
- 补充
如果项目里有不同的业务模块需要的接口基地址不同,该如何来做?
axios.create()可以执行多次,每次执行就会生成一个新的实例,比如:
const http1 = axios.create({baseurl:“url1”})
const http2 = axios.create({baseurl:“url2”})