API POST -pyynnön lähettäminen JavaScriptillä Fetchillä

API POST -pyynnön lähettäminen Fetchillä

Lähettäminen a POST-pyyntö on välttämätön tietojen jakamisessa ja todentamisessa sovellusliittymiä käytettäessä. Se on luotettava tapa lähettää HTTP-pyyntöjä, jos osaat käyttää JavaScriptiä ja hae() tekniikka. Pyynnön tarkka rakentaminen voi kuitenkin toisinaan olla epäselvää, varsinkin kun käsitellään otsikoita, kuten Valtuutus.

Todentaaksesi tässä tapauksessa sinun on lähetettävä a POST-pyyntö API-päätepisteeseen. Edellä mainittu päätepiste vaatii erityisen rakenteen, joka koostuu hajautetuista tunnistetiedoista ja API-avain. Silti samankaltaisia ​​virheitä kohdataan usein, etenkin käytettäessä ulkoisia sovellusliittymiä, joilla on tiukat muotoiluvaatimukset.

Tämä artikkeli osoittaa, kuinka tehdä a POST-pyyntö käyttämällä hae() menetelmä oikein. Diagnosoimme mahdolliset ongelmat ja esittelemme oikean otsikkomuodon estääksemme yleiset virheet, kuten kohtaamasi "500 Internal Server Error".

Kun olet valmis, tiedät tarkalleen, kuinka koota ja lähettää JavaScript nouta POST-pyyntö, joka takaa, että API on onnistuneesti yhteydessä ja palauttaa tarvittavat tiedot.

JavaScript Fetch API POST-pyyntöjä varten

Toimitettujen skriptien pääpaino on a POST-pyyntö API:lle JavaScriptiä käyttämällä hae() menetelmä. Lähettämällä sopivat otsikot - erityisesti Valtuutus otsikko, joka sisältää sekä API-avaimen että hajautetut tunnistetiedot – on edelleen ensisijainen haaste. API odottaa näitä tietoja Bearer-tunnuksena, joka lähetetään myöhemmin palvelimelle todennusta varten. Arkaluontoiset tiedot, kuten valtuustiedot, salataan ja suojataan, kun asiakkaan ja palvelimen välillä viestitään tällä suosittulla todennustekniikalla.

HTTP-pyyntöjen lähettämisessä hakumenetelmä on erittäin joustava. Perushakurakennetta käytetään ensimmäisessä komentosarjaesimerkissä, jossa menetelmä asetukseksi on asetettu POST. Tämä osoittaa API:lle, että tietoja lähetetään sen sijaan, että niitä haetaan. Tässä tapauksessa otsikot Objekti on olennainen, koska se sisältää valtuutuskentän, johon siirtotietunnus lähetetään. "Content-Type: application/json" on myös mukana ilmoittamaan palvelimelle, että tiedot lähetetään JSON-muodossa. Virheet voivat johtua siitä, että palvelin tulkitsee pyynnön väärin, jos tätä ei ole tehty.

Jotta koodista tulee ymmärrettävämpi ja selkeämpi, esittelemme async/wait syntaksi toisessa skriptissä. Tämä menetelmä auttaa vastaamaan asynkronisiin pyyntöihin. Käytämme a kokeile / ota kiinni esto lupausten ketjuttamisen sijaan sitten() ja saalis(). Tämä helpottaa koodin ylläpitoa ja virtaviivaistaa virheiden käsittelyä. Jos API-vastauksessa on ongelma, tunnistamme sen ja tallennamme perusteellisen viestin. Tämä on erityisen hyödyllinen vianetsinnässä virheiden, kuten "500 Internal Server Error" -virheen yhteydessä, joka tapahtui ensimmäisen pyynnön aikana.

Hakulogiikka on jaettu omaan toimintoonsa kolmannessa ratkaisussa, joka omaksuu modulaarisemman strategian ja tekee siitä uudelleen käytettävän. Toteutamme myös yksinkertaisen yksikkötestin, joka käyttää console.assert() määrittääkseen, onko vastaus hakupyyntöön oikea. Voit nopeasti muokata toimintoa käyttämään vaihtoehtoisia API-päätepisteitä tai todennustekniikoita sen modulaarisen rakenteen ansiosta. Sisäänrakennettujen virheenkäsittelyominaisuuksiensa ansiosta sovellus voi kuitenkin tarjota oivaltavaa palautetta myös siinä tapauksessa, että pyyntö epäonnistuu.

// 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();

Sovellusliittymän todennuksen ja virheenkäsittelyn laajentaminen hakupyynnöissä

Sovellusliittymien kanssa työskentely edellyttää ymmärrystä siitä, miten otsikot ja tunnisteet hallitaan, erityisesti niiltä, ​​jotka sitä vaativat todennus. On tapana käyttää Bearer-merkkiä Valtuutus sen API-pyynnön otsikko, jota yrität suorittaa. Lähettämällä salattuja tunnistetietoja tämä tekniikka mahdollistaa suojatun yhteyden asiakkaasi ja API:n välillä. Hajautetut tunnistetietosi ja API-avaimesi sisältyvät yleensä siirtotietunnukseen. Se on muotoiltava asianmukaisesti, jotta vältetään ongelmat, kuten 500:n sisäinen palvelinvirhe.

Tärkeä osa POST-pyyntöjen lähettämistä käyttämällä hae() varmistaa, että API pystyy vastaanottamaan antamasi tietyn muodon ja tyyppisiä tietoja. Voit varmistaa, että palvelin lukee pyyntösi tekstin oikein, käyttämällä "Content-Type: application/json"-komentoa. Toisinaan sovellusliittymät saattavat tarvita ylimääräisiä kenttiä POST-pyynnön rungossa, mukaan lukien lomaketiedot tai kyselyparametrit, jotka eivät ehkä selvinneet dokumentaatiosta aluksi.

Luotettavien ohjelmien kehittäminen, jotka kommunikoivat ulkoisten sovellusliittymien kanssa, vaatii virheenhallinnan huolellista harkintaa. Sinulla voi olla muita ongelmia 500-virheen lisäksi, kuten 404-virheitä tai 400-virheitä, jotka liittyvät virheellisiin tietoihin tai vääriin päätepisteisiin. Käyttö a kokeile / ota kiinni esto sekä koodisi kattavat virheilmoitukset ja lokijärjestelmät voivat auttaa näiden ongelmien diagnosoinnissa ja ratkaisemisessa. Ennen kuin sisällytät pyyntöjä koodiisi, on aina hyvä idea testata niitä ohjelmilla, kuten Postman tai Curl, varmistaaksesi, että kaikki toimii niin kuin pitää.