Օգտագործելով Fetch Vs Axios.Js-ը՝ HTTP հարցումներ կատարելու համար

JavaScript-ը կարող է ցանցային հարցումներ ուղարկել սերվեր և բեռնել նոր տեղեկատվություն, երբ դա անհրաժեշտ լինի: Օրինակ, մենք կարող ենք օգտագործել ցանցային հարցումը պատվեր ներկայացնելու, օգտատիրոջ տեղեկությունները բեռնելու, սերվերից վերջին թարմացումները ստանալու և այլնի համար: Եվ այդ ամենը առանց էջը վերաբեռնելու:

Fetch API-ն ապահովում է fetch() մեթոդը, որը սահմանված է պատուհանի օբյեկտի վրա, որն ապահովում է ռեսուրսները ասինխրոն ցանցով բեռնելու հեշտ, տրամաբանական եղանակ: Այն ապահովում է JavaScript ինտերֆեյս՝ HTTP խողովակաշարի մասերը մուտք գործելու և շահարկելու համար (հարցումներ և պատասխաններ):

Բերման հիմնական հարցումն իսկապես պարզ է կարգավորվում: Նայեք հետևյալ կոդը.

fetch(’http://example.com/task.json’)
  .then(response => response.json())
  .then(data => console.log(data))

fetch()-ի ամենապարզ օգտագործումը վերցնում է մեկ փաստարկ՝ այն ռեսուրսի ուղին, որը ցանկանում եք վերցնել, և վերադարձնում է խոստում, որը լուծում է այդ հարցման պատասխանին (հաջող է, թե ոչ): Սա պարզապես HTTP պատասխան է, այլ ոչ թե իրական JSON: Եթե ​​դուք օգտագործում եք fetch() , JSON տվյալները փոխանցելիս կա երկքայլ գործընթաց: Առաջինը պետք է կատարվի իրական հարցումը, իսկ հետո երկրորդը պետք է զանգի json() մեթոդը պատասխանի վրա: Դուք կարող եք կամայականորեն փոխանցել սկզբնական ընտրանքների օբյեկտը որպես երկրորդ փաստարկ (օգտագործվում է req վերնագրերը կազմաձևելու համար HTTP հարցումների այլ տեսակների համար, ինչպիսիք են PUT, POST, DELETE)

Տարբերությունը fetch()-ի և jQuery.ajax()-ի միջև

Fetch-ը նման է XMLHttpRequest-ին, սակայն նոր API-ն ապահովում է ավելի հզոր և ճկուն գործառույթների հավաքածու: fetch հատկանիշը jQuery.ajax()-ից ​​տարբերվում է հետևյալ կերպ.

• fetch()-ից վերադարձված խոստումը չի մերժի HTTP սխալի կարգավիճակը, նույնիսկ եթե պատասխանը լինի HTTP 404 կամ 500: Փոխարենը, այն կլուծվի սովորաբար (ok կարգավիճակը նշանակված է false-ով), և այն միայն կմերժի: ցանցի խափանման դեպքում կամ եթե որևէ բան խանգարեց հարցումն ավարտին հասցնել:
• fetch չի ուղարկի թխուկներ, քանի դեռ չեք սահմանել հավատարմագրերը սկզբնական տարբերակը:

Axios-ը Javascript գրադարան է, որն օգտագործվում է HTTP հարցումներ node.js-ից կամ XMLHttpRequests բրաուզերից կատարելու համար, և այն աջակցում է Promise API-ին, որը բնօրինակ է JS ES6-ի համար: Այն կարող է օգտագործվել HTTP հարցումներն ու պատասխանները ընդհատելու համար և հնարավորություն է տալիս հաճախորդի կողմից պաշտպանություն XSRF-ից: Այն ունի նաև հարցումները չեղարկելու հնարավորություն:

Տեղադրում

Դուք պետք է տեղադրեք axios՝ օգտագործելով.

$ npm install axios

Կամ բովանդակության առաքման ցանց

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Axios հարցումը պարզ է կարգավորվում: Նայեք հետևյալ կոդը.

axios.get('https://api.tasks.com/v1/artists/0OdUWJ0sBjDrqHygGUX')
  .then(function(response) {
       console.log(response)
  })
  .catch(function(error) {
       console.log(error)
  })

Այսպիսով, օգտագործելով axios, դուք կարող եք կտրել http հարցման արդյունքները .json() մեթոդին փոխանցելու միջին քայլը: Axios-ը պարզապես վերադարձնում է տվյալների օբյեկտը, որը դուք ակնկալում եք:

Տարբերությունը fetch()-ի և axios-ի միջև

• Fetch API-ն ներկառուցված է պատուհանի օբյեկտի մեջ և, հետևաբար, կարիք չունի տեղադրել որպես կախվածություն կամ ներմուծել հաճախորդի կողմի կոդը:
• Axios-ը պետք է տեղադրվի որպես կախվածություն: Այնուամենայնիվ, այն ավտոմատ կերպով փոխակերպում է JSON-ի տվյալները ձեզ համար՝ դրանով իսկ խուսափելով .fetch() հարցում կատարելու երկքայլ գործընթացից, այնուհետև պատասխանի վրա .json() մեթոդին երկրորդ զանգից:
• Axios-ի միջոցով http հարցումով ստացված ցանկացած սխալ կկարգավորվի, և .catch() բլոկը կկատարվի:
• Axios-ը թույլ է տալիս չեղարկել հարցումը և հարցումների ժամանակի վերջնաժամկետըիսկ բեռնումը` ոչ:
• Axios-ն ունի լայն բրաուզերի աջակցություն,որտեղ որպեսFetch-ն աջակցում է միայն Chrome 42+, Firefox 39+, Edge 14+ և Safari 10.1+ (սա հայտնի է որպես Հետադարձ Համատեղելիություն):

fetch() մեթոդը ժամանակակից և բազմակողմանի է ES6-ում http հարցումները ստանալու համար, սակայն Axios-ի նման երրորդ կողմի գրադարանների օգտագործմամբ որոշ սցենարներ կարող են ավելի լավ կարգավորվել:

Հուսով եմ, որ դուք հիմա ավելի լավ պատկերացում ունեք fetch()-ի հիմնական օգտագործման մասին Vs axios Vs jQuery.ajax(-ի): Եթե ​​դեռ որևէ շփոթություն ունեք, տեղեկացրեք ինձ մեկնաբանություններում: