如何的正確封裝請求和優雅的嵌入業務 (2)

2023年5月17日#前端 #封装 #axios105

AI 翻譯

這篇文章透過AI由簡體中文翻譯成繁體中文。查看原文

AI 生成的摘要

这段代码是关于在Vue3中实现稳定的嵌入业务的示例。它使用了vue-demi库中的ref和reactive函数，以及axios库中的AxiosRequestConfig类型。代码中定义了一个名为getPaging的函数，它接受一个AxiosRequestConfig类型的参数和一个泛型T的键值对。函数内部创建了一些响应式变量和方法，用于实现分页功能。其中，to方法用于跳转到指定页码，next方法用于跳转到下一页，base方法用于跳转到上一页。proxyRequest方法用于发送请求并处理返回的数据，将数据存储在一个Map对象中。如果返回的数据条数少于每页大小，即可视为到达底部。最后，返回了一些响应式变量和方法，供外部使用。

穩定的嵌入業務#

此處衔接上一篇文章

此處我們以 vue3 代碼為例

import { ref, reactive } from "vue-demi";
import request from "上一篇文章末尾";
import type { AxiosRequestConfig } from "axios";


/* 指定唯一鍵 */
function getPaging<T>(conf: AxiosRequestConfig, k: keyof T) {
  const listMap = reactive<Map<T[k], T>>(new Map());
  const pageNum = ref(0);
  const pageSize = ref(1);
  const finish = ref(false);
  const loading = ref(false);
  const to = async (current: number) => {
    if (finish.value) throw new Error("no more");
    pageNum.value = current;
    await proxyRequest()
  }
  const next = async () => {
    await to(pageNum.value + 1);
  }
  const base = async () => {
    await to(pageNum.value - 1);
  }
  async function proxyRequest() {
    try {
      loading.value = true
      const result = await request({
        ...conf,
        data: Object.assign(conf.data, {
          pageNum: pageNum.value,
          pageSize: pageSize.value
        })
      });
      result.data.forEach(e => {
        listMap.set(e[k], e)
      });
      /* 查詢的到的條數少於pageSize的大小即可視為到底了 */
      if (pageSize > result.data.length) finish.value = true;
    } catch (error) {
      console.error(error)
    } finish {
      loading.value = false
    }
  }
  proxyRequest()
  return {
    listMap,
    pageNum,
    pageSize,
    finish,
    loading
  }
}