Supabase som Backend as a Service · Lektion

Integrera funktioner med applikationen

Lär er anropa era distribuerade Edge Functions från klientapplikationen och behandla deras svar.

Lektion 3 av 412 steg

Integrera funktioner med applikationen är en gratis lektion i Supabase som Backend as a Service på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Supabase som Backend as a Service, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Supabase som Backend as a Service innehåller totalt 4 lektioner.

Anropa Era Edge Functions

Ni har lärt Er att distribuera Edge Functions. Nu kopplar vi dem till Er klientapplikation! Det är här Er app verkligen blir dynamisk.

Genom att integrera funktioner kan Er app utlösa logik på serversidan, bearbeta data eller kommunicera med externa tjänster utan att Ni behöver hantera en dedikerad backendserver.

Så kommunicerar klienter med funktioner

Supabase Edge Functions är i grunden HTTP-endpoints. Er klientapplikation kommunicerar med dem genom att skicka vanliga HTTP-begäranden.

Supabase-klientbiblioteket förenklar processen och erbjuder ett smidigt sätt att anropa Era distribuerade funktioner direkt från JavaScript, TypeScript eller andra klientmiljöer som stöds.

Metoden `invoke()`

Den huvudsakliga metoden för att anropa en Edge Function från klienten är supabase.functions.invoke().

Den tar två huvudargument:

Funktionsnamn: Namnet på Er distribuerade Edge Function.
Options-objekt (valfritt): Ett objekt för att skicka data (payload) eller konfigurera begäran.

Grundläggande anropssyntax

Vi ska titta på den grundläggande strukturen för att anropa en Edge Function utan att skicka några specifika data. Ofta använder Ni async/await för att få asynkron kod som är enklare att läsa.

Anropa en Hello-funktion

Anta att Ni har en enkel Edge Function med namnet 'hello-world' som bara returnerar meddelandet ”Hello!”. Så här anropar Ni den:

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = 'YOUR_SUPABASE_URL'
const supabaseAnonKey = 'YOUR_SUPABASE_ANON_KEY'

const supabase = createClient(supabaseUrl, supabaseAnonKey)

async function callHelloWorld() {
  try {
    const { data, error } = await supabase.functions.invoke('hello-world')
    if (error) {
      console.error('Error:', error.message)
    } else {
      console.log('Response:', data)
    }
  } catch (err) {
    console.error('Network error:', err.message)
  }
}

// Call the function to see the output
callHelloWorld()

Skicka data till funktioner

De flesta funktioner i verkliga tillämpningar behöver indata. Ni kan skicka en JSON-payload till Er Edge Function med egenskapen body i options-objektet.

body blir tillgänglig i Er Edge Function via request-objektet.

Anropa med en payload

Anta att Ni har en funktion som heter 'greet-user' och förväntar sig ett name. Så här skickar Ni dessa data:

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = 'YOUR_SUPABASE_URL'
const supabaseAnonKey = 'YOUR_SUPABASE_ANON_KEY'

const supabase = createClient(supabaseUrl, supabaseAnonKey)

async function callGreetUser(userName) {
  try {
    const { data, error } = await supabase.functions.invoke('greet-user', {
      body: { name: userName }
    })
    if (error) {
      console.error('Error:', error.message)
    } else {
      console.log('Greeting:', data)
    }
  } catch (err) {
    console.error('Network error:', err.message)
  }
}

// Try it with your name!
callGreetUser('Coddy')

Hantera funktionssvar

När Ni anropar en Edge Function returnerar anropet supabase.functions.invoke() ett objekt som innehåller egenskaperna data och error.

data: Innehåller det lyckade svaret från Er funktion.
error: Innehåller information om ett fel uppstod under anropet eller i själva funktionen.

Bearbeta svaret

Det är viktigt att kontrollera om fel har uppstått och hantera både lyckade och misslyckade resultat. Er klientapplikation bör hantera dessa scenarier på ett smidigt sätt.

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = 'YOUR_SUPABASE_URL'
const supabaseAnonKey = 'YOUR_SUPABASE_ANON_KEY'

const supabase = createClient(supabaseUrl, supabaseAnonKey)

async function processResponseExample() {
  const payload = { item: 'book', quantity: 2 }
  try {
    const { data, error } = await supabase.functions.invoke('process-order', {
      body: payload
    })

    if (error) {
      console.error('Order processing failed:', error.message)
      // Display an error message to the user
    } else {
      console.log('Order processed successfully:', data)
      // Update UI with success message or results
    }
  } catch (networkError) {
    console.error('Network or unexpected error:', networkError.message)
    // Handle connectivity issues
  }
}

processResponseExample()

Felhantering och bästa praxis

Implementera alltid robust felhantering. Supabase-metoden invoke fångar nätverksfel i blocket catch och funktionsspecifika fel i det returnerade error-objektet.

Validering på klientsidan: Validera indata innan den skickas.
Återkoppling till användaren: Visa laddningsstatus, lyckade meddelanden eller tydliga felmeddelanden.
Loggning: Logga fel för felsökning.

Frågesport om funktionsanrop

Ni anropar en Edge Function med namnet 'calculate-total' och skickar JSON-objektet { price: 10, quantity: 3 }. Vilket av följande kodavsnitt anropar funktionen korrekt och hanterar ett eventuellt fel?

Besvara frågan i den interaktiva lektionen

Funktioner i Er app

Bra jobbat! Ni har lärt Er att integrera Supabase Edge Functions i Era klientapplikationer.

Använd supabase.functions.invoke() för att anropa funktioner.
Skicka data med egenskapen body i options-objektet.
Hantera alltid både lyckade svar i data och eventuella svar i error.

Med dessa kunskaper kan Ni bygga dynamiska, interaktiva funktioner som drivs av serverlös logik direkt från Er app!

Gratis att börja

Lär dig Supabase som Backend as a Service med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 11
Lektioner: 40

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Integrera funktioner med applikationen” gratis?

Ja – hela texten till ”Integrera funktioner med applikationen” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Supabase som Backend as a Service, kan Ni uppgradera till CoddyKit PRO. Kursen i Supabase som Backend as a Service innehåller totalt 4 lektioner.

Vad lär jag mig i ”Integrera funktioner med applikationen”?

Lär er anropa era distribuerade Edge Functions från klientapplikationen och behandla deras svar. Ni övar på Supabase som Backend as a Service med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Supabase som Backend as a Service?

Du behöver inga förkunskaper. Utbildningen i Supabase som Backend as a Service på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Integrera funktioner med applikationen”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Supabase som Backend as a Service-lektionen?

Ja. Varje Supabase som Backend as a Service-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Introduktion till Edge Functions
Distribuera er första funktion
Integrera funktioner med applikationen
Hemligheter, miljövariabler och schemalagda funktioner

← Tillbaka till Supabase som Backend as a Service