Avancerat Fetch API: Interception av anrop och cachning av svar

Fetch API har blivit standarden för att göra nätverksanrop i modern JavaScript. Medan grundläggande användning är enkel, krävs förståelse för avancerade tekniker som anropsinterception och cachning av svar för att låsa upp dess fulla potential. Denna artikel kommer att utforska dessa koncept i detalj, med praktiska exempel och bästa praxis för att bygga högpresterande, globalt tillgängliga webbapplikationer.

Förstå Fetch API

Fetch API erbjuder ett kraftfullt och flexibelt gränssnitt för att hämta resurser över nätverket. Det använder Promises, vilket gör asynkrona operationer enklare att hantera och resonera kring. Innan vi dyker in i avancerade ämnen, låt oss kort repetera grunderna:

Grundläggande Fetch-användning

Ett enkelt Fetch-anrop ser ut så här:

            
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log('Data:', data);
  })
  .catch(error => {
    console.error('Fetch error:', error);
  });

            

              
                Copy
              
            
          

Denna kod hämtar data från den angivna URL:en, kontrollerar för HTTP-fel, tolkar svaret som JSON och loggar datan till konsolen. Felhantering är avgörande för att säkerställa en robust applikation.

Interception av anrop

Interception av anrop innebär att man modifierar eller observerar nätverksanrop innan de skickas till servern. Detta kan vara användbart för olika ändamål, inklusive:

• Lägga till autentiseringsheaders
• Transformera anropsdata
• Logga anrop för felsökning
• Mocka API-svar under utveckling

Interception av anrop uppnås vanligtvis med hjälp av en Service Worker, som fungerar som en proxy mellan webbapplikationen och nätverket.

Service Workers: Grunden för interception

En Service Worker är en JavaScript-fil som körs i bakgrunden, separat från webbläsarens huvudtråd. Den kan intercepta nätverksanrop, cacha svar och erbjuda offline-funktionalitet. För att använda en Service Worker måste du först registrera den:

            
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(registration => {
      console.log('Service Worker registered with scope:', registration.scope);
    })
    .catch(error => {
      console.error('Service Worker registration failed:', error);
    });
}

            

              
                Copy
              
            
          

Denna kod kontrollerar om webbläsaren stöder Service Workers och registrerar filen service-worker.js. Scopet definierar vilka URL:er som Service Workern kommer att kontrollera.

Implementera anropsinterception

Inuti filen service-worker.js kan du intercepta anrop med hjälp av fetch-händelsen:

            
self.addEventListener('fetch', event => {
  // Intercepta alla fetch-anrop
  event.respondWith(
    new Promise(resolve => {
      // Klona anropet för att undvika att modifiera originalet
      const req = event.request.clone();

      // Modifiera anropet (t.ex. lägg till en autentiseringsheader)
      const headers = new Headers(req.headers);
      headers.append('Authorization', 'Bearer your_api_key');

      const modifiedReq = new Request(req.url, {
        method: req.method,
        headers: headers,
        body: req.body,
        mode: 'cors',
        credentials: req.credentials,
        cache: req.cache,
        redirect: req.redirect,
        referrer: req.referrer,
        integrity: req.integrity
      });

      // Gör det modifierade anropet
      fetch(modifiedReq)
        .then(response => resolve(response))
        .catch(error => {
          console.error('Fetch error in Service Worker:', error);
          // Alternativt, returnera ett standardsvar eller en felsida
          resolve(new Response('Offline', { status: 503, statusText: 'Service Unavailable' }));
        });
    })
  );
});

            

              
                Copy
              
            
          

Denna kod interceptar varje fetch-anrop, klonar det, lägger till en Authorization-header och gör sedan det modifierade anropet. Metoden event.respondWith() talar om för webbläsaren hur anropet ska hanteras. Det är avgörande att klona anropet; annars modifierar du det ursprungliga anropet, vilket kan leda till oväntat beteende. Den ser också till att vidarebefordra alla ursprungliga anropsalternativ för att säkerställa kompatibilitet. Notera felhanteringen: det är viktigt att tillhandahålla en reservlösning om anropet misslyckas (t.ex. vid offline-läge).

Exempel: Lägga till autentiseringsheaders

Ett vanligt användningsfall för anropsinterception är att lägga till autentiseringsheaders i API-anrop. Detta säkerställer att endast auktoriserade användare kan komma åt skyddade resurser.

            
self.addEventListener('fetch', event => {
  if (event.request.url.startsWith('https://api.example.com')) {
    event.respondWith(
      new Promise(resolve => {
        const req = event.request.clone();
        const headers = new Headers(req.headers);
        // Ersätt med faktisk autentiseringslogik (t.ex. hämta token från localStorage)
        const token = localStorage.getItem('api_token'); 

        if (token) {
          headers.append('Authorization', `Bearer ${token}`);
        } else {
           console.warn("No API token found, request may fail.");
        }

        const modifiedReq = new Request(req.url, {
          method: req.method,
          headers: headers,
          body: req.body,
          mode: 'cors',
          credentials: req.credentials,
          cache: req.cache,
          redirect: req.redirect,
          referrer: req.referrer,
          integrity: req.integrity
        });

        fetch(modifiedReq)
          .then(response => resolve(response))
          .catch(error => {
            console.error('Fetch error in Service Worker:', error);
            resolve(new Response('Offline', { status: 503, statusText: 'Service Unavailable' }));
          });
      })
    );
  } else {
    // Låt webbläsaren hantera anropet som vanligt
    event.respondWith(fetch(event.request));
  }
});

            

              
                Copy
              
            
          

Denna kod lägger till en Authorization-header i anrop som börjar med https://api.example.com. Den hämtar API-token från local storage. Det är avgörande att implementera korrekt tokenhantering och säkerhetsåtgärder, såsom HTTPS och säker lagring.

Exempel: Transformera anropsdata

Anropsinterception kan också användas för att transformera anropsdata innan den skickas till servern. Du kanske till exempel vill konvertera data till ett specifikt format eller lägga till ytterligare parametrar.

            
self.addEventListener('fetch', event => {
  if (event.request.url.includes('/submit-form')) {
    event.respondWith(
      new Promise(resolve => {
        const req = event.request.clone();
        req.text().then(body => {
          try {
            const parsedBody = JSON.parse(body);
            // Transformera datan (t.ex. lägg till en tidsstämpel)
            parsedBody.timestamp = new Date().toISOString();

            // Konvertera den transformerade datan tillbaka till JSON
            const transformedBody = JSON.stringify(parsedBody);

            const modifiedReq = new Request(req.url, {
              method: req.method,
              headers: req.headers,
              body: transformedBody,
              mode: 'cors',
              credentials: req.credentials,
              cache: req.cache,
              redirect: req.redirect,
              referrer: req.referrer,
              integrity: req.integrity
            });

            fetch(modifiedReq)
              .then(response => resolve(response))
              .catch(error => {
                console.error('Fetch error in Service Worker:', error);
                resolve(new Response('Offline', { status: 503, statusText: 'Service Unavailable' }));
              });
          } catch (error) {
            console.error("Error parsing request body:", error);
            resolve(fetch(event.request)); // Återgå till ursprungligt anrop
          }
        });
      })
    );
  } else {
    event.respondWith(fetch(event.request));
  }
});

            

              
                Copy
              
            
          

Denna kod interceptar anrop till /submit-form, tolkar anropets body som JSON, lägger till en tidsstämpel och skickar sedan den transformerade datan till servern. Felhantering är nödvändig för att säkerställa att applikationen inte kraschar om anropets body inte är giltig JSON.

Cachning av svar

Cachning av svar innebär att man lagrar svar från API-anrop i webbläsarens cache. Detta kan avsevärt förbättra prestandan genom att minska antalet nätverksanrop. När ett cachat svar finns tillgängligt kan webbläsaren servera det direkt från cachen, utan att behöva göra ett nytt anrop till servern.

Fördelar med cachning av svar

• Förbättrad prestanda: Snabbare laddningstider och en mer responsiv användarupplevelse.
• Minskad bandbreddsanvändning: Mindre data överförs över nätverket, vilket sparar bandbredd för både användaren och servern.
• Offline-funktionalitet: Cachade svar kan serveras även när användaren är offline, vilket ger en sömlös upplevelse.
• Kostnadsbesparingar: Lägre bandbreddsanvändning leder till lägre kostnader för både användare och tjänsteleverantörer, särskilt i regioner med dyra eller begränsade dataplaner.

Implementera cachning av svar med Service Workers

Service Workers erbjuder en kraftfull mekanism för att implementera cachning av svar. Du kan använda Cache API för att lagra och hämta svar.

            
const cacheName = 'my-app-cache-v1';
const cacheableUrls = [
  '/',
  '/index.html',
  '/styles.css',
  '/script.js',
  'https://api.example.com/data'
];

// Install-händelse: Cachelagra statiska tillgångar
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(cacheName)
      .then(cache => {
        console.log('Caching app shell');
        return cache.addAll(cacheableUrls);
      })
  );
});

// Activate-händelse: Rensa gamla cacheminnen
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.filter(name => name !== cacheName)
          .map(name => caches.delete(name))
      );
    })
  );
});

// Fetch-händelse: Servera cachade svar eller hämta från nätverket
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        // Cache-träff - returnera svar
        if (response) {
          return response;
        }

        // Finns inte i cache - hämta från nätverket
        return fetch(event.request).then(
          response => {
            // Kontrollera om vi fick ett giltigt svar
            if (!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // Klona svaret (eftersom det är en ström och bara kan konsumeras en gång)
            const responseToCache = response.clone();

            caches.open(cacheName)
              .then(cache => {
                cache.put(event.request, responseToCache);
              });

            return response;
          }
        ).catch(error => {
          // Hantera nätverksfel
          console.error("Fetch failed:", error);
          // Alternativt, tillhandahåll ett reservsvar (t.ex. offline-sida)
          return caches.match('/offline.html');
        });
      })
  );
});

            

              
                Copy
              
            
          

Denna kod cachar statiska tillgångar under install-händelsen och serverar cachade svar under fetch-händelsen. Om ett svar inte hittas i cachen hämtas det från nätverket, cachas och returneras sedan. `activate`-händelsen används för att rensa gamla cacheminnen när Service Workern uppdateras. Denna metod säkerställer också att endast giltiga svar (status 200 och typ 'basic') cachas.

Cache-strategier

Det finns flera olika cache-strategier du kan använda, beroende på din applikations behov:

• Cache-First: Försök att servera svaret från cachen först. Om det inte hittas, hämta det från nätverket och cacha det. Detta är bra för statiska tillgångar och resurser som inte ändras ofta.
• Network-First: Försök att hämta svaret från nätverket först. Om det misslyckas, servera det från cachen. Detta är bra för dynamisk data som måste vara uppdaterad.
• Cache, then Network: Servera svaret från cachen omedelbart och uppdatera sedan cachen med den senaste versionen från nätverket. Detta ger en snabb initial laddning och säkerställer att användaren alltid har den senaste datan (så småningom).
• Stale-While-Revalidate: Returnera ett cachat svar omedelbart samtidigt som du kontrollerar nätverket för en uppdaterad version. Uppdatera cachen i bakgrunden om en nyare version finns tillgänglig. Liknar "Cache, then Network" men ger en mer sömlös användarupplevelse.

Valet av cache-strategi beror på de specifika kraven för din applikation. Ta hänsyn till faktorer som uppdateringsfrekvens, vikten av färsk data och tillgänglig bandbredd.

Exempel: Cachning av API-svar

Här är ett exempel på hur man cachar API-svar med Cache-First-strategin:

            
self.addEventListener('fetch', event => {
  if (event.request.url.startsWith('https://api.example.com')) {
    event.respondWith(
      caches.match(event.request)
        .then(response => {
          // Cache-träff - returnera svar
          if (response) {
            return response;
          }

          // Finns inte i cache - hämta från nätverket
          return fetch(event.request).then(
            response => {
              // Kontrollera om vi fick ett giltigt svar
              if (!response || response.status !== 200 || response.type !== 'basic') {
                return response;
              }

              // Klona svaret (eftersom det är en ström och bara kan konsumeras en gång)
              const responseToCache = response.clone();

              caches.open(cacheName)
                .then(cache => {
                  cache.put(event.request, responseToCache);
                });

              return response;
            }
          );
        })
    );
  } else {
    // Låt webbläsaren hantera anropet som vanligt
    event.respondWith(fetch(event.request));
  }
});

            

              
                Copy
              
            
          

Denna kod cachar API-svar från https://api.example.com. När ett anrop görs kontrollerar Service Workern först om svaret redan finns i cachen. Om det gör det, returneras det cachade svaret. Om inte, görs anropet till nätverket, och svaret cachas innan det returneras.

Avancerade överväganden

Cache-invalidering

En av de största utmaningarna med cachning är cache-invalidering. När data ändras på servern måste du se till att cachen uppdateras. Det finns flera strategier för cache-invalidering:

• Cache Busting: Lägg till ett versionsnummer eller en tidsstämpel i resursens URL. När resursen ändras, ändras URL:en, och webbläsaren kommer att hämta den nya versionen.
• Tidsbaserad utgång: Ange en maximal ålder för cachade svar. Efter utgångstiden kommer webbläsaren att hämta en ny version från servern. Använd Cache-Control-headern för att specificera den maximala åldern.
• Manuell invalidering: Använd metoden caches.delete() för att manuellt ta bort cachade svar. Detta kan utlösas av en händelse på serversidan eller en användaråtgärd.
• WebSockets för realtidsuppdateringar: Använd WebSockets för att pusha uppdateringar från servern till klienten och invalidera cachen vid behov.

Content Delivery Networks (CDN)

Content Delivery Networks (CDN) är distribuerade nätverk av servrar som cachar innehåll närmare användarna. Att använda ett CDN kan avsevärt förbättra prestandan för användare runt om i världen genom att minska latens och bandbreddsanvändning. Populära CDN-leverantörer inkluderar Cloudflare, Amazon CloudFront och Akamai. Vid integrering med CDN, se till att `Cache-Control`-headers är korrekt konfigurerade för optimalt cachningsbeteende.

Säkerhetsaspekter

När man implementerar anropsinterception och cachning av svar är det viktigt att beakta säkerhetskonsekvenserna:

• HTTPS: Använd alltid HTTPS för att skydda data under överföring.
• CORS: Konfigurera Cross-Origin Resource Sharing (CORS) korrekt för att förhindra obehörig åtkomst till resurser.
• Datasanering: Sanera användarinmatning för att förhindra cross-site scripting (XSS)-attacker.
• Säker lagring: Lagra känslig data, såsom API-nycklar och tokens, säkert (t.ex. med HTTPS-only cookies eller ett säkert lagrings-API).
• Subresource Integrity (SRI): Använd SRI för att säkerställa att resurser som hämtas från tredjeparts-CDN inte har manipulerats.

Felsökning av Service Workers

Felsökning av Service Workers kan vara utmanande, men webbläsarens utvecklarverktyg erbjuder flera funktioner som hjälp:

• Application-fliken: Application-fliken i Chrome DevTools ger information om Service Workers, inklusive deras status, scope och cache-lagring.
• Konsolloggning: Använd console.log()-uttryck för att logga information om Service Worker-aktivitet.
• Brytpunkter: Sätt brytpunkter i Service Worker-koden för att stega igenom exekveringen och inspektera variabler.
• Update on Reload: Aktivera "Update on reload" i Application-fliken för att säkerställa att Service Workern uppdateras varje gång du laddar om sidan.
• Avregistrera Service Worker: Använd "Unregister"-knappen i Application-fliken för att avregistrera Service Workern. Detta kan vara användbart för att felsöka problem eller börja om från början.

Slutsats

Interception av anrop och cachning av svar är kraftfulla tekniker som avsevärt kan förbättra prestandan och användarupplevelsen för webbapplikationer. Genom att använda Service Workers kan du intercepta nätverksanrop, modifiera dem vid behov och cacha svar för offline-funktionalitet och snabbare laddningstider. När de implementeras korrekt kan dessa tekniker hjälpa dig att bygga högpresterande, globalt tillgängliga webbapplikationer som ger en sömlös användarupplevelse, även under utmanande nätverksförhållanden. Ta hänsyn till de varierande nätverksförhållanden och datakostnader som användare världen över möter när du implementerar dessa tekniker för att säkerställa optimal tillgänglighet och inkludering. Prioritera alltid säkerhet för att skydda känslig data och förhindra sårbarheter.

Genom att bemästra dessa avancerade Fetch API-tekniker kan du ta dina webbutvecklingsfärdigheter till nästa nivå och bygga verkligt exceptionella webbapplikationer.