vue3封装axios请求接口代码
时间: 2023-10-04 17:14:40 浏览: 146
在Vue3中,封装axios请求接口的代码可以通过以下步骤完成:
1. 首先,在项目中已经全局引入了axios,所以不需要再次引入axios。你可以在`request.js`文件中找到全局引入的代码。
2. 在`main.js`中,你可以通过`window.location.protocol`和`window.location.host`获取当前协议和主机IP端口。然后,可以使用这些信息来设置axios的默认请求`baseURL`。例如:
```
let protocol = window.location.protocol; // 获取协议
let host = window.location.host; // 获取主机
axios.defaults.baseURL = `${protocol}//${host}`;
```
3. 当需要将对象序列化成URL的形式并进行拼接时,可以使用`qs.stringify()`方法。这个方法会将对象序列化成URL的形式,以`&`符号进行拼接。
4. 在Vue3中,可以使用`globalProperties`来进行全局挂载。在`main.js`中,可以按照以下方式挂载axios请求方法:
```
app.config.globalProperties.$get = $get;
app.config.globalProperties.$post = $post;
app.config.globalProperties.$axios = axios;
```
其中,`$get`和`$post`是你封装的发送GET和POST请求的方法。
5. 最后,你需要在`main.js`中引入以上代码,以使其生效。
综上所述,这就是在Vue3中封装axios请求接口的代码。你可以根据实际需求进行相应的修改和调整。
阅读全文