vue3+axios项目初使用

vue3+axios项目初使用

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