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>
相关推荐
别拿曾经看以后~20 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
小牛itbull3 小时前
ReactPress:重塑内容管理的未来
react.js·github·reactpress
Devil枫7 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
GIS程序媛—椰子8 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
毕业设计制作和分享9 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果9 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄9 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰10 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
薛一半12 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js