本文主要是介绍vue3封装接口（自测可用），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
注：这个是js版本不是ts注意
在实际的项目实战中如果我们不对接口加以管理，整篇看着就很乱，这个时候我们就要用到接口封装了。
废话不多说直接上代码！！！
首先是request.js
import axios from "axios";// 使用环境变量来设置基础URL
const baseURL = process.env.VUE_APP_API_BASE_URL || "接口前缀http://xxxxxxxxxxxxxx";const service = axios.create({baseURL: baseURL,timeout: 5000,headers: {"Content-type": "application/json;charset=utf-8"}
});service.interceptors.request.use(config => {const token = localStorage.getItem("token");if (token) {config.headers['Authorization'] = 'Bearer ' + token;}return config;
}, error => {console.error("Request error: ", error);return Promise.reject(error);
});service.interceptors.response.use(response => {if (response.status === 200) {return response.data;} else {// 可以根据需要添加更多的错误处理console.error("Response error: ", response);return Promise.reject(new Error("Error with status code " + response.status));}
}, error => {// 对常见的HTTP错误进行处理if (error.response) {// 请求已发出，服务器回复状态码不在2xx范围console.error("Error status: ", error.response.status);// 根据返回的状态码进行不同的处理// 例如: if (error.response.status === 401) { // 处理登录过期 }} else {// 服务器连回应都没有返回console.error("Network error: ", error);}return Promise.reject(error);
});export default service;其次api.js
post方法
// 我要用到的一些接口
import service from "@/request/index";
// 引入接口
// 如果在 JavaScript 中引入接口不需要进行类型标注
// import { ILoginData } from "@/type/login";// 登录接口
export function index(data) {return service({url: "/index/index",method: "POST",data: data});
}
get方法
export function index(queryParams) {return service({url: "/index/index",method: "GET",params: queryParams});
}
然后home.vue
到这里就非常简单了，直接import引入相应的名称在使用就可以了
<template><div><div @click="inds">加载数据</div></div>
</template><script setup>
import { ref } from 'vue';
import { index } from "@/request/api";const inds = async () => {try {const res = await index();console.log(1, res);} catch (err) {console.error(2, err);} finally {console.log(3);}
};
</script>
最后封装接口请求数据
首页不需要参数，可以直接请求，那么需要参数的怎么办呢？有方法
这两种方法都行没什么不一样的
方法一
<script setup>
import { ref } from 'vue';
import { index } from "@/request/api";const inds = async () => {try {let id = 1119;//比如接口需要id就声明id，如果是name就写nameconst res = await index({id});console.log(1, res);} catch (err) {console.error("失败", err);}
};
</script>方法二
<script setup>
import { ref } from 'vue';
import { index } from "@/request/api";const inds = async () => {try {const res = await index({id:1119});console.log(1, res);} catch (err) {console.error("失败", err);}
};
</script>到这里就结束了感谢观看，有疑问可以在评论区写出来。
这篇关于vue3封装接口（自测可用）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
