Նախքան ծրագրավորում սկսելը, ես միշտ մտածում էի, թե ինչպես են հավելվածները որոշակի կապ ունեն տվյալների բազայի հետ: Օրինակ կարող է լինել եղանակային հավելվածը, ինչպե՞ս կարող է հավելվածը նման մանրամասն տեղեկատվություն ստանալ: Հնարավո՞ր է, որ մշակողները ձեռքով գրի են առնում դրանք յուրաքանչյուր անցած օրվա համար, թե՞ նրանք ստանում են այս ամբողջ տեղեկատվությունը տվյալների վրա հիմնված հետնամասից որևէ այլ տեղից:

Այստեղ մենք կհասկանանք, թե ինչպես կարող է կիրառվել առբերման հարցումը տվյալների բազայից տվյալներ հանելու համար:

Ինչպե՞ս է աշխատում Fetch API-ն:

Վերբեռնման հարցումը վերցնում է մեկ փաստարկ, սովորաբար հղում, որը մուտք է գործում տվյալների բազա: Այն վերադարձնում է խոստում, որը սպասում է այդ խնդրանքի պատասխանին:

Պատասխանը ստանալուց հետո տվյալները կարող են քաշվել՝ պատասխանը վերածելով Javascript-ի համար ընթեռնելի ֆայլի:

Քայլեր

1. Ուղարկեք URL առբերման գործառույթին

fetch("https://jsonplaceholder.typicode.com/todos")

Խոստում է տրվել, սակայն արձագանքի կարիք ունի։

2. Առբերեք պատասխանը՝ օգտագործելով .thenը

fetch("https://jsonplaceholder.typicode.com/todos")
.then(res => console.log(res.ok)) //true

Թվում է, թե մեր պատասխանը կատարվել է, այժմ մենք կարող ենք մեր չմշակված պատասխանի տվյալները վերածել Javascript-ի համար ընթեռնելի ձևաչափի:

3. Փոխակերպեք չմշակված պատասխանի ֆայլը

fetch("https://jsonplaceholder.typicode.com/todos")
.then(res => res.json())

Մենք ֆայլը վերածել ենք մեր ուզածի, բայց դեռ չունենք մեր ուզած տվյալները:

4. Ավելացրե՛ք երկրորդ .այնուհետև՝ մեր փոխակերպված պատասխան ֆայլից տվյալներ ստանալու համար

fetch("https://jsonplaceholder.typicode.com/todos")
.then(res => res.json())
.then(data => console.log(data))
//[{userId: 1, id: 1, title: 'delectus aut autem', completed: false}, ...]

Կան շատ բաներ, որոնք կարելի է անել այս տվյալների հետ՝ հիմնվելով մեր առբերման խնդրանքի վրա, ինչը դարձնում է այն գեղեցիկ գործիք՝ որպես մշակող օգտագործելու համար:

Բերման ընտրանքներ

Վերոնշյալ օրինակն ընդգրկում է առբերման պարզ մոտեցումը, այնուամենայնիվ, կան լրացուցիչ ընտրանքներ, որոնցից կարող է օգտվել fetch ֆունկցիան: Այն կարող է վերցնել երկրորդ պարամետր, օբյեկտ, որը պարունակում է մի շարք տարբերակներ:

Մեթոդ

Այս տարբերակը թույլ է տալիս փոխել բայերը 5 տեսակի հարցումների միջև: GET, POST, PUT, PATCH, DELETE, ինչը նշանակում է կարդալ, ստեղծել, թարմացնել և ջնջել:

Առանց մեթոդի, Javascript-ը ավտոմատ կերպով կարդում է այն որպես GET հարցում, ինչպես ցույց է տրված մեր առբերման հարցումը մինչ այս օրինակը:

fetch("https://jsonplaceholder.typicode.com/todos", {
    method: "POST"
})

Վերնագրեր

Վերնագրերը վերցնում են օբյեկտ, որը հաղորդակցվում է API-ի հետ, թե ինչ տեսակի ֆայլ է հասցեագրված: Այս դեպքում ուղարկվում է JSON ֆայլ, այստեղից էլ՝ հավելված/json ձևակերպումը։

fetch("https://jsonplaceholder.typicode.com/todos", {
    method: "POST",
    headers: {
    "Content-Type": "application/json"
    }
})

Մարմին

Եթե ​​դուք նախատեսում եք փոխել մեթոդը, օրինակ՝ POST (ստեղծել), ապա այն պետք է նոր տվյալներ ստեղծվի տվյալների բազայում: Այստեղ օգտագործվում է «մարմին» տարբերակը:

Այս տարբերակն օգտագործելիս ամենապրակտիկ միջոցը մեր JSON ֆայլը տողի վերածելն է, քանի որ մարմինը օբյեկտներ չի ընդունում:

fetch("https://jsonplaceholder.typicode.com/todos", {
    method: "POST",
    headers: {
    "Content-Type": "application/json"
    },
    body: JSON.stringify({title: "example"})
})

Ընդհանուր խնդիրներ

Առբերման հարցումից սխալ ստանալը կարող է բավականին նյարդայնացնել, ուստի ես բաժանեցի մի քանի հնարավորություններ, թե ինչու հարցումը չի աշխատում:

Սխալ URL

Հաճախ հեշտ է երկար և խառնաշփոթ URL-ը թերի պատճենել և տեղադրել: Պարզապես համոզվեք, որ դուք կրկնակի ստուգել եք URL-ը, նախքան որևէ այլ բան անելը:

API-ն անջատված է

Դա հաճախ չի պատահում, բայց եթե վահանակը ձեզ ասում է, որ սերվերը անջատված է, ազատ զգալ ստուգեք այնպիսի կայքեր, ինչպիսիք են https://downdetector.com/-ը՝ տեսնելու, թե արդյոք ձեր օգտագործած API-ն սպասարկվում է:

Օգտագործելով անվավեր թույլտվություն

Եթե ​​դուք օգտագործում եք ավելի առաջադեմ API, նրանք կարող են պահանջել թույլտվություն, առանց դրա, ամենայն հավանականությամբ, դա ձեզ սխալ կառաջացնի:

Եզրակացություն

Fetch() մեթոդը գեղեցիկ գործիք է, որը թույլ է տալիս ծրագրավորողներին ունենալ բաց աշխարհ, որտեղ նրանք կարող են տվյալներ հավաքել ցանկացած հասանելի տվյալների բազայից: