Објашњено АПИ за преузимање ЈаваСцрипта

by
Tweet
Share
Share
Pin

ЈаваСцрипт Фетцх АПИ пружа интуитиван начин за слање захтева од клијента апликације који се покреће у прегледачу.

Једноставан је за коришћење и користи модерну ЈаваСцрипт синтаксу. Овај чланак је водич о томе како да користите Фетцх АПИ.

Шта је ЈаваСцрипт АПИ за преузимање?

ЈаваСцрипт Фетцх АПИ је интерфејс који савремени претраживачи пружају за прављење захтева са предњег дела. Пружа алтернативу старијем АЈАКС КСМЛХттпРекуест.

Доступна је као глобална функција која се зове дохвати. Када се позове са аргументима, ова функција враћа обећање које се решава у одговору. Помоћу функције преузимања можете направити све врсте ХТТП захтева.

Предности Фетцх АПИ-ја у односу на друге методе

  • Има једноставнији и интуитивнији интерфејс који је лак за учење и коришћење. Као резултат тога, ваш код постаје чишћи када користите Фетцх АПИ. КСМЛХттпРекуест је компликованији и ваш код није тако чист као када користите Фетцх АПИ.
  • Подржава обећања, што вам омогућава да јасније пишете асинхрони код. КСМЛХттпРекуест их не подржава; уместо тога, морате додати повратне позиве руковаоцима догађаја. У зависности од ваших жеља, можда ћете више волети АПИ за преузимање ЈаваСцрипта.
  • Изворно је подржан у претраживачу. То значи да не морате да додајете додатне библиотеке да бисте постављали захтеве. Додатне библиотеке ће повећати ваш ЈаваСцрипт пакет и успорити вашу веб локацију.

Коришћење АПИ-ја за преузимање

Овај одељак ће покрити прављење различитих захтева коришћењем АПИ-ја за преузимање ЈаваСцрипт-а. Да бисте написали код, можете користити било који уређивач који желите. Само се уверите да сте покренули код у претраживачу. Покренућу га унутар ознаке скрипте у ХТМЛ датотеци.

  7 најбољих платформи за визуелну корисничку подршку за бољи ангажман

Једноставан ГЕТ захтев

Прво ћемо научити да направимо једноставан захтев за добијање. Код за то следи ову структуру:

fetch(url)

Стога, ако желимо да преузмемо постове са ЈСОН Плацехолдер АПИурадили бисте то на следећи начин:

fetch('https://jsonplaceholder.typicode.com/posts');

Позив функције ће вратити обећање, решавајући АПИ одговор или грешку ако је наишла. Стога, да бисмо приступили одговору, користићемо кључну реч аваит. Али кључну реч аваит можемо користити само у асинхроној функцији.

Дакле, умотаћемо функцију преузимања асинхронизованом функцијом и позвати је. Ако нисте упознати са свим овим, ево детаљног водича за асинхрони ЈаваСцрипт. У сваком случају, код:

async function getData() {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    console.log(response);
}

getData();

Ако покренете горњи код, требало би да добијете следећи излаз у свом излазу.

Излаз показује да је функција преузимања вратила објекат Одговора. Овај објекат има својства која укључују статус, заглавља и тело. Подаци одговора се чувају као ЈСОН стринг у телу. Због тога морамо издвојити стринг и рашчланити ЈСОН да бисмо добили податке као ЈаваСцрипт објекат.

Срећом, објекат Респонсе има практичан метод који се зове јсон(). Овај метод чита тело одговора и покушава да рашчлани стринг као ЈСОН. Враћа обећање које се решава у објекат рашчлањен из ЈСОН-а.

Међутим, овај метод ће изазвати грешку ако тело није важећи ЈСОН стринг. Према томе, требало би да анализирамо ЈСОН само ако одговор има статусни код 200.

Дакле, код за добијање постова ће бити следећи:

async function getData() {
    const response = await fetch(
        "https://jsonplaceholder.typicode.com/posts"
    );

    if (response.status == 200) {
        const posts = await response.json();
        console.log(posts);
    } else {
        console.log("Something went wrong:", response.status);
    }
}
getData();

Покретање горњег кода ће дати следеће резултате:

  10 најбољих партнерских мрежа за придруживање и зараду

Ово је низ од сто постова.

Неке крајње тачке АПИ-ја захтевају заглавља. Ова заглавља се могу користити за ауторизацију, на пример. ЈаваСцрипт Фетцх АПИ пружа једноставан начин за слање заглавља као дела захтева. Морате проследити аргумент опција позиву функције преузимања да бисте навели заглавља.

fetch(url, options);

Дакле, наш претходни пример би сада изгледао овако:

async function getData() {
    const response = await fetch(
        "https://jsonplaceholder.typicode.com/posts", {
             headers: {
                 'x-auth': '<your auth token>'
             }
         }
    );

    if (response.status == 200) {
        const posts = await response.json();
        console.log(posts);
    } else {
        console.log("Something went wrong:", response.status);
    }
}
getData();

Пошто ЈСОНПлацехолдер АПИ не захтева заглавље ауторизације, горњи код ће радити као и раније. Међутим, важно је знати да опција за прослеђивање заглавља постоји.

Прелазак у Друге опције

Поред прослеђивања заглавља, можете проследити многе друге опције функцији преузимања. Две опције које ћете много проћи су метода захтева и опције тела захтева.

Направићемо ПОСТ захтев АПИ-ју ЈСОНПлацехолдер да бисмо демонстрирали њихово прослеђивање. Ево кода за то:

async function getData() {
    const response = await fetch(
        "https://jsonplaceholder.typicode.com/posts", {
             method: 'POST',
             body: JSON.stringify({ 
                 title: 'Fetch API',
                 body: 'Lorem Ipsum',
                 userId: 1,
             })
        }
    );

    if (response.status == 200) {
        const posts = await response.json();
        console.log(posts);
    } else {
        console.log("Something went wrong:", response.status);
    }
}
getData();

У нашем објекту опција, навели смо метод захтева који желимо да користимо и тело као својства. За оба својства дали смо стринг аргументе. Дали смо стринг ‘ПОСТ’ за метод захтева пошто желимо да направимо ПОСТ захтев. Такође смо обезбедили ЈСОН стринг за својство тела. Овај ЈСОН стринг се формира стрингификовањем објекта са потребним својствима.

Покретање овог кода у претраживачу даје следећи излаз:

  6 Најбоља инфраструктура за обавештења за модерне апликације

Излаз је објекат који садржи ИД који смо управо примили од сервера. Овде је велики ресурс за потпуну листу опција које можете да пренесете.

Грешке приликом коришћења ЈаваСцрипт АПИ-ја за преузимање

#1. Мрежне грешке

Приликом постављања мрежних захтева, уобичајено је да наиђете на грешке. Функција преузимања враћа обећање које се решава до резултата или одбија када се наиђе на грешку на мрежи. Због тога морамо умотати наш код у блок три/цатцх. За елегантно руковање мрежним грешкама.

#2. Друге грешке

Поред мрежних грешака, можете наићи и на друге грешке, као што су 404с, 403с и 500с. Функција преузимања не даје грешку када се наиђу на такве грешке. Због тога их морате проверити тако што ћете проверити код статуса одговора. На пример, у претходним примерима, покушали смо да рашчланимо тело одговора само када је статусни код био 200.

#3. ЦОРС Грешке

Друге уобичајене грешке на које ћете наићи су ЦОРС грешке. ЦОРС је скраћеница за дељење ресурса са више извора. Оригин је јединствена комбинација серверског протокола, хоста и порта. На пример, моја веб локација може да ради на локалном хосту, хосту, на порту 5500, порту, и да се служи преко ХТТП-а, протокола. Према томе, порекло те веб локације би било хттп://лоцалхост:5500.

Иста веб локација ће упутити АПИ захтев хттпс://јсонплацехолдер.типицоде.цом АПИ-ју, другог порекла. Према томе, ова два извора, лоцалхост и ЈСОНПлацехолдер, деле ресурсе. То је дељење ресурса са више извора. Међутим, АПИ сервер треба да омогући ЦОРС да ово функционише. Ово није увек случај. Решење за руковање таквим грешкама би било слање захтева преко прокси сервера са омогућеним ЦОРС-ом.

Подршка претраживача

АПИ за преузимање је прилично модерна функција. Према ЦанИУсе.цомоко 95% глобалних корисника има претраживаче који то подржавају.

Закључак

ЈаваСцрипт Фетцх АПИ је синтактички бољи и елегантнији начин за писање фронтендова који постављају АПИ захтеве. С обзиром на ограничену подршку претраживача, можда бисте размотрили друге ХТТП клијентске библиотеке.