【Vue3+ts 】 封装字典列表接口调用

最近在写Vue3 后台管理系统，有一个场景是在新增或者编辑的时候需要一次性获得这几个字典的数据，于是字典接口封装 应运而生：

拿到的数据结构大概是这样的：

第一步：创建useFormAjax.ts 文件，封装getListByDicCode 函数

export async function getListByDicCode(dicId: string, data: any): Promise<void> {
  if (!dicId || !dicId.trim() || dicId === '-') {
    return
  }
  try {
    const res = await apiDictionaryItem({
      orderList: [{
        columnName: "orderId",
        asc: true
      }],
      queryInfo: {
        dictionaryId: dicId,
        recordStatus: "ENABLED"
      },
      pageSize: 0
    })
    if (String(res.code) === '200') {
        data = res.data.dataItem
      }
    }
  } catch (error) {
      data = []
    }
  }
}

但是如果上面的形参 data 是个函数呢，或者是个Ref / Reactive 类型的数据呢，于是需要在进行下判断，同时还给对应的字典数据缓存到sessionStorage 里面，如果已经有这个字典数据，则不用再次请求。 由此：

export async function getListByDicCode(dicId: string, data: any): Promise<void> {
  if (!dicId || !dicId.trim() || dicId === '-') {
    return
  }
  try {
    const res = await apiDictionaryItem({
      orderList: [{
        columnName: "orderId",
        asc: true
      }],
      queryInfo: {
        dictionaryId: dicId,
        recordStatus: "ENABLED"
      },
      pageSize: 0
    })
    if (String(res.code) === '200') {
      if (isRef(data)) {
      // 判断是 ref 类型的数据
        data.value = res.data.dataItem
      } else if (typeof data === 'function') {
       // 如果是函数
        data(res.data.dataItem || [])
      } else {
        data = res.data.dataItem
      }
      setSessionStorage(`dic${dicId}`, res.data.dataItem)
    }
  } catch (error) {
    if (isRef(data)) {
   // 判断是 ref 类型的数据
      data.value = []
    } else if (typeof data === 'function') {
    // 如果是函数
      data([])
    } else {
      data = []
    }
  }
}

第二步：在页面上使用

// 字典数据结构
let awardDic: IAwardDicInfo = {
  encourageFreqId: { dic: dictionaryCode.ENCOURAGE_FREQUENCY.code, arr: [] },
  encourageRangeId: { dic: dictionaryCode.ENCOURAGE_RANGE.code, arr: [] },
  encourageLevelId: { dic: dictionaryCode.ENCOURAGE_LEVEL_TYPE.code, arr: [] },
  encourageTypeId: { dic: dictionaryCode.ENCOURAGE_PUNISH_TYPE.code, arr: [] }
}

onMounted(() => {
  const values = Object.values(awardDic)
  values.forEach((dicObj: IDic) => {
    // 通过getSessionStorage 函数 获取 对应的 字典数据
  
  const casDataArr = getSessionStorage(`dic${dicObj.dic}`)
    if (!casDataArr?.length) {
    // 引用刚刚封装的函数
      getListByDicCode(dicObj.dic, (data: any[]) => {
        dicObj.arr = data
      })
    } else {
      dicObj.arr = casDataArr
    }
  })
})

可能有小伙伴会好奇 setSessionStorage 和 getSessionStorage 是什么？

这也是我封装的一个函数啦~~~

const getSessionStorage=(data:string):any=>{
    return JSON.parse(sessionStorage.getItem(data) as string)
}

const setSessionStorage=(key:string,value:any):void=>{
    sessionStorage.setItem(key,JSON.stringify(value))
}

const removeSessionStorage=(key:string):void=>{
    sessionStorage.removeItem(key)
}

export{
    getSessionStorage,
    setSessionStorage,
    removeSessionStorage
}

至此，一个请求字典的接口就封装完成了。

完结，撒花~~~