如何の正しいリクエストのカプセル化と優雅なビジネスの組み込み (2)

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

AI 翻訳

この記事はAIを通じて中国語から日本語に翻訳されました。原文を表示

AI が生成した要約

这段代码是关于在Vue3中实现稳定的嵌入业务的示例。它使用了Vue3的一些特性，如ref和reactive。代码中定义了一个函数getPaging，它接受一个AxiosRequestConfig对象和一个泛型T的键作为参数。函数内部创建了一些响应式变量和方法，用于处理分页请求。其中，to方法用于跳转到指定页码，next方法用于跳转到下一页，base方法用于跳转到上一页。proxyRequest方法用于发送请求并处理返回的数据，将数据存储在一个Map对象中。如果返回的数据条数少于pageSize，即可视为到底了。最后，返回了一些响应式变量，包括listMap、pageNum、pageSize、finish和loading。

安定した埋め込みビジネス#

ここでは、記事に接続します。

ここでは、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)
      });
      /* ページサイズよりも少ない数のデータが取得された場合、終了と見なす */
      if (pageSize > result.data.length) finish.value = true;
    } catch (error) {
      console.error(error)
    } finish {
      loading.value = false
    }
  }
  proxyRequest()
  return {
    listMap,
    pageNum,
    pageSize,
    finish,
    loading
  }
}