Једноставни ХТТП захтеви у ЈаваСцрипт-у помоћу Акиоса

Да ли сте заинтересовани за учење ЈаваСцрипт-а? Набавите моју е-књигу на јсхандбоок.цом

Увод

Акиос је веома популарна ЈаваСцрипт библиотека коју можете користити за извршавање ХТТП захтева. Ради на платформи Бровсер и Ноде.јс.

Ис подржава све модерне прегледаче, укључујући ИЕ8 и новије верзије.

Заснован је на обећањима, а ово нам омогућава да напишемо асинхроно / чекајући код за врло лако извршавање КСХР захтева.

Коришћење Акиоса има доста предности у односу на изворни Фетцх АПИ:

  • подржава старије прегледаче (Фетцх-у треба полифил)
  • има начин да прекине захтев
  • има начин да одреди временско ограничење одговора
  • има уграђену ЦСРФ заштиту
  • подржава напредак у отпремању
  • врши аутоматску ЈСОН трансформацију података
  • ради у Ноде.јс-у

Инсталација

Акиос се може инсталирати помоћу нпм:

npm install axios

или предиво:

yarn add axios

или га једноставно укључите на своју страницу користећи унпкг.цом:

АПИ Акиос

Можете покренути ХТТП захтев са axiosобјекта:

axios({ url: '//dog.ceo/api/breeds/list/all', method: 'get', data: { foo: 'bar' }})

али ради погодности, обично ћете користити

  • axios.get()
  • axios.post()

(као у јКуери-у, користили бисте $.get()и $.post()уместо $.ajax())

Акиос нуди методе за све ХТТП глаголе, који су мање популарни, али се и даље користе:

  • axios.delete()
  • axios.put()
  • axios.patch()
  • axios.options()

Такође нуди метод за добијање ХТТП заглавља захтева, одбацујући тело.

ГЕТ захтеве

Један од погодних начина за коришћење Акиоса је коришћење савремене синтаксе асинхронизације / чекања (ЕС2017).

Овај пример Ноде.јс поставља упит АПИ-ју за псе да би дохватио листу свих паса паса користећи axios.get()их и он их броји:

const axios = require('axios')const getBreeds = async () => { try { return await axios.get('//dog.ceo/api/breeds/list/all') } catch (error) { console.error(error) }}const countBreeds = async () => { const breeds = await getBreeds() if (breeds.data.message) { console.log(`Got ${Object.entries(breeds.data.message).length} breeds`) }}countBreeds()

Ако не желите да користите асинц / аваит, можете користити синтаксу Промисес:

const axios = require('axios')const getBreeds = () => { try { return axios.get('//dog.ceo/api/breeds/list/all') } catch (error) { console.error(error) }}const countBreeds = async () => { const breeds = getBreeds() .then(response => { if (response.data.message) { console.log( `Got ${Object.entries(response.data.message).length} breeds` ) } }) .catch(error => { console.log(error) })}countBreeds()

Додајте параметре у ГЕТ захтеве

ГЕТ одговор може садржати параметре у УРЛ-у, попут овог //site.com/?foo=bar:.

Са Акиос-ом то можете да урадите једноставним коришћењем те УРЛ адресе:

axios.get('//site.com/?foo=bar')

или можете да користите paramsсвојство у опцијама:

axios.get('//site.com/', { params: { foo: 'bar' }})

ПОСТ Захтеви

Извршење ПОСТ захтева је исто као и ГЕТ захтев, али уместо тога axios.getкористите axios.post:

axios.post('//site.com/')

Објект који садржи ПОСТ параметре је други аргумент:

axios.post('//site.com/', { foo: 'bar' })
Да ли сте заинтересовани за учење ЈаваСцрипт-а? Набавите моју е-књигу на јсхандбоок.цом