vue-utils-sixfat v0.0.1

简介

EventBus {docsify-ignore}

• 介绍： 事件监听与分发
• 不支持链式调用

引用

import { EventBus } from "@sweet-front/web-sdk"

使用示例

/* page1.js */
// 监听aaa事件
EventBus.$on("aaa", "key1", (e) => {
  console.log(e, "1") // 不打印，因为有两个key1，最后一个 key1 会覆盖此处监听
})
EventBus.$on("aaa", "key1", (e) => {
  console.log(e, "2") // 打印 anyData 2
})
EventBus.$on("aaa", "key2", (e) => {
  console.log(e, "3") // 打印 anyData 3
})

/* page2.js */
// 触发aaa事件
EventBus.$emit("aaa", anyData)

// 取消aaa事件的监听
EventBus.$off("aaa")
// 取消所有事件的监听
EventBus.$off()

方法介绍

Request {docsify-ignore}

• 介绍： 基于 axios 接口请求的封装，支持请求拦截和响应拦截，可以统一配置请求头，统一处理返回结果，统一增加请求中状态效果，支持接口防抖节流操作
• 实例对象部分方法支持链式调用

引用

import { Request } from "@sweet-front/web-sdk"

使用示例

初始化，配置请求拦截等处理，如：

import { Loading, Message } from "element-ui"
import { Request } from "@sweet-front/web-sdk"
Request.init({
  // 设置请求前缀
  baseUrl: "",
  // 设置请求超时时长
  timeout: 30000,
  // 拦截请求，比如所有请求头增加token
  handelRequestSync: (config) => {
    config.headers.token = "1234567890"
    return config
  },
  // 拦截响应，如接口结构code: 'success'的返回接口的data，走 then 方法，其他的throw整体信息，走 catch 方法
  handelResponseSync: (res) => {
    if (res.data.code === "success") {
      return res.data.data
    } else {
      throw res.data
    }
  },
  // 异常处理，如异常返回弹出错误信息
  handelErrorSync: (error, config) => {
    Message.error(error.message)
  },
  // 加载中处理，根据ui效果
  handelLoadStartSync() {
    return Loading.service({ text: "请求中" })
  },
  // 加载结束后的处理，如关闭加载中效果
  handelLoadEndSync(loading) {
    loading.close()
  },
})

执行请求

import { Request } from "@sweet-front/web-sdk"
export default {
  data() {
    return {
      aaa: {},
      bbb: {},
    }
  },
  mounted() {
    Request.init()
    this.aaa = Request.create() // 创建请求实例
    this.bbb = Request.create() // 创建请求实例

    // this.aaa.loading 默认 false,  开始请求后 loading 为 true, 请求完成 loading 为 false
    this.aaa
      .get(`/test/node/v1/devices1`)
      .query({ a: 1, b: 1 }) // get请求参数
      .serSilenceError() // 异常结构不处理
      .calm() // 执行静默请求
      .do() // 开始请求
      .then((res) => {
        console.log("a", res)
      })
      .catch((err) => {
        console.log(err)
      })

    this.bbb
      .get(`/test/node/v1/devices2`)
      .query({ c: 1, d: 1 })
      .do()
      .then((res) => {
        console.log("b", res)
      })

    // 如果不需要请求实例，建议封装实例返回，如：
    const http = () => {
      return Request.create()
    }
    http()
      .get(`/test/node/v1/devices1`)
      .query({ a: 1, b: 1 }) // get请求参数
      .serSilenceError() // 异常结构不处理
      .calm() // 执行静默请求
      .do() // 开始请求
      .then((res) => {
        console.log("a", res)
      })
      .catch((err) => {
        console.log(err)
      })
  },
}

中止请求

import { Request } from "@sweet-front/web-sdk"
export default {
  data() {
    return {
      aaa: {},
    }
  },
  mounted() {
    Request.init()
    this.aaa = Request.create() // 创建请求实例

    // this.aaa.loading 默认 false,  开始请求后 loading 为 true, 请求完成 loading 为 false
    this.aaa
      .get(`/test/node/v1/devices1`)
      .query({ a: 1, b: 1 }) // get请求参数
      .serSilenceError() // 异常结构不处理
      .calm() // 执行静默请求
      .do() // 开始请求
      .then((res) => {
        console.log("a", res)
      })
      .catch((err) => {
        console.log(err)
      })

    // /test/node/v1/devices1未返回前可中止，返回后执行此方法没有任何效果
    // 中止信息可自定义
    this.aaa.getSource().cancel("中止信息")
  },
}

静态方法

初始化参数

静态方法 Requset.init() 参数 Option 介绍

实例方法

实例 const xhr = Request.create() , xhr 的方法

Event {docsify-ignore}

• 介绍： 长连接通用方法库
• 实例部分方法支持链式调用

引用

import { WebSocket } from "@sweet-front/web-sdk"

使用示例

// 创建实例
let socket = new WebSocket()
socket.init({
  socketUrl: `ws://localhost:9988/ws?og=123`,
  autoCloseTime: 1000, // Number，无消息推送自动关闭长连接的时间(毫秒)，0 不开启自动关闭
  heartTime: 3000, // Number，心跳时间(毫秒)，0 不开启心跳
  heartData: { action: "do" }, // Any, 心跳发送的数据
  reconnectTime: 0, // Number，连接失败时重连次数
  historyList: [111, 1111], // Array，消息历史
  isReverse: true, // Booble, 消息是否倒序
  messageCb: (data) => {}, // Function，接收消息的回调方法
  consoleOut: true, // Booble，控制台是否输出
})
// 重置连接次数并重连
socket.resetConTimes().reconnect()
// 重置连接次数
socket.resetConTimes()
// 重连
socket.reconnect()
// 断开长连接
socket.close()
// 开始心跳
socket.heartStart({time: 5000})
// 关闭心跳
socket.heartEnd()
// 获取连接状态
socket.getWsStatus()
// 获取历史
socket.getHistory()

实例方法

初始化参数

Utils {docsify-ignore}

• 介绍： 定义函数的节流、防抖、请求中事件。
• 不支持链式调用

引用

import { Utils } from "@sweet-front/web-sdk"

使用示例

// 3 秒内只能执行一次打印
Utils.throttle({ delay: 3000 }).then((res) => {
  console.log(1111)
})

// 3 秒内没有第二次操作才执行一次打印
Utils.debounce({ delay: 3000 }).then((res) => {
  console.log(1111)
})

Utils.firstToUpperSync("abc") // Abc

Utils.monthLastDateSync(2) // 28

Utils.getParamStrSync('https://www.baidu.com', { name: 'echo', age: 16 } // https://www.baidu.com?name=echo&age=1

Utils.getUrlOaramSync('name', 'https://www.baidu.com?name=echo&age=1') // echo

Utils.randomStringSync(10) // TfbP8DRXbF

let obj = { a: 1 }
let n1 = obj
let n2 = Utils.deepCloneSync(obj) // {a: 1}
console.log(n1 === obj, n2 === obj) // true false

Utils.filterQueryDataSync({ a: 1, b: 2, c: 3 }, 'a')) // {a: 1}
Utils.filterQueryDataSync({ a: 1, b: 2, c: 3 }, ['a', 'b']) // {a: 1, b: 2}

Utils.turnStringSync('nameCode', 's') // name_code

Utils.turnObjectSync({ nameCode: 'an', parentId: 12 }, 's', ['parentId']) // {name_code: 'an', parentId: 12}

方法介绍