Նախքան ծրագրավորում սկսելը, ես միշտ մտածում էի, թե ինչպես են հավելվածները որոշակի կապ ունեն տվյալների բազայի հետ: Օրինակ կարող է լինել եղանակային հավելվածը, ինչպե՞ս կարող է հավելվածը նման մանրամասն տեղեկատվություն ստանալ: Հնարավո՞ր է, որ մշակողները ձեռքով գրի են առնում դրանք յուրաքանչյուր անցած օրվա համար, թե՞ նրանք ստանում են այս ամբողջ տեղեկատվությունը տվյալների վրա հիմնված հետնամասից որևէ այլ տեղից:
Այստեղ մենք կհասկանանք, թե ինչպես կարող է կիրառվել առբերման հարցումը տվյալների բազայից տվյալներ հանելու համար:
Ինչպե՞ս է աշխատում 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() մեթոդը գեղեցիկ գործիք է, որը թույլ է տալիս ծրագրավորողներին ունենալ բաց աշխարհ, որտեղ նրանք կարող են տվյալներ հավաքել ցանկացած հասանելի տվյալների բազայից: