✨✨个人主页:沫洺的主页
📚📚系列专栏: 📖 JavaWeb专栏📖 JavaSE专栏 📖 Java基础专栏📖vue3专栏
📖MyBatis专栏📖Spring专栏📖SpringMVC专栏📖SpringBoot专栏
📖Docker专栏📖Reids专栏📖MQ专栏📖SpringCloud专栏
💖💖如果文章对你有所帮助请留下三连✨✨
📅标题
🎈axios中文网:axios API中文文档
🎃安装
🎈npm install axios
🎃统一封装类,新建src/http/index.ts
import axios, { AxiosRequestConfig, AxiosRequestHeaders, AxiosResponse, } from "axios"; //弹窗图标和加载图标 import { ElMessage, ElLoading } from "element-plus"; //返回数据规则 interface IResponseData<T> { status: number; message?: string; data: T; code: string; } //默认配置,封装了一个实例对象 const config = { baseURL: "", timeout: 30 * 1000, withCredentials: true, }; let loading: any = null; //类似定义一个类 class Http { axiosInstance; //定义了一个axiosInstance属性,未来它放的是一个axios实例 constructor(config: any) { //实例化请求配置 this.axiosInstance = axios.create(config); // 添加请求拦截器 this.axiosInstance.interceptors.request.use(function (config) { //在发送请求之前做些什么 //弄了一个加载的过度 loading = ElLoading.service({ lock: true, text: '加载中...', background: 'rgba(0, 0, 0, 0.7)', //覆盖整个屏幕 fullscreen: true }) return config; }, function (error) { loading.close(); // 对请求错误做些什么 return Promise.reject(error); }); // 添加响应拦截器 this.axiosInstance.interceptors.response.use(function (response) { // 对响应数据做点什么 loading.close(); let apiData = response.data; console.log(apiData) console.log(apiData.data) //将apiData的属性取出来 const { code, message, data } = apiData; //取出来之后处理属性 if (code === undefined) { return apiData; }else if (code === 0) { return data; }else { ElMessage.error(message) } return apiData.data; }, function (error) { // 对响应错误做点什么 loading.close(); return Promise.reject(error); }); } get<T>(url: string, params?: object, data = {}): Promise<IResponseData<T>> { return this.axiosInstance.get(url, { params, ...data }); } post<T>(url: string, params?: object, data = {}): Promise<IResponseData<T>> { return this.axiosInstance.post(url, params, data); } put<T>(url: string, params?: object, data = {}): Promise<IResponseData<T>> { return this.axiosInstance.put(url, params, data); } } //类似new了一个实例 export default new Http(config);
🎃FastMock模拟接口
🎈网址: FastMock
注册账号,登录添加测试接口
🎈进入项目,添加接口
🎃Proxy配置
🎈在vite.config.ts 文件中
proxy: { "/api": { target: "https://www.fastmock.site/mock/97c4bc10d4f77d8b92565affb090058c/", changeOrigin: true, }, },
🎃使用axios异步请求
<template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="id" label="编号"> </el-table-column> <el-table-column prop="name" label="商品名称"> </el-table-column> <el-table-column prop="price" label="商品价格"> </el-table-column> </el-table> </template> <script setup lang="ts"> import {ref,onMounted} from 'vue' import http from "@/http/index" //定义tableData const tableData:any = ref([]) onMounted(()=>{ http.get("/api/poduct/list", {name:"moming"}).then((data) => { tableData.value=data }).catch((error) => { console.log("error") }) }) </script>
💦 效果图
🎃代码优化说明
🎈这里的加载就是效果图一
🎈加载时长设置
🎈 代码优化
🎈 在src下api/productApi.ts文件,用来存放接口
🎈productApi.ts
import http from "@/http/index" //抽取方法 const productApi = { select: { name: "商品查询", url: "/api/poduct/list", // async 异步方法 await 等待 call: async function (params: any) { return await http.get(this.url, params); } }, insert: { }, update: { }, } //导出,类似于public公用 export default productApi;
🎈List.vue
<template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="id" label="编号"> </el-table-column> <el-table-column prop="name" label="商品名称"> </el-table-column> <el-table-column prop="price" label="商品价格"> </el-table-column> </el-table> </template> <script setup lang="ts"> import { ref, onMounted } from 'vue' //导入productApi import productApi from '@/api/productApi' //定义tableData const tableData: any = ref([]) onMounted(() => { callApi(); }) const callApi = () => { //因为在http/index.ts中对响应的数据已经处理过了,所以直接写data见名知意 productApi.select.call({}).then((data) => { //给tableData赋值 tableData.value = data }) } </script>
💦报错效果图
🎈模拟异常报错
🎈图中的消息提示框就是上面说明中的ElMessage.error(message),使用的是Element中的Feedback反馈组件中的Message消息提示