मैं क्लाइंट साइड से बाहरी, तृतीय-पक्ष एपीआई प्राप्त करना चाहता हूं। लेकिन फ़ीड बहुत बड़ी है (एक सरणी में 160,000 ऑब्जेक्ट) बाहरी एपीआई पर मेरा कोई नियंत्रण नहीं है।

क्या बाइट्स की मात्रा के लिए अधिकतम सीमा निर्धारित करना संभव है? तो मैं इस मामले में लगभग 50,000 वस्तुएँ ला सकता हूँ? क्योंकि यह बहुत लंबा लोड हो रहा है

मैं axios और maxContentLength और maxBodyLength के बारे में पढ़ रहा हूं लेकिन बिना किसी किस्मत के - इसका कोई प्रभाव नहीं पड़ता है।

साथ ही, एपीआई ?size=20&page=1 जैसे किसी भी पेजिनेशन का समर्थन नहीं करता है

तो XMLHttpRequest का उपयोग करना संभव है, मैं टिप्पणियों में बता सकता हूं। लेकिन क्या फ़ेच फ़ंक्शन का उपयोग करके वही समाधान संभव है? चूंकि हमारे पास यह ई.लोडेड नहीं है

4
jonask 11 अक्टूबर 2020, 16:10

1 उत्तर

सबसे बढ़िया उत्तर

ठीक है, यह रहा एक छोटा और गंदा PoC सिर्फ विचार की जांच के लिए (कुडोस टू Anime News Network< /a> उस अद्भुत और सही मायने में सार्वजनिक एपीआई के लिए):

async function limitedFetch(url, maxBytes) {
  return new Promise((resolve, reject) => {
    try {
      const xhr = new XMLHttpRequest();
      xhr.onprogress = (ev) => {
        console.log(`Received ${ev.loaded} bytes`);
        if (ev.loaded < maxBytes) return;
        resolve(ev.target.responseText);
        xhr.abort();
      };
      xhr.onload = (ev) => {
        resolve(ev.target.responseText);
      };
      xhr.onerror = (ev) => { reject(new Error(ev.target.status)) }

      xhr.open('GET', url);
      xhr.send();
    }
    catch (err) {
      reject(err);
    }
  });
}

const out = document.querySelector('pre');
const filter = document.querySelector('#filter');
document.querySelectorAll('button').forEach(
  btn => btn.addEventListener('click', async (ev) => {
    const rateLimit = ev.target.dataset.rate || Infinity;
    const cacheBuster = '&' + Date.now();
    const animeApiUrl = 
    `https://cdn.animenewsnetwork.com/encyclopedia/api.xml?title=~${filter.value}`;
    out.textContent = 'Waiting...';
    console.clear();
    try {
      const response = await limitedFetch(animeApiUrl + cacheBuster, rateLimit);
      out.textContent = `Received ${response.length} characters:
  ${response}`;
    }
    catch (err) {
      out.textContent = `Oh noes! ${err.message}
  ${err.stack}`;
    }
  })
);
<input id="filter" value="a" style="width: 5em"></input>
<button type="button">Release the FULL Kraken!</button>
<button type="button" data-rate="1000">Release the Rated Kraken!</button>
<pre></pre>

यहां कुंजी प्राप्त बाइट्स की संख्या को ट्रैक करने के लिए XMLHttpRequest की onprogress घटना का उपयोग कर रही है (यह प्रोग्रेसइवेंट ऑब्जेक्ट पर loaded संपत्ति है)। जब यह सीमा से अधिक हो जाता है, तो फ़ेचर तुरंत हल हो जाता है - और संबंधित अनुरोध को छोड़ देता है।

अलग-अलग रिलीज़ बटनों के साथ खेलें, और आप समग्र रूप से प्राप्त दोनों बाइट्स में अंतर देखेंगे - और console.log संदेशों की संख्या (जिन्हें डेटा के प्रत्येक प्राप्त हिस्से के लिए सक्रिय किया गया है)।

अब पकड़: डिफ़ॉल्ट फ़िल्टर के साथ (सिर्फ 'ए') 'रेटेड' अनुरोध बिल्कुल 1000 बाइट्स पर कभी नहीं रुकते हैं; ऐसा नहीं है कि टुकड़े कैसे काम करते हैं। इसके बजाय हमेशा एक हिस्सा ~ 50K बाइट्स से अधिक नहीं होता है; 'रेटेड' अनुरोध के साथ, यह केवल एक ही है, बिना रेटिंग के, तीन या अधिक होंगे।

2
raina77ow 11 अक्टूबर 2020, 15:30