Один и тот же вызов API POST в различных библиотеках JavaScript

Я тестировал API с использованием Insomnia , очень классное приложение, которое позволяет выполнять HTTP-запросы к службам API REST или API GraphQL.

У них есть хорошая кнопка, которая генерирует код для копирования запроса API из приложения, где вы визуально оформляете все данные запроса.

Внутренне он использует https://github.com/Kong/httpsnippet который является генератором фрагментов HTTP-запросов для многих языков и библиотек, написанных на JavaScript. Очень классный проект.

В любом случае, в экспорте было несколько фрагментов кода. Я хочу показать один и тот же вызов API в разных библиотеках.

Во-первых, вот описание вызова API. Я делаю запрос на публикацию в api.randomservice.com веб-сайт (это случайный URL-адрес, который я только что придумал) к конечной точке /собака .

На эту конечную точку я отправляю объект с 2 свойствами:

{
  name: 'Roger',
  age: 8
}

кодируется как JSON.

Я также передаю тип содержимого , чтобы установить содержимое как приложение/json и заголовок authorization для аутентификации моего запроса с помощью токена на предъявителя, который мне был назначен через панель мониторинга API.

XHR

Первый пример кода – XHR , который мы можем использовать как в браузере изначально, так и в Node.js использование https://www.npmjs.com/package/xmlhttprequest :

const data = JSON.stringify({
  name: 'Roger',
  age: 8
})

const xhr = new XMLHttpRequest()
xhr.withCredentials = true

xhr.addEventListener('readystatechange', function() {
  if (this.readyState === this.DONE) {
    console.log(this.responseText)
  }
})

xhr.open('POST', 'https://api.randomservice.com/dog')
xhr.setRequestHeader('content-type', 'application/json')
xhr.setRequestHeader('authorization', 'Bearer 123abc456def')

xhr.send(data)

API выборки

Затем у нас есть тот же код, использующий Fetch API , другой API, изначально доступный в браузере и в Node.js использование Затем у нас есть тот же код, использующий Fetch API

fetch('https://api.randomservice.com/dog', {
  method: 'POST',
  headers: {
    'content-type': 'application/json',
    authorization: 'Bearer 123abc456def'
  },
  body: {
    name: 'Roger',
    age: 8
  }
})
  .then(response => {
    console.log(response)
  })
  .catch(err => {
    console.log(err)
  })

Модуль HTTPS узла

Далее, родной https Node.js модуль:

const http = require('https')

const options = {
  method: 'POST',
  hostname: 'api.randomservice.com',
  port: null,
  path: '/dog',
  headers: {
    'content-type': 'application/json',
    authorization: 'Bearer 123abc456def',
    'content-length': '32'
  }
}

const req = http.request(options, res => {
  const chunks = []

  res.on('data', chunk => {
    chunks.push(chunk)
  })

  res.on('end', () => {
    const body = Buffer.concat(chunks)
    console.log(body.toString())
  })
})

req.write(JSON.stringify({ name: 'Roger', age: 8 }))
req.end()

Библиотека запросов

Вот то же самое, используя запрос Библиотека узлов:

const request = require('request')

const options = {
  method: 'POST',
  url: 'https://api.randomservice.com/dog',
  headers: {
    'content-type': 'application/json',
    authorization: 'Bearer 123abc456def'
  },
  body: { name: 'Roger', age: 8 },
  json: true
}

request(options, (error, response, body) => {
  if (error) throw new Error(error)

  console.log(body)
})

Аксиос

Здесь то же самое с использованием Axios, популярной библиотеки как для узла, так и для браузера:

const axios = require('axios')

axios.post('https://api.randomservice.com/dog', {
  name: 'Roger', age: 8 
}, {
  headers: {
    'content-type': 'application/json',
    authorization: 'Bearer 123abc456def'
  }
)
.then((res) => {
  console.log(res.data)
})
.catch((error) => {
  console.error(error)
})

Оригинал: “https://flaviocopes.com/how-to-post-api-javascript/”

XHR

API выборки

Модуль HTTPS узла

Библиотека запросов

Аксиос

Читайте ещё по теме: