vue3+vite+js中二次封装axios
一、安装axios
npm i axios
二、文件结构
涉及到的文件:
- utils/request.sj
- api/index.js(可以根据不同页面在api文件下新建不同文件夹,方便管理)
- vite.config.js
三、request.js
对axios进行简单的二次封装
import axios from "axios"; const request = axios.create({ // 此处的 '/api' 和 vite.config.js 的配置相关联 baseURL: "/api", timeout: 50000, requestOptions: { withToken: true, }, }); // 数据请求拦截 request.interceptors.request.use( // 1. 返回config对象 // 2. 可以设置携带 token 信息 (config) => { const token = window.localStorage.getItem("access_token"); token && config?.requestOptions?.withToken && (config.headers.token = token); return config; }, (err) => { return Promise.reject(err); } ); // 返回响应数据拦截 request.interceptors.response.use( (response) => { // console.log("request.js打印返回信息" , response); // 简化返回数据 if (response.data.code == "200") { return Promise.resolve(response.data); } }, // 错误执行 (error) => { console.log("错误信息", error); if (error.response.status) { switch (error.response.status) { case 404: console.log("请求路径找不到!"); break; case 500: console.log("服务器内部报错!"); break; // 还可以自己添加其他状态码 default: break; } } return Promise.reject(new Error(error.message)); } ); // 暴露对象 export default request;
四、index,js
api 文件下的 index.js
import request from "@/utils/request.js"; const API = { //获取名言 GET_SENTENCES: "/api/sentences", //发送验证码 GET_YANZHENGMA: "/api/sendVerificationCode", //注册 GET_ZHUCE:"/api/register", //获取个人信息 GET_USERINFO:"/api/getUserInfo" }; //获取名言 export const reqSentences = () => request.get(API.GET_SENTENCES); //发送验证码 export const reqYanzhengma = (data) => request.post(API.GET_YANZHENGMA, data); //注册 export const reqZhuce = (data) => request.post(API.GET_ZHUCE, data); //获取个人信息 export const reqUserinfo = () => request.get(API.GET_USERINFO);
五、vite.config.js 配置
使用: 配置代理跨域及请求路径
server: { port: 8080, // 设置服务启动端口号 open: true, // 设置服务启动时是否自动打开浏览器 cors: true, // 允许跨域 // 设置代理,根据我们项目实际情况配置 proxy: { //第一访问地址 '/api': { //apiTest是自行设置的请求前缀,按照这个来匹配请求,有这个字段的请求,就会进到代理来 target: 'https://api.apiopen.top/', // 需要代理的域名 changeOrigin: true, // 是否跨域 rewrite: (path) => path.replace(/^\/api/, ""), //重写匹配的字段,如果不需要放在请求路径上,可以重写为"" }, //第二访问地址,以此类推可写多个 '/api2': { //apiTest是自行设置的请求前缀,按照这个来匹配请求,有这个字段的请求,就会进到代理来 target: 'http://localhost:8080', // 需要代理的域名 changeOrigin: true, // 是否跨域 rewrite: (path) => path.replace(/^\/api2/, ""), //重写匹配的字段,如果不需要放在请求路径上,可以重写为"" } } }
路径重新定向
import { fileURLToPath, URL } from 'node:url'
resolve: { alias: { //路径重定向 '@': fileURLToPath(new URL('./src', import.meta.url)) } }
六、使用请求
<script setup> import { onMounted, reactive, toRefs } from 'vue' //引入请求方法 import { reqSentences, reqUserinfo } from "@/api"; const data = reactive({ sentences: {} }) //使用方法 const getuplist = async () => { await reqSentences().then((res) => { if (res.code == "200") { data.sentences = res.result } else { ElMessage.error("请求数据失败"); } }); } const getuserinfo = async () => { await reqUserinfo().then((res) => { if (res.code == "200") { console.log(res) } else { ElMessage.error("请求数据失败"); } }); } const { sentences } = toRefs(data) onMounted(() => { getuplist() getuserinfo() }) </script>