optimize poeprices requests

src/web/price-check/price-prediction/PricePrediction.vue

@@ -61,12 +61,13 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, watch, ref, PropType } from 'vue'
+import { defineComponent, watch, ref, PropType, computed } from 'vue'
 import { getExternalLink, RareItemPrice, requestPoeprices } from './poeprices'
 import FeedbackOption from './FeedbackOption.vue'
 import ItemQuickPrice from '@/web/ui/ItemQuickPrice.vue'
 import { ParsedItem } from '@/parser'
 import { MainProcess } from '@/ipc/main-process-bindings'
+import { artificialSlowdown } from '../trade/artificial-slowdown'
 
 export default defineComponent({
   name: 'PricePrediction',
@@ -78,6 +79,11 @@ export default defineComponent({
     }
   },
   setup (props) {
+    const slowdown = artificialSlowdown(800)
+    watch(() => props.item, (item) => {
+      slowdown.reset(item)
+    })
+
     const price = ref<RareItemPrice | null>(null)
     const error = ref<string | null>(null)
     const loading = ref(false)
@@ -108,7 +114,7 @@ export default defineComponent({
     return {
       price,
       error,
-      loading,
+      loading: computed(() => loading.value || !slowdown.isReady.value),
       showContrib,
       feedbackSent,
       openWebsite

src/web/price-check/price-prediction/poeprices.ts

@@ -1,6 +1,9 @@
 import { ParsedItem } from '@/parser'
 import { selected as league } from '@/web/background/Leagues'
 import { MainProcess } from '@/ipc/main-process-bindings'
+import { Cache } from '../trade/Cache'
+
+const cache = new Cache()
 
 interface PoepricesApiResponse { /* eslint-disable camelcase */
   currency: 'chaos' | 'exalt'
@@ -24,22 +27,27 @@ export interface RareItemPrice {
   }>
 }
 
-export async function requestPoeprices (item: ParsedItem): Promise<RareItemPrice | null> {
+export async function requestPoeprices (item: ParsedItem): Promise<RareItemPrice> {
   const query = querystring({
     i: utf8ToBase64(transformItemText(item.rawText)),
     l: league.value,
     s: 'awakened-poe-trade'
   })
-  const response = await fetch(`${MainProcess.CORS}https://www.poeprices.info/api?${query}`)
-  let data: PoepricesApiResponse
-  try {
-    data = await response.json()
-  } catch (e) {
-    throw new Error(`${response.status}, poeprices.info API is under load or down.`)
-  }
 
-  if (data.error !== 0) {
-    throw new Error(data.error_msg)
+  let data = cache.get<PoepricesApiResponse>(query)
+  if (!data) {
+    const response = await fetch(`${MainProcess.CORS}https://www.poeprices.info/api?${query}`)
+    try {
+      data = await response.json() as PoepricesApiResponse
+    } catch (e) {
+      throw new Error(`${response.status}, poeprices.info API is under load or down.`)
+    }
+
+    if (data.error !== 0) {
+      throw new Error(data.error_msg)
+    }
+
+    cache.set<PoepricesApiResponse>(query, data, 300)
   }
 
   return {