Vaatimukset: Kehitetty tuote ei voi taata, ettei virheitä ole, vaikka testausvaiheessa ei olisi ongelmia, tuotantoympäristössä voi esiintyä odottamattomia tilanteita käyttäjille, ja sama pätee etusivuihin. Sentry ja Bugsnag ovat molemmat erittäin hyviä seurantatuotteita.
arvostelu
Seuraamalla poikkeamatietoja miten lähetän datan backend-API:lle? Navigator.sendBeacon on rajapinta, joka lähettää pieniä määriä dataa palvelimelle, erityisesti silloin kun sivu on purkautumassa, kuten lokitus, käyttäjäkäyttäytymisanalyysi jne.
Jos käytät perinteistä XHR:ää datan lähettämiseen, sinun täytyy tehdä erityinen logiikkakäsittely käyttöliittymässä käyttöliittymässä. navigator.sendBeacon()-metodiPudota viesti selaimen jonoon, jotta vaikka lähetys epäonnistuisi, sen virheilmoitus ei jää etupuolelle。
Navigator.sendBeacon esiteltiin
navigator.sendBeacon()-menetelmä lähettää HTTP-POST-pyynnön pienellä datamäärällä web-palvelimelle asynkronisesti. Parametrit: url, data (datatyypit ArrayBuffer, ArrayBufferView, Blob, DOMString, FormData tai URLSearchParams)
Dokumentaatio:
Hyperlinkin kirjautuminen on näkyvissä.
Hyperlinkin kirjautuminen on näkyvissä.
Käyttöskenaariot
Lokiminen, kun sivu poistetaan: Tallentaa käyttäytymistietoja, kuten sivun viipymisajan, klikkauskäyttäytymisen, PV:n, UV:n jne., kun käyttäjä poistuu sivulta.
Analytiikka ja seuranta: Käyttäjäkäyttäytymisdatan lähettäminen analytiikkapalvelimille verkkosivuston suorituskyvyn seurantaa ja käyttäjäkäyttäytymisen analysointia varten.
Tilan raportointi: Ilmoittaa sovelluksen tilan tai virhetiedot palvelimelle.
Testi
Koodi on seuraava:
Mitkä ovat yhtäläisyydet ja erot Navigator.sendBeaconin ja XHR and Fetchin välillä?
Yhtäläisyyksiä
Verkkopyyntöjen lähettäminen: Kaikkia kolmea menetelmää käytetään datan lähettämiseen asiakkaalta palvelimelle.
Tuki useille tietomuodoille: Ne voivat lähettää dataa eri muodoissa, kuten merkkijonoina, JSON-tiedostoina, binääridatana jne.
Eroja
Navigator.sendBeacon
Sitä käytetään pienen datamäärän lähettämiseen, kun sivu poistetaan, ja se soveltuu lokitukseen, datan analysointiin jne.
Datan lähettäminen on asynkronista, mutta se ei palauta tietoja soittajalle eikä pysty käsittelemään palvelimen vastausta.
Suunniteltu takaamaan tiedon toimitus, kun sivu poistetaan, vaikka selain olisi suljettu tai sivu hypähtäisi.
Käytä aina HTTPPOST-pyyntöjä.
Ei tarvitse käsitellä vastauksia, helppo käyttää.
XMLHttpRequest
Monimutkaisempiin AJAX-pyyntöihin, jotka vaativat vastausten käsittelyä.
Synkronisia tai asynkronisia pyyntöjä voidaan tehdä.
Voit käsitellä palvelimen vastauksen ja tehdä lisäkäsittelyä (esim. JSON:n jäsentäminen, tilakoodien käsittely jne.).
Tarjoaa monipuolisia tapahtumia, kuten onload, onerror, onprogress jne., seuratakseen pyynnön eri vaiheita.
Laajasti tuettu kaikissa suurissa selaimissa, mukaan lukien jotkut vanhemmat selaimet.
Sen käyttö on monimutkaisempaa ja vaatii pyynnön eri vaiheiden ja tilojen käsittelyä.
Hakea
Moderni pyyntörajapinta, joka korvaa XMLHttpRequestin yksinkertaisempaan ja joustavampaan pyyntöjen ja vastausten käsittelyyn.
Tee aina asynkroninen pyyntö ja palauta Promise-objekti.
Se tukee ketjutettuja prosessointivastauksia, mikä tekee JSONin, prosessitilakoodien ja muiden asioiden jäsentämisestä helppoa.
Tukee asynkronisoitua/odotussyntaksia, joka vastaa paremmin nykyaikaisia JavaScript-kehitystapoja.
Parempi tuki verkkotunnusten välisiin pyyntöihin ja CORS:iin (Cross-Domain Resource Sharing).
Mahdollistaa lisävaihtoehtojen lisäämisen pyyntöön (esim. mukautettu otsikko, pyyntömenetelmä jne.).
yhteenveto
Navigator.sendBeacon on API, joka on suunniteltu luotettavuuteen, erityisesti pienten tietomäärien lähettämiseen sivun poistamisen yhteydessä.
Sen etuna ovat yksinkertaisuus, estämättömyys ja luotettavuus, ja se sopii erityisen hyvin esimerkiksi lokituksen ja käyttäjäkäyttäytymisen analyysin kaltaisiin tilanteisiin.
Tehdään asynkroninen pyyntö, joka on POST-pyyntö.
Se voi vain määrittää, onko se sijoitettu selaimen tehtäväjonoon, mutta ei voi varmistaa, onko se onnistuneesti lähetetty.
Tuottoarvon kanssa ei tarvitse huolehtia.
Selaimen yhteensopivuusongelmat on huomioitava. |
Julkaistu 2025-3-5 09:46:14
|
|
|
|
