Вторичная упаковка Axios в проекте

внешний интерфейс JavaScript

1. Зачем инкапсулировать?

  • Это удобно для общего вызова кода, публичной обработки запросов и персонализированной настройки.

2. Другие инкапсулировали многое, почему бы напрямую не модифицировать и не использовать?

  • Идеи упаковки не подходят для собственных проектов
  • Неудобно вызывать после инкапсуляции

3. Демонстрация персонального пакета

Структура кода [на основе vue]

目录1.jpg

Основная идея

  1. Храните все адреса интерфейсов запросов в соответствии с файловыми модулями, такими как модули запроса/модуля/пользователя, связанные с информацией о пользователе [Сервисы].

image.png

image.png

2. Инкапсулируйте методы и классы. Привяжите общие методы запроса ко всем запросам и обработайте параметры пути в URL-адресах запросов.

generateServer.js

import server from "../util/axiosConfig";
// 修改axios基本配置，请求配置
function request({
  url,
  method = "get",
  queryParm = {},
  body = {},
  pathParm = null,
  config = {},
}) {
  const configAxios = {
    method,
    ...config,
    url: dealRequestUrl(url, pathParm),
  };
  switch (method) {
    case "get":
      configAxios.params = queryParm;
      break;

    default:
      // 请求方法 'PUT', 'POST', 和 'PATCH'
      configAxios.data = body;
      break;
  }
  console.log('configAxios', configAxios)
  return server(configAxios);
}

function dealRequestUrl(url, pathParm) {
  if (!pathParm) return url;
  let dealurl = url;
  Object.keys(pathParm).forEach((ele) => {
    dealurl = dealurl.replace(`{${ele}}`, pathParm[ele]);
  });
  return dealurl;
}
class GenerateServer {
  constructor(url) {
    this.url = url;
  }
  getdata(parm) {
    console.log('parm', parm)
    return request({ ...parm, method: "get", url: this.url });
  }
  postdata(parm) {
    return request({ ...parm, method: "post", url: this.url });
  }
  deletedata(parm) {
    return request({ ...parm, method: "delete", url: this.url });
  }
}
export default GenerateServer;

3. Экспозиция в целом

image.png

использовать

    import { userInfoServer } from "./request";
    .
    .
    .

    // 发送请求
    userInfoServer.getUserName
      .getdata({
        queryParm: {
          id: 223,
        },
      })
      .then((res) => {
        console.log("res", res);
      });
    // 发送请求
    userInfoServer.getUserName
      .postdata({
        body: {
          id: 223,
        },
      })
      .then((res) => {
        console.log("res", res);
      });
    // 发送get请求,请求路径带参数
    userInfoServer.getUserList
      .getdata({
        queryParm: {
          id: 223,
        },
        pathParm: {
          id: 567,
        },
      })
      .then((res) => {
        console.log("res", res);
      });

Резюме: вышеописанный пакет, в основном для запроса более подробного разрешения, легко поддерживать. Это также удобнее во время развития. Для новых требований интерфейса и требуется только для добавления генератора ответа конфигурации URL-адреса, расположенного в соответствующем модуле. Он сможет обрабатывать запросы в бизнес-коде внутри. Для параметров тела Path Project Past Code и Parameter Package не заботится при использовании соответствующей конфигурации.

Приведенный выше код не обрабатывает загрузку файла, получение строки параметра запроса и т. д. Но вы можете добавить конфигурацию в соответствующий axios. Легко поддерживать.

код гит:git

Категории