前言

前期回顾

vite + vue3 + ts配置《企业级项目》二次封装el-table、分页_0.活在风浪里的博客-CSDN博客封装的功能有哪些？分页、表格排序、文字居中、溢出隐藏、操作列、开关、宽、最小宽、type类型（selection/index/expand）、格式化、不同页面不同操作列、vuex、vue持久化插件、（此处没有接口所以用到，还涉及了query与params传值区别）子组件说思路：data数据请求接口拿到，表头数据一般也是后台接口，如没，前台可自定义自己写......https://blog.csdn.net/m0_57904695/article/details/125613767?spm=1001.2014.3001.5501

前言

我要实现什么效果？

代码简单吗？

念及此

一、封装axiso前先配置环境变量

第一步：配置环境变量

第二步：封装axios

二：封装loading

loading.vue

index.ts

在main.ts引入index.ts

三：封装返回顶部

MyBackTop.vue

index.ts

在main.ts引入index.ts

结语

我要实现什么效果？

全局封装一次！
项目中切换路由显示loading，
发起axios显示loading,
每个页面显示返回顶部

代码简单吗？

极简

念及此

正文开始

一、封装axiso前先配置环境变量

因为真实项目中需要不同环境测试的

第一步：配置环境变量

在根目录新建三个文件

.env.development

 NODE_ENV='development'

.env.production

  NODE_ENV='production'

.env.staging

NODE_ENV='production'

完成！

第二步：封装axios

在src下新建newwork文件夹并在里面新建4个文件

解释：

api.js 封装的是api接口，在项目中大量用到接口不能分散写在各处、不易维护
baseUrl.s 匹配环境变量比如开发环境则使用线上接口，生产环境则使用生产接口
http.js 创建axiso实例写入请求拦截响应拦截
request.js 封装的是请求方法，在项目中大量用到接口，所以将请求方法也封装

正文：

一：先写baseUrl.js 匹配环境变量

let baseURL = "";
if (process.env.NODE_ENV === "development") {// 开发环境  因为我这里写了配置跨域的重定路径所以是api 如下图baseURL = "/api";} else if (process.env.NODE_ENV === "production") {// 正式环境 真正的上线网址 不是跨域别名路径,在network不显示baseURL = "";
} else {// 测试环境baseURL = "";
}
export default baseURL;

二：网址配好后写 http.js 创建axiso实例

import axios from "axios";
// 导入element-ElMessage 弹框
// import { ElMessage } from "element-plus";
// 导入配置的环境变量url
import baseURL from "./baseURL";
// 导入路由，没有this，使用路由实例跳转
import router from "../route/router.ts";
// 导入main全局配置文件
import app from "../../src/main";
// 开启loading
app.config.globalProperties.$loading.showLoading();
// 创建axios实例
const http = axios.create({baseURL, //配置了跨域,起了别名api,在baseBUL用了别名,这里使用baseURL,配置在下面vue.config.jstimeout: 6000,withDirectives: true, // 是否携带cookies
});
// 请求拦截
http.interceptors.request.use((config) => {// 在请求发送之前做一些处理 config是axios的配置对象// console.log(config);//  携带tokenconfig.headers["Authorization"] ="Bearer " + JSON.parse(localStorage.getItem("remember_token")) || null;// 配置完成将config返回return config;},(err) => {// 当请求失败时做一些处理 抛出错误throw new Error(err);}
);// 响应拦截
http.interceptors.response.use((res) => {// 在返回响应之前做一些处理 res是axios的配置对象// console.log(res);// 关闭loadingapp.config.globalProperties.$loading.hideLoading();// 根据后台状态码统一封装提示信息 就不需要在页面接口在单独写了// 这里根据实际接口的嵌套情况和状态码来写 这里只是我的接口嵌套情况let { status, msg } = res.data.meta;//key = value  status等于200就执行200下的代码 执行完break退出循环switch (status) {case 200:ElMessage({showClose: true,message: msg,type: "success",});break;case 401:ElMessage({showClose: true,message: "未授权",type: "error",});// console.log(this);// this是undefined所以引入路由;router.push("/login"); //未授权跳转到loginbreak;}// 这里根据接口返回的数据嵌套结构来返回 比如我的接口返回的是{data:{message:{}}}return res.data.message;},(err) => {// 当响应失败时做一些处理 抛出错误throw new Error(err);}
);
// 导出 http实例 方便调用
export default http;

三：请求封装好了封装请求方法 request.js

import http from "./http";
// post请求: 传参数没有明确规定使用params接受参数就是要使用data请求体接受,get请求要使用params接受
// put 也相当与post请求,如果报参数错误,就是接受参数的请求体错了post/put用data,get请求用params
function request({ method = 'get', url, data = {}, params = {} }) {return http({method,url,data,params})
}export default request;

四：请求方法好了封装api.js

// 导入请求的方法// 不使用箭头函数
// export function home() {
//     return request({ url: '/home', })
// }import request from "./request";
// 用户登陆的接口  post请求使用data请求体 默认封装的get 如果是get请求不需要写methiodexport const login = (data) => request({ method: "post", url: '/login', data: data });// 获取用户列表的接口 ,需要有默认参数. pagenum: 1,pagesize: 10,,所以要接收,export const getUserList = (params) => request({ url: '/users', params });// put请求修改用户id users/:uId/state/:typeexport const getEdit = (data) => request({method: "put",data,url: "users/" + data.uid + "/state/" + data.type,})export const order = () => request({ url: "/home/floordata" });

二：封装loading

在src下的 components 新建俩个文件

loading.vue

<template><div id="loading" v-show="visible"><div class="circle"></div><br />疯狂加载中...</div>
</template><script>
import { defineComponent, ref } from "vue";
export default defineComponent({name: "Loading",setup() {// 控制组件的状态let visible = ref(false);// 显示组件let showLoading = () => {visible.value = true;};// 隐藏组件let hideLoading = () => {visible.value = false;};return { visible, showLoading, hideLoading };},
});
</script>
<style scoped>
#loading {width: 100%;height: 100%;display: flex;flex-direction: column;position: absolute;top: 0;left: 0;z-index: 999;display: flex;align-items: center;justify-content: center;
}
@keyframes loading {0% {transform: rotate(0);}50% {transform: rotate(160deg);}100% {transform: rotate(360deg);}
}
.circle {width: 45px;height: 45px;background-color: transparent;border-radius: 50%;border: 5px solid #528bee;border-left-color: #ccc;animation: loading 1s linear 1s infinite;
}
</style>

index.ts

(因为我是ts项目所以.ts)

import { createApp } from "vue";
// 导入写好的Loading.vue文件
import Loading from "./Loading.vue";
export default {loading: null,/*    每当这个插件被添加到应用程序中时，如果它是一个对象，就会调用 install 方法。如果它是一个 function，则函数本身将被调用。在这两种情况下——它都会收到两个参数：由 Vue 的 createApp 生成的 app 对象和用户传入的选项。 */install(app) {if (this.loading) {// 防止多次载入app.config.globalProperties.$loading = this.loading;return;}// 创建Loading实例，用于挂载let instance = createApp(Loading);// 创建div元素装载Loading对象let div = document.createElement("div");let body = document.body;// 导入body中body.appendChild(div);this.loading = instance.mount(div);// 挂载vue身上app.config.globalProperties.$loading = this.loading;},
};

在main.ts引入index.ts

// 自定义loading组件
import Loading from "./components/MyLoading/index.ts";app.use(Loading);export default app; // 这里导出app的目的，是为了在后面演示js文件中使用插件

封装完成，现在在请求拦截前和路由跳转前开启一下全局生效

http.js

router.ts

router.beforeEach((to, from, next) => {if (to.meta.loading) {app.config.globalProperties.$loading.showLoading();next();} else {next();}
});
router.afterEach((to, from) => {if (to.meta.loading) {app.config.globalProperties.$loading.hideLoading();}
});

封装请求loading完成

三：封装返回顶部

在src 的components 下新建俩个文件

MyBackTop.vue

<template><el-backtopstyle="width: 60px; height: 60px":bottom="50":visibility-height="1000"/>
</template>

index.ts

import { createApp } from "vue";
import BackTop from "./MyBackTop.vue";
export default {BackTop: null,install(app) {if (this.BackTop) {app.config.globalProperties.$BackTop = this.BackTop;return;}let instance = createApp(BackTop);let div = document.createElement("div");let body = document.body;body.appendChild(div);this.BackTop = instance.mount(div);app.config.globalProperties.$BackTop = this.BackTop;},
};

在main.ts引入index.ts

// 自定义回到顶部组件
import BackTop from "./components/MyBackTop/index.ts"app.use(BackTop);export default app; // 这里导出app的目的，是为了在后面演示js文件中使用插件

结语

目前为止我们实现了 axios封装 loading 封装返回顶部封装！本人亲测保证能用

最后祝大家2022越来越强

vite + vue3 + 封装axios + 封装loading + 封装返回顶部相关推荐

vue3（vite）设置代理，封装axios，api解耦
一.设置代理打开根目录下的vite.config.js文件,设置代理 import { defineConfig } from 'vite' import vue from '@vitejs/plu ...
vue3+vite+ts 封装axios踩坑记录
注意注意注意!!踩坑记录非教程示例,别跟着我进坑里,太胖我可能捞不起来(ÒωÓױ). 安装axios:npm install axios src文件夹下创建api和utils文件夹,utils里创建r ...
Vue-vben-admin Vue3+TS Axios的封装源码分析
Vue-vben-admin Vue3+TS Axios的封装源码分析前言一.近期再用Vue3+TS 重构之前Vue2的项目,因此想着借鉴一下业界较为优秀的代码,在Git上面找了好久,经过同事推荐 ...
使用TS+vue3封装axios时编译报错，提示You may need an additional loader to handle the result of these loaders.
基于vue3+TS构建的商城后台管理系统根据coderwhy老师指导搭建的项目为PC端商品后台管理系统. 报错: 使用TS+vue3封装axios时编译报错,提示You may need an ad ...
Vue3+TypeScript 项目封装axios
Vue3+TypeScript 项目封装axios VUE CLI 中代码目录解构 config.js let BASE_URL = '' const TIME_OUT = 10000 //区分环境不 ...
同时多个axios请求_用 React+Antd 封装 Axios 实现全局 Loading 效果
前言今天在做 react 后台管理的时候要实现一个全局 Loading 效果,通常使用 axios 库与后端进行数据交互.为了更好的用户体验,在每次请求前添加一个加载效果,让用户知道在等待加载. 要 ...
封装axios加载动画Loding——vuex+axios拦截器
封装axios加载动画Loding--vuex+axios拦截器前言:我们在axios发送请求时候,会存在请求等待时长,我们一般会加一个动画,如果很多个时候一个一个的加动画代码看起来很臃肿很冗余,我 ...
axios队列 vue_(十三 )Vue 封装axios(四种请求)及相关介绍
Vue 封装axios(四种请求)及相关介绍首先axios是基于promise的http库 promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的 ...
axios基础和封装
一.简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http ...

vite + vue3 + 封装axios + 封装loading + 封装返回顶部

前言

我要实现什么效果？

代码简单吗？

念及此

一、封装axiso前先配置环境变量

第一步：配置环境变量

第二步：封装axios

二：封装loading

loading.vue

index.ts

在main.ts引入index.ts

三：封装返回顶部

MyBackTop.vue

index.ts

在main.ts引入index.ts

结语

vite + vue3 + 封装axios + 封装loading + 封装返回顶部相关推荐

最新文章

热门文章

vite + vue3 + 封装axios + 封装loading + 封装返回顶部

前言

我要实现什么效果？

代码简单吗？

念及此

一、封装axiso前先配置环境变量

第一步： 配置环境变量

第二步：封装axios

二：封装loading

loading.vue

index.ts

在main.ts引入index.ts

三：封装返回顶部

MyBackTop.vue

index.ts

在main.ts引入index.ts

结语

vite + vue3 + 封装axios + 封装loading + 封装返回顶部相关推荐

最新文章

热门文章

第一步：配置环境变量