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>