Skicka en API POST-förfrågan med JavaScript med hjälp av Fetch

Förstå hur man skickar en API POST-förfrågan med Fetch

Skickar en POST-förfrågan är avgörande för datadelning och autentisering när du använder API:er. Det är ett pålitligt sätt att skicka HTTP-förfrågningar om du vet hur man använder JavaScript och hämta() teknik. Men att korrekt konstruera begäran kan ibland vara oklart, särskilt när man arbetar med rubriker som t.ex Tillstånd.

För att autentisera i detta fall måste du skicka en POST-förfrågan till en API-slutpunkt. Ovannämnda slutpunkt kräver en specifik struktur, som består av hashade referenser och en API-nyckel. Ändå stöter man ofta på misstag som liknar det du upplever, särskilt när man använder externa API:er som har snäva formateringskrav.

Den här artikeln kommer att visa hur man gör en POST-förfrågan med hjälp av hämta() metod korrekt. Vi kommer att diagnostisera möjliga problem och demonstrera rätt rubrikformat för att förhindra vanliga fel som "500 Internal Server Error" som du upplevde.

När du är klar vet du exakt hur du sätter ihop och skickar in ett JavaScript hämta POST-begäran, vilket garanterar att API:et kontaktas framgångsrikt och returnerar nödvändig data.

Förstå JavaScript Fetch API för POST-förfrågningar

Huvudfokus för de skript som tillhandahålls är att skicka en POST-förfrågan till ett API som använder JavaScript hämta() metod. Skicka lämpliga rubriker – särskilt Tillstånd header, som innehåller både en API-nyckel och hashade referenser – förblir den primära utmaningen. Dessa data förväntas av API:et som en bärartoken, som sedan överförs till servern för autentisering. Känsliga data, såsom inloggningsuppgifter, krypteras och skyddas vid kommunikation mellan klienten och servern med denna populära autentiseringsteknik.

När det gäller att skicka HTTP-förfrågningar är hämtningsmetoden väldigt flexibel. Den grundläggande hämtningsstrukturen används i det första skriptexemplet, där metod är inställd på 'POST'. Detta indikerar för API:et att data skickas i stället för att hämtas. I det här fallet rubriker objektet är viktigt eftersom det innehåller fältet Authorization, som är dit bärartokenet skickas. 'Content-Type: application/json' ingår också för att informera servern om att data överförs i JSON-format. Fel kan bero på serverns felaktiga tolkning av begäran i avsaknad av detta.

För att göra koden mer begriplig och renare introducerar vi asynkronisera/vänta syntax i det andra skriptet. Denna metod hjälper till att svara på förfrågningar som är asynkrona. Vi använder en prova/fånga blockera i stället för att kedja löften med sedan() och fånga(). Detta gör koden lättare att underhålla och effektiviserar felhanteringen. Om det finns ett problem med API-svaret identifierar vi det och registrerar ett grundligt meddelande. Detta är särskilt användbart för felsökning av fel som "500 Internal Server Error" som inträffade under den första begäran.

Hämtningslogiken är uppdelad i sin egen funktion i den tredje lösningen, som antar en mer modulär strategi och gör den återanvändbar. Vi implementerar också ett enkelt enhetstest som använder console.assert() för att avgöra om svaret på hämtningsförfrågan är korrekt. Du kan snabbt ändra funktionen för att använda alternativa API-slutpunkter eller autentiseringstekniker tack vare dess modulära struktur. På grund av dess inbyggda felhanteringsmöjligheter kan applikationen ändå erbjuda insiktsfull feedback även i händelse av att begäran misslyckas.

// Solution 1: Simple Fetch API with Authorization
const apiKey = 'your_api_key';
const hashedCredentials = 'your_hashed_credentials';
const url = 'https://authservice.priaid.ch/login?format=json';

fetch(url, {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${apiKey}:${hashedCredentials}`,
    'Content-Type': 'application/json'
  }
})
.then(response => {
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
})
.then(data => console.log('Success:', data))
.catch(error => console.error('Error:', error));

// Solution 2: Fetch with Detailed Error Handling
async function postData() {
  const apiKey = 'your_api_key';
  const hashedCredentials = 'your_hashed_credentials';
  const url = 'https://authservice.priaid.ch/login?format=json';
  
  try {
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${apiKey}:${hashedCredentials}`,
        'Content-Type': 'application/json'
      }
    });
    
    if (!response.ok) {
      throw new Error(`Error ${response.status}: ${response.statusText}`);
    }
    
    const data = await response.json();
    console.log('Success:', data);
  } catch (error) {
    console.error('Fetch Error:', error.message);
  }
}
  
postData();

// Solution 3: Modular Fetch Function with Unit Test
const fetchData = async (apiKey, hashedCredentials) => {
  const url = 'https://authservice.priaid.ch/login?format=json';
  
  try {
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${apiKey}:${hashedCredentials}`,
        'Content-Type': 'application/json'
      }
    });
    
    if (!response.ok) {
      throw new Error(`Error ${response.status}: ${response.statusText}`);
    }
    
    return await response.json();
  } catch (error) {
    return { success: false, message: error.message };
  }
};

// Unit Test
const testFetchData = async () => {
  const result = await fetchData('your_api_key', 'your_hashed_credentials');
  console.assert(result.success !== false, 'Test Failed: ', result.message);
  console.log('Test Passed:', result);
};

testFetchData();

Utökar API-autentisering och felhantering i hämtningsförfrågningar

Att arbeta med API:er kräver förståelse för hur rubriker och tokens hanteras, särskilt för de som kräver det autentisering. Det är vanligt att använda en bärare-token i Tillstånd header för API-begäran du försöker utföra. Genom att överföra krypterade autentiseringsuppgifter möjliggör denna teknik säker anslutning mellan din klient och API. Dina hashade referenser och API-nyckel ingår vanligtvis i bärartoken. Den måste formateras på lämpligt sätt för att förhindra problem som det interna serverfelet 500 du upplevde.

En avgörande del av att skicka in POST-förfrågningar med hjälp av hämta() verifierar att API:et kan ta emot det specifika formatet och typen av data som du tillhandahåller. För att hjälpa till att säkerställa att servern korrekt läser brödtexten i din begäran kan du använda 'Content-Type: application/json'. Ibland kan API:er behöva extra fält i POST-begäran, inklusive formulärdata eller frågeparametrar, vilket kanske inte framgick av dokumentationen från början.

Att utveckla tillförlitliga program som kommunicerar med externa API:er kräver noggrann övervägande av felhantering. Du kan ha ytterligare problem utöver 500-felet, till exempel 404-fel eller 400-fel relaterade till felaktig data eller felaktiga slutpunkter. Användning av en prova/fånga block, tillsammans med omfattande felmeddelanden och loggningssystem i din kod, kan hjälpa dig att diagnostisera och lösa dessa problem. Innan du införlivar förfrågningar i din kod är det alltid en bra idé att testa dem med program som Postman eller Curl för att se till att allt fungerar som det ska.