React/Vue项目-请求文件封装(Axios,WebSocket)

一、Axios

1、Axios封装(request.js)
import axios from "axios";// 开发环境配置
const baseURL = "/api";// 生产环境配置
// const baseURL = 'http://192.168.0.1:9000'// 创建axios实例
const http = axios.create({baseURL: baseURL,timeout: 5000, // 超时时间
});// 设置默认请求数据格式
http.defaults.headers.post["Content-Type"] = "application/json;charset=utf-8";// 请求拦截
http.interceptors.request.use((request) => {return request;},(error) => {return error;}
);// 响应拦截
http.interceptors.response.use((response) => {return response.data;},(error) => {return error;}
);export default http;

2、示例(api.js)
import http from './request'// get请求(params = {})
function getRequest(params) {return http.get(`/api?user=${params.user}&passwd=${params.passwd}`)
}// post请求(params = {})
function postRequest(params) {return http.post('/api', params)
}// put请求(params = {})
function putRequest(params) {return http.put('/api', params)
}// delete请求(params = {})
function deleteRequest(params) {return http.delete('/api', {data:params})
}export default {getRequest,postRequest,putRequest,deleteRequest
}

二、WebSocket

1、Ws封装(WebSocket.js)
let ws = null;
let _data = null;
let _url = null;
let _callback = null;
let hearBeatTimer = null;
let reconnectTimer = null;
let reconnectNum = 0; // 重连次数
const time = 3000; // 心跳间隔
const reconnectTime = 5000; // 重连超时// 初始化
export function webSocket(url = "", data = "", callback = () => { }) {_url = url; // 地址_data = data; // 发送消息_callback = callback; // 回调函数,利用闭包createWebSocket(); // 创建 webSocket
}// 获取连接
export function getWebSocket() {return ws;
}// 创建连接
function createWebSocket() {if (!_url) return;if (ws) {ws.close();ws = null;}ws = new WebSocket(_url);ws.onopen = function () {sendMessage();heartBeat();};ws.onmessage = function (e) {if (typeof _callback === "function") {_callback(e);}reconnectNum = 0;heartBeat();};ws.onerror = function () {// console.log('链接失败,正在重连');reconnect();};ws.onclose = function () {reconnect();};
}// 关闭连接
export function closeWebSocket() {if (ws) {ws.onerror = () => { };ws.onclose = () => { };ws.close();}ws = null;_data = null;_url = null;_callback = () => { };hearBeatTimer = null;reconnectTimer = null;
}// 心跳检测
function heartBeat() {if (hearBeatTimer) {clearTimeout(hearBeatTimer);}hearBeatTimer = setTimeout(() => {// console.log("ws连接状态:", ws.readyState);if (ws && ws.readyState < 2) {// 如果连接正常sendMessage();} else {reconnect();}}, time);
}// 发送消息
function sendMessage() {if (!ws) return;switch (Object.prototype.toString.call(_data)) {case "[object Object]":ws.send(JSON.stringify(_data));break;case "[object String]":ws.send(_data);}
}// 重连尝试
function reconnect() {if (reconnectTimer) {clearTimeout(reconnectTimer);}reconnectTimer = setTimeout(() => {reconnectNum++;webSocket(_url, _data, _callback);}, reconnectTime);
}

2、示例(Home.vue)
<template><div class="home"></div>
</template><script>
// webSocket
import { webSocket } from "@/utils/WebSocket";
export default {name: "",components: {},props: {},data() {return {};},computed: {},created() {},mounted() {this.initWs();},methods: {initWs() {webSocket("ws://192.168.0.1:9999/new", "", this.wsCallBack)},wsCallBack(data){console.log("webSocket数据", data)}},
};
</script><style lang="less" scoped>
.home {width: 100%;height: 100vh;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/31261.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Android】代码中将 SVG 图像转换颜色

要在代码中将 SVG 图像转换为黑色&#xff0c;你可以使用一个库&#xff0c;例如 AndroidSVG 或 SVG-Android。以下是一个简单的示例代码&#xff0c;展示了如何通过代码方式将 SVG 图像改为黑色&#xff1a; // 导入 AndroidSVG 库 import com.caverock.androidsvg.SVG; impo…

【docker】常用指令-表格整理

以下列出的指令是Docker中常用的命令&#xff0c;但并不是全部。Docker的指令非常丰富&#xff0c;可以根据具体的需求和场景选择合适的指令。同时&#xff0c;每个指令都有很多选项和参数可以使用&#xff0c;可以通过 docker COMMAND --help 来获取更详细的信息。 一、容器命…

LeetCode刷题之HOT100之LRU缓存

2024/6/21 酷暑难耐&#xff0c;离开空调我将不知道能否《活着》&#xff0c;昨天跑步感觉全身的热无法排出去&#xff0c;出门那种热浪一阵一阵打过来&#xff0c;一点风都舍不得给我。早早的来到实验室&#xff0c;也没多早&#xff0c;九点哈哈&#xff0c;做题啦&#xff0…

Python联动Mysql

首先配置pip源(不然在安装库的时候会很慢!!!) pip config set global.index-url https://mirrors.aliyun.com/pypi/simple/安装必要库: mysql.connector MySQL 连接器/ODBC 是 MySQL ODBC 驱动程序&#xff08;以前称为 MyODBC 驱动程序&#xff09;系列的名称&#xff0c;它使…

智能返利系统:探索个性化推荐技术的架构之道

智能返利系统&#xff1a;探索个性化推荐技术的架构之道 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 在当今的电子商务世界中&#xff0c;购物返利系统已经…

光大证券-放量恰是入市时:成交量择时初探

核心算法 1. 在熊市中&#xff0c;各成交量时序排名出现的频次基本随排名变小而单调增大&#xff1b;在牛市中&#xff0c;各成交量时序排名出现的频次基本随排名变小而单调减少&#xff1b;而在震荡市中&#xff0c;各成交量时序排名出现的频次两头大&#xff0c;中间小&…

SpringBoot3使用Swagger3

SpringBoot3使用Swagger3 项目中的后端接口进行简单的前端展示一、依赖引入二、快速启动1.在application.yml中配置2.或者properties文件,则配置3.启动项目访问swagger 三、使用注解标注接口Swagger配置文件Swagger 注解迁移举例五种常用ApiApiOperationApiImplicitParamApiMod…

企智汇:弱电智能化项目工程项目管理系统助力企业项目管理!

在当今数字化时代&#xff0c;弱电智能化项目的复杂性和挑战性日益增加&#xff0c;高效的项目管理变得尤为重要。企智汇弱电智能化项目工程项目管理系统凭借其业务流程化、流程数据化、数据可视化、业财一体化及成本精细化等特性&#xff0c;为项目全生命周期管理提供了全面而…

MacOS设备远程登录配置结合内网穿透实现异地ssh远程连接

文章目录 前言1. MacOS打开远程登录2. 局域网内测试ssh远程3. 公网ssh远程连接MacOS3.1 MacOS安装配置cpolar3.2 获取ssh隧道公网地址3.3 测试公网ssh远程连接MacOS 4. 配置公网固定TCP地址4.1 保留一个固定TCP端口地址4.2 配置固定TCP端口地址 5. 使用固定TCP端口地址ssh远程 …

打造卓越团队:领导以身作则的五大要点

喊破嗓子&#xff0c;不如做出样子。 领导者的命令是否能得到有效执行取决于下属是否接受&#xff0c;而下属是否接受命令很大程度上要看领导的榜样作用。如果领导都做不到&#xff0c;下属也会”上梁不正下梁歪”&#xff0c;所以领导要求下属做到的事,自己首先做到。 领导要…

AI写作如何助力大学生完成毕业论文?

近年来&#xff0c;随着科技的快速发展&#xff0c;AI已经逐渐渗透到了生活中的方方面面&#xff0c;其中也包含着学术领域。 作为学生党&#xff0c;你是否还在为期末论文&#xff0c;大学生实践报告而发愁&#xff1f; 有了这些AI写作神器&#xff0c;大学生们再也不用在期…

【Python高级编程】 综合练习-使用OpenCV 进行视频数据处理

综合练习 读取一个视频文件&#xff0c;对其进行处理后保存为一个新的视频文件。具体的处理步骤包括调整帧大小、转换为灰度图像、垂直翻转画面以及添加高斯噪声。 下面是代码的详细实现&#xff1a; import cv2 import numpy as np# 定义一个函数&#xff0c;用来给图像添加…

使用Server-Sent Events (SSE),并获取message里面的内容

什么是Server-Sent Events (SSE)? Server-Sent Events (SSE)是一种服务器推送技术&#xff0c;允许服务器向客户端&#xff08;浏览器&#xff09;发送实时消息。与WebSocket不同&#xff0c;SSE是单向通信&#xff0c;只能从服务器到客户端。SSE在HTML5中作为标准实现&#…

windows系统停止更新办法

windows系统停止更新 双击启动下载的文件 然后再回到系统-更新这里&#xff0c;选择日期就行。

C语言之链表以及单链表的实现

一&#xff1a;链表的引入 1&#xff1a;从数组的缺陷说起 &#xff08;1&#xff09;数组有两个缺陷。一个是数组中所有元素类型必须一致&#xff0c;第二是数组的元素个数必须事先指定并且一旦指定后不能更改 &#xff08;2&#xff09;如何解决数组的两个缺陷&#xff1a;数…

c++ 正则匹配得使用

标头&#xff1a;#include <regex> 相关函数&#xff1a; regex_match regex_replace regex_search 名称描述regex_match测试正则表达式是否与整个目标字符串相完全匹配。regex_replace替换匹配正则表达式。regex_search搜索正则表达式匹配项。 1. regex_search 成功搜…

『FPGA通信接口』LVDS接口(2)硬件设计

文章目录 1.LVDS原理2.xilinx器件对于LVDS的支持3.LVDS信号PCB布线要求4.传送门 1.LVDS原理 如上图所LVDS的工作原理示意图&#xff0c;其Driver驱动器由一个恒流源是LVDS发送端&#xff08;通常为 3.5mA&#xff09;驱动一对差分信号线组成。驱动状态会翻转就产生正负电压的变…

【前端】Git 常用

文章目录 一、git 配置1.1 查看系统配置1.2 查看当前用户配置1.3 查看当前git用户名1.4 查看当前git邮箱1.5 查看当前仓库配置信息1.6 修改git用户名1.7 修改git邮箱 二、git 常用命令2.1 git init2.2 git clone2.3 git status2.4 git add2.5 git commit2.5 git log2.6 git pul…

“Docker入门指南:概念与安装详解“

目录 # 概念 1. Docker常见问题 2. docker概念和安装 2.1 Docker的组成 2.2 Docker 组件及关系表 2.3 docker核心思想 2.4 docker镜像与容器两个核心概念 2.5 容器概念图 2.6 docker核心技术 2.6.1 镜像 (Image) 概述 关系 示例 2.6.2 容器 (Container) 概述 关…

C# 控件-ComboBox

ComboBox 是一个下拉列表控件&#xff0c;它允许用户从预定义的选项中进行选择&#xff0c;或者输入自定义的文本。以下是如何理解和快速掌握 ComboBox 控件的几个关键点&#xff1a; 创建和初始化 ComboBox: ComboBox comboBox new ComboBox();添加项: 直接添加字符串项&a…