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

一、Axios

1、Axios封装(request.js)
javascript 复制代码
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)
javascript 复制代码
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)
javascript 复制代码
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)
javascript 复制代码
<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>
相关推荐
ggdpzhk1 分钟前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
活宝小娜4 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点5 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow5 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
刚刚好ā6 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年7 小时前
react中useMemo的使用场景
前端·react.js·前端框架
会发光的猪。8 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客8 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js
红绿鲤鱼8 小时前
React-自定义Hook与逻辑共享
前端·react.js·前端框架
周全全8 小时前
Spring Boot + Vue 基于 RSA 的用户身份认证加密机制实现
java·vue.js·spring boot·安全·php