Axios — это HTTP-клиент на основе Promise с еженедельным объемом загрузок npm более 40 миллионов. Если мы вернемся на 10 лет назад, инструмент запросов в стиле обещаний — отличное новшество. Это решает проблему громоздких запросов. Возраст не столь высокий можно назвать лучшим. Но со временем Axios стал отставать в плане эффективности разработки и производительности. На дворе 2023 год. Учитывая постоянно усложняющиеся требования, нам нужен более инновационный и передовой инструмент запросов , а инструмент запросов в стиле обещаний можно назвать традиционным только в том случае, если вы хотите остаться в авангарде быстрого развития, то, пожалуйста, читайте дальше.

Прежде всего, я хочу заявить, что на самом деле я не являюсь хедлайнером. Далее я раскрою неспособность axios в некоторых аспектах с течением времени и порекомендую новый запрос, более современный и инновационный, чем axios. Инструмент для вас, это облегченная библиотека стратегий запросов alova

слабые стороны инструментов запросов в стиле Promise (axios)

1. Отдельно от таких фреймворков, как React и Vue

Теперь интерфейсные фреймворки пользовательского интерфейса, такие как React и Vue, практически незаменимы для внешнего интерфейса. Axios не может быть сильно привязан к состоянию этих фреймворков, и разработчикам приходится поддерживать их самостоятельно, что приводит к низкой эффективности разработки.

2. Ничего не делает с точки зрения производительности

На дворе 2023 год, а приложение уже на несколько порядков сложнее, чем приложение 10-летней давности, а требования к запросам все выше и выше, чтобы обеспечить требования к производительности страницы. Axios ничего не делает в этом плане, типа частых повторных запросов, Инициирует несколько одинаковых запросов одновременно и т.д.

3. Раздутый объем

По пакфобии объем аксиом в сжатом состоянии 11+кб. Если не верите, вы можете нажать здесь, чтобы проверить.

4. Определение типа Ts данных ответа сбивает с толку

При использовании axios вы часто можете написать так:

// create axios instance
const inst = axios.create({
  baseURL: 'https://example.com/'
})

// return response data in the response interception
inst.interceptors.response.use(response => {
  if (response.status === 200) {
    return response.data
  }
  throw new Error(response.status)
})
interface Resp {
  id: number
}
inst.get<Resp>('/xxx').then(result => {
  // the type of result is always axios.AxiosResponse<Resp>
  console.log(result.data);
})

Я не знаю, сделал ли axios это намеренно или проигнорировал. В GET-запросе, инициированном выше, resultтип данных ответа всегда axios.AxiosResponse<Resp>одинаков, но на самом деле мы уже вернули его в перехватчике ответа response.data, что приводит к путанице типов данных ответа.

Как это решается в alova?

Являясь более современным и более адаптируемым решением запросов для сложных приложений, alova также предлагает более элегантное решение. В то же время, чтобы снизить стоимость обучения, также поддерживается дизайн API, аналогичный axios, который выглядит очень знакомо.

Алова произносится как «Алова». Хотя оно начинается с аналогичной аксиомы, необходимо различать следующие два имени!

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

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

аксиос

<template>
  <div v-if="loading">Loading...</div>
  <div v-else-if="error" class="error">
    {{ error.message }}
  </div>
  <div v-else>{{ data }}</div>
</template>

<script setup>
import axios from 'axios';
import { ref, onMounted } from 'vue';
const loading = ref(false);
const error = ref(null);
const data = ref(null);
const requestData = () => {
  loading.value = true;
  axios.get('http://xxx/index').then(result => {
    data.value = result;
  }).catch(e => {
    error.value = e;
  }).finally(() => {
    loading.value = false;
  });
}
onMounted(requestData);
</script>

алова

<template>
  <div v-if="loading">Loading...</div>
  <div v-else-if="error" class="error">
    {{ error.message }}
  </div>
  <div v-else>{{ data }}</div>
</template>

<script setup>
import { createAlova } from 'alova';
const pageData = createAlova({ baseURL: 'http://xxx' }).Get('/index');
const { loading, data, error } = useRequest(pageData);
</script>

В axios вам нужно создать соответствующий статус запроса и поддерживать его самостоятельно, но alova берет на себя эту работу за вас

Готовые высокопроизводительные функции

Традиционные инструменты запросов в стиле Promise в основном предназначены для упрощения запросов через Promise, и повышение производительности может быть наименьшим из их соображений. Однако Alova, представляющая собой библиотеку политик запросов, подчеркивает этот момент. В Alova память включена по умолчанию. Кэширование и совместное использование запросов, эти два элемента могут значительно повысить производительность запросов, улучшить взаимодействие с пользователем и снизить нагрузку на сервер, давайте рассмотрим их один за другим.

кэш памяти

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

запрос поделиться

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

  1. Когда компонент создан, он получает данные инициализации. Когда страница отображает несколько компонентов одновременно, она одновременно отправляет несколько идентичных запросов;
  2. Кнопка отправки не отключена, и пользователь нажал кнопку отправки несколько раз;
  3. При входе на страницу предварительной загрузки до завершения предварительной загрузки один и тот же запрос будет инициирован несколько раз;

Запросы на совместное использование используются для решения этих проблем. Это реализуется путем мультиплексирования запросов. Поскольку такой случай не может быть отображен интуитивно, он не будет отображаться. Заинтересованные партнеры могут испытать это на себе.

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

легкий размер

Алова в сжатом состоянии всего 4кб+, всего 30%+ аксиом, если не верите, можете кликнуть сюда для проверки

Более интуитивно понятный тип данных ответа TS

В axios действительно сбивает с толку то, что вы хотите определить тип данных ответа. Если вы активный пользователь Typescript, alova может предоставить вам полный набор шрифтов. Когда вы определяете тип данных ответа по запросу, вы можете наслаждаться им в нескольких местах, это заставит вас чувствовать себя очень ясно, давайте посмотрим.

interface Resp {
  id: number
}
const pageData = createAlova({ baseURL: 'http://xxx' }).Get<Resp>('/index');
const {
  data,  // the type of data is Resp
  loading, error, onSuccess, send
} = useRequest(pageData);
onSuccess(event => {
  // type of event.data is also Resp
  console.log(event.data);
});

const handleClick = async () => {
  // you can call send to send request again. it can receive response which type is also Resp
  const data = await send();
}

На данный момент, по сравнению с традиционной библиотекой запросов в стиле Promise, у вас может быть предварительное представление о силе alova.

Но… это гораздо больше!

Другие особенности аловы

Поддержка нескольких фреймворков пользовательского интерфейса одновременно

Alova поддерживает реакции, vue и svelte одновременно, независимо от того, какую среду пользовательского интерфейса вы используете, она может вас удовлетворить.

Дизайн API похож на axios, проще в использовании и привычнее

Информационная структура запроса Alova почти такая же, как и у axios. Давайте сравним их запросы GET и POST.

GET-запрос

// axios
axios.get('/index', {
  // set request headers
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  },
  // set params
  params: {
    userId: 1
  }
});

// alova
const todoListGetter = alovaInstance.Get('/index', {
  // set request headers
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  },
  // set params
  params: {
    userId: 1
  }
});

POST-запрос

// axios
axios.post('/login', {
  username: 'xxx',
  password: 'ppp'
}, {
  // set request headers
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  },
  // set params
  params: {
    userId: 1
  }
});

// alova
const loginPoster = alovaInstance.Post('/login', {
  username: 'xxx',
  password: 'ppp'
}, {
  // set request headers
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  },
  // set params
  params: {
    userId: 1
  }
});

(Стратегия запроса) Стратегия запроса высокопроизводительного пейджинга

Автоматически поддерживать данные и статус, связанные с пейджингом, и обеспечивать общие возможности работы с пейджинговыми данными. Согласно официальному представлению, это может улучшить беглость страницы списка на 300% и снизить сложность кодирования на 50%. Ниже приведен пример, предоставленный чиновником. Заинтересованные студенты могут пойти и посмотреть.

Пример списка страниц

Пример загрузки с вытягиванием вниз

(Стратегия запроса) Неиндуктивное взаимодействие с данными

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

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

Во время моего опыта, даже в слабом сетевом состоянии, я сразу же чувствую гладкость, поэтому, пожалуйста, приходите и испытайте это.

Насколько я понимаю, он использует следующие методы:

  1. Постоянная очередь запросов для обеспечения безопасности и сериализации запросов;
  2. Механизм политики повторных запросов для обеспечения плавного завершения запроса;
  3. Фиктивные данные ответа (новаторская концепция), которые служат заполнителем для неотвечающих данных, чтобы их можно было позиционировать и заменять фактическими данными после ответа.

Подробнее о бессмысленном взаимодействии данных вы можете узнать на официальном сайте.

Предварительная выборка данных

Данные предварительно загружаются путем извлечения данных и кэшируются локально. Когда эта часть данных действительно используется, она может попасть в кеш и отобразить данные напрямую. Этот метод также значительно улучшает взаимодействие с пользователем.

напиши в конце

Короче говоря, как инструмент запроса для нового поколения, alova имеет большой потенциал. Если вы хотите попробовать, вы можете нажать на ссылку ниже, чтобы узнать больше.

официальный сайт Алова

Адрес Alova на Github