Axios е базиран на Promise HTTP клиент със седмичен обем на изтегляне на npm от 40 милиона+. Ако се върнем преди 10 години, инструментът за заявка в стил обещание е страхотна иновация. Решава проблема с тромавите заявки. Възрастта на не толкова висока може да се каже, че е най-добрата. Но с течение на времето Axios започна да изостава по отношение на ефективността на разработката и производителността. Сега е 2023 г. В лицето на все по-сложни изисквания, това, от което се нуждаем, е по-иновативен и водещ инструмент за заявки, а инструментът за заявки в стил обещание може да се нарече само традиционен, ако искате да останете в челните редици на бързото развитие, моля, прочетете нататък.

Първо, искам да заявя, че наистина не съм водеща партия. След това ще разкрия неспособността на axios в някои аспекти с течение на времето и ще препоръчам нова заявка, която е по-модерна и иновативна от axios. Инструментът е за вас, той е леката библиотека за стратегии за заявки alova

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

1. Отделен от рамки като React и Vue

Сега предните UI рамки като React и Vue са почти незаменими за предния край. Axios не може да бъде дълбоко обвързан със състоянието на тези рамки и разработчиците трябва да ги поддържат сами, което води до ниска ефективност на разработката.

2. Не прави нищо по отношение на производителността

2023 г. е и приложението вече е с няколко порядъка по-сложно от приложението преди 10 години, а изискванията за заявки стават все по-високи, за да се гарантират изискванията за производителност на страницата. Axios не прави нищо в това отношение, като чести повтарящи се заявки, иницииране на множество идентични заявки едновременно и т.н.

3. Подут обем

Според bundlephobia обемът на axios в компресирано състояние е 11+kb. Ако не вярвате, можете да щракнете тук, за да проверите.

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, който изглежда много познат.

Алова се произнася като „Алова“. Въпреки че започва с подобен 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, която твърди, че е библиотека със стратегии за заявки, също предоставя стратегии за заявки в конкретни сценарии, които ще представим по-долу. Заинтересовани партньори, моля, продължете да четете.

олекотен размер

Alova в компресирано състояние е само 4kb+, само 30%+ axios, ако не вярвате, можете да щракнете тук, за да проверите

По-интуитивен тип данни за отговор 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

Поддръжка на множество UI рамки едновременно

Alova поддържа react, vue и svelte едновременно, без значение коя UI рамка използвате, тя може да ви задоволи.

API дизайн, подобен на axios, по-лесен за използване и познат

Информационната структура на заявката на Alova е почти същата като тази на axios. Нека сравним техните GET и POST заявки.

Получаване на заявка

// 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 има голям потенциал. Ако искате да го изпробвате, можете да щракнете върху връзката по-долу, за да научите повече.

алова официален уебсайт

Адресът на Алова в Github