Мое резюме по управлению запросами внешнего интерфейса в проекте

axios
Мое резюме по управлению запросами внешнего интерфейса в проекте

предисловие

Я давно не обновлял статью.Я только недавно запустил стек технологий React и несколько новых проектов компании.Некоторые из них не могут найти время.Некоторые проекты с открытым исходным кодом, в которых я участвовал, перестали обновляться, и статья снята с производства в течение длительного времени. , Моя статья предназначена для некоторых мелких партнеров, которые нуждаются в продвижении или продвигаются. Хотя моя статья не обязательно полезна, она может указать вам направление. Направление для размышлений.

Большинство идей в сообществе уже готовы к использованию. Я видел некоторые面试文章Есть даже ошибки в содержании, а некоторые анализы полупоняты. Благодаря этому стеку технологий передачи (vue & react) Я понимаю некоторые привычки, вызванные мягким знанием, такие как自我思考能力,项目拆分能力,驱动学习能力 и т.п.

Настоящее продвижение, в моем понимании, это сломать舒适圈, ломайте барьеры, думайте и исследуйте неизвестное, когда вы медленно осваиваете неизвестное, продолжаете искать барьеры и продолжаете разрушать барьеры, тогда вы квалифицированный инженер.

Зачем писать API

Я верю в2020Сегодня большинство фронтендов находятся в собственных проектах, разделив интерфейс как на самостоятельный модуль, так и вview, вам нужно только сделать асинхронный вызов, чтобы захватить后台数据 а также异常信息.

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

Я думаю, что информация о запросе не должна быть написана вместе в компоненте. QAQ

текст

Итак, позвольте мне рассказать вам об одномapiУправление им является чисто личным резюме.Если у вас есть какие-либо предложения, вы можете оставить сообщение в области комментариев для обсуждения и обмена.

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

image.pngобратиться к约定式форма, дляapiВсе файлы в каталоге имеют имена с**.api.jsфайл, я по умолчаниюAPI的模块 ,Например

- src
-- api
---- user.api.js
---- featrue.api.js
---- index.js

В данном случае это относительно хорошее состояние. Будь то новый разработчик или уже работающий разработчик, вы можетеapiНиже приведена каноническая схема. Затем, в конце концов, вам нужно только изменить соответствующий модульAPI接口Канонический экспорт в порядке.

/// @api user.api.js
export default {
    getUserAuth: 'GET /api/user/auth',
    postUser: 'POST /api/user',
    putUser: 'PUT /api/user/:id',
    deleteUser: 'DELETE /api/user/:id',
}

производящая функция

наконец всеAPI规范式будет сгенерирован как функция, подобная следующей

function request () {
	return network({
  	// ...... axios参数
  })
}

Как производить?

В канонической форме свойства производного объекта таковы:keyВ конечном итоге будет проанализировано в функцию запросаkey, и значение обрезается, и окончательное отображение становитсяurl,method. Пока сгенерирован базовый параметр конфигурации.На самом деле эта функция тоже очень проста.generateSyncRequestMethodОсновная цель метода — функционализировать обернутый модуль и сделать промежуточную модель.

const generateSyncRequestMethod = module => {
  const result = {};
  for (const key in module) {
    const [method, url] = module[key].split(' ')
    result[key] = (options = {}) => {
      console.log('... 函数内部体系')
    }
  }
  return result
}

RESTful канонический

дляRESTfulВ случае использования соглашения должна быть коммуникация между интерфейсом и сервером.Это взаимодействие является фиксированным процессом.Для спецификации интерфейса, начиная сA项目  => B项目С точки зрения этой спецификации интерфейса, этоTeamОсновная спецификация , как неподвижного состояния. Поэтому эту нормативную задачу нужно выполнять по форме команды, поэтому она только для справки. Делайте это в соответствии с нормами вашей команды.

использовать:GET /api/model/:id, используя эту каноническую формулу, параметры, которые вы передаете в метод запроса, должны иметь определенные ограничения. Первый вoptionВ атрибут нужно передать соответствующий объявленный в интерфейсе спецификации：值В качестве ограничения оба должны быть равны.

Во-вторых, для параметров, как мы все знаем, есть примерно два распространенных метода запроса, один из нихdataв виде , часто встречается вPOST  PUT ,а такжеGetметод, этоparams, поэтому сделана каноническая форма.Атрибуты параметров запроса динамически и гибко задаются разработчиком, а не архитектурой. Позвольте его гибкости иметь хороший комфорт, отпуская при этом немного гибкости.

request({ id: 1, data: {} })

for (const rest in options) {
  if (url.includes(`:${rest}`)) {
    url = url.replace(new RegExp(`:${rest}`), options[rest]);
    delete options[rest];
    console.log(url, options);
  }
}
return network({
  url,
  method,
  ...options,
});

преимущество

  • Согласованное руководство, разработчики не должны писать повторный код
  • Гибкость, настройка параметров может быть выполнена с помощью бэкенда, параметры могут быть переданы во время разработки и синхронизированы с конфигурацией запроса.
  • Синхронный макет для некоторых соглашенийMockинтерфейс, та же конфигурация

недостаток

  • Синтаксический анализ соглашений об интерфейсе требует потребления производительности.
  • Создание интерфейсных функций, требующих потребления производительности.
  • метод функции имеет ограничения

В конце концов, после того, как интерфейс будет доведен до совершенства в ранней производственной среде, он будет независимо упакован вchunkфайл, кешированный

полный код

Время поджимает, поэтому TypeScript еще не написан, и я восполню это, когда у меня будет время в будущем.

// @api index.js
import network from '@/utils/network'
const PATH = './'
const ISDEEP = false
const REG = /.api.js$/
const MODE = ' sync'
const apiFiles = require.context(PATH, ISDEEP, REG, MODE)

const generateSyncRequestMethod = module => {
  const result = {};
  for (const key in module) {
    const [method, url] = module[key].split(' ')
    result[key] = (options = {}) => {
      for (const rest in options) {
        if (url.includes(`:${ rest }`)) {
          url = url.replace(new RegExp(`:${ rest }`), options[rest])
          delete options[rest]
        } else {
          continue
        }
      }
      return network({
        url,
        method,
        ...options
      })
    }
  }
  return result
}

let apiResult = {}
apiFiles.keys().forEach(element => {
  apiResult = {
    ...generateSyncRequestMethod(apiFiles(element).default)
  }
})

export default apiResult

позже

Если есть хороший метод оптимизации, я могу обсудить его ниже, я также перечислил некоторые преимущества и недостатки, а также я думаю о некоторых более глубоких вещах, чтобы уменьшить внимание разработчиков к логике API за разумные деньги.apiсправляться. Это тоже моя первая статья в сентябре.Я просто сменил работу и я тоже меняю стек технологий, и он будет выводиться медленно.ReactСтатьи по Теме.

Голубь слишком долго и есть некоторая вина. Медленно корректируйте состояние, цель следующего года - 6. Недавно я купил эту книгу по структуре данных, чтобы изучить и дополнить основы.

Категории