房产中介管理软件第8课:通用request请求及loading
前端离不开请求,使用axios请求后端,设计了通用的request和loading
一、建立api.js文件用于存放接口路径
api.js存放所有的接口地址
const BASE_URL = process.env.VUE_APP_API_BASE_URL module.exports = { // 通用操作类 COMMON_SMS_SEND: `${BASE_URL}/Tool/SMS/Send`, COMMON_SMS_CHECK: `${BASE_URL}/Tool/SMS/Check`, // 实用工具 LOGIN_CAPTCHACODE_GET: `${BASE_URL}/Tool/CaptchaCode`, // 登录服务接口 LOGIN_RESETPASSWORD_CHECKNAME: `${BASE_URL}/Agent/ResetPassword/CheckName`, LOGIN_RESETPASSWORD_RESET: `${BASE_URL}/Agent/ResetPassword/Reset`, LOGIN: `${BASE_URL}/Login`, }
二、建立loading.js用于加载中和关闭加载的显示,代码来自于网上
/** * 全局loading效果:合并多次loading请求,避免重复请求 * 当调⽤⼀次showLoading,则次数+1;当次数为0时,则显⽰loading * 当调⽤⼀次hideLoading,则次数-1; 当次数为0时,则结束loading */ import { ElLoading } from "element-plus"; // 定义⼀个请求次数的变量,⽤来记录当前页⾯总共请求的次数 let loadingRequestCount = 0; // 初始化loading let loadingInstance; // 显⽰loading的函数并且记录请求次数 ++ const showLoading = (loadingtext) => { if (loadingRequestCount === 0) { // 全局实现loading效果,不⽤每个页⾯单独去v-loading // loading样式 loadingInstance = ElLoading.service({ lock: true, text: (loadingtext === undefined || loadingtext == '' ? '加载' : loadingtext) + "中……", background: 'rgba(0, 0, 0, 0.7)' }); } loadingRequestCount++; }; // 隐藏loading的函数,并且记录请求次数 -- const hideLoading = () => { if (loadingRequestCount <= 0) return; loadingRequestCount--; if (loadingRequestCount === 0) { loadingInstance.close(); } }; export { showLoading, hideLoading };
三、建立request.js用于通用的get和post请求
里面暂时缺少守卫代码和token鉴权代码,后期添加
/* 页面:数据请求类 */ import axios from 'axios' import { Array } from 'core-js' import { ElNotification } from 'element-plus' import { showLoading, hideLoading } from "@/utils/loading"; // 请求超时时间 axios.defaults.timeout = 50000 // 携带 cookie,对目前的项目没有什么作用,因为是 token 鉴权 axios.defaults.withCredentials = true; // 默认 post 请求,使用 application/json 形式 axios.defaults.headers.post["Content-Type"] = "application/json"; // http method const METHOD = { GET: 'get', POST: 'post' } /** * axios请求 * @param {*} vm 当前组件 * @param {*} title 请求标题 * @param {*} url 请求地址 * @param {*} method POST/GET * @param {*} params 请求参数 * @param {*} config 其他配置 * @returns */ async function request(vm, title, url, method, params, config) { // 检查Url是否正确 if (typeof (url) == "undefined") { ElNotification({ type: 'error', title: "请求失败", message: "请求地址不存在(" + url + ")!" }); return } // 判断参数是否字符串 if (typeof (params) == "undefined") params = null else { // 判断参数是否数组 if (params instanceof Array) url = format(url, params) else if ([params] instanceof Array) url = format(url, [params]) } if ((typeof (title) == "undefined") || (title == "")) title = "加载" if (title != "HIDE") { showLoading(title); } let tips = (title != 'HIDE' ? title : '加载'); let resp; if (method == METHOD.POST) resp = axios.post(url, params, config) else resp = axios.get(url, { params, ...config }) resp.then(res => { const result = res.data const retmessage = result.message const retcode = result.code; if (typeof (retcode) != "undefined") { if (retcode == 3001) ElNotification({ type: 'warning', title: title + "提示", message: retmessage }); else { if (retcode != 2000) ElNotification({ type: 'error', title: tips + "失败(" + retcode + ")", message: retmessage }); } } }) resp.catch(err => { const { response } = err if ((typeof (response) == "undefined") || (response.status != 401)) ElNotification({ type: 'error', title: tips + "失败", message: err.toString() == "Error: Network Error" ? "网络不可用或服务器未开启" : err.toString() }); }) resp.finally(() => { if (title != "HIDE") { //此处采⽤延时处理是合并loading请求效果,避免多次请求loading关闭⼜开启 setTimeout(() => { hideLoading(); }, 200); } }) return resp } /** * 格式化字符串 * @param obj * @returns */ function format(url, args) { if (!url || !args) return url return url.replace(/{(\d+)}/g, function (match, number) { return typeof args[number] !== 'undefined' ? args[number] : match }) } /** * GET 请求 * @param {*} vm * @param {*} title * @param {*} url * @param {*} params * @returns */ async function httpGet(vm, title, url, params, config) { return request(vm, title, url, METHOD.GET, params, config) } /** * POST 请求 * @param {*} vm * @param {*} title * @param {*} url * @param {*} params * @returns */ async function httpPost(vm, title, url, params, config) { return request(vm, title, url, METHOD.POST, params, config) } export { METHOD, request, httpGet, httpPost }
四、在main.js文件中把方法开放为全局方法
import {httpGet, httpPost} from '@/utils/request' //全局方法 app.config.globalProperties.$httpGet = httpGet; app.config.globalProperties.$httpPost = httpPost;
五、方法调用演示
// 加载数据 this.$httpPost(this,'重置',this.$API.LOGIN_RESETPASSWORD_RESET,restPasswordData).then(res => { if (res.data.code != 2000) { return; } this.$success("密码重置成功,您可以使用新密码登录了"); this.closeDialog(); })
(本文完)