La misma llamada a la API POST en varias bibliotecas de JavaScript

Estaba probando una API usandoInsomnio, una aplicación muy interesante que te permite realizar solicitudes HTTP a los servicios de API REST o GraphQL.

Tienen un bonito botón que genera código para replicar una solicitud de API desde la aplicación, donde usted diseña visualmente todos los datos de su solicitud.

Internamente usahttps://github.com/Kong/httpsnippetque es un generador de fragmentos de solicitud HTTP para muchos idiomas y bibliotecas, escrito en JavaScript. Un proyecto genial.

De todos modos, la exportación tenía varios fragmentos de código. Quiero mostrar la misma llamada a la API en diferentes bibliotecas.

Primero, aquí está la descripción de la llamada a la API. Hago una solicitud POST alapi.randomservice.comsitio web (es una URL aleatoria que se me ocurrió) al/dogpunto final.

A este punto final envío un objeto con 2 propiedades:

{
  name: 'Roger',
  age: 8
}

codificado como JSON.

También paso uncontent-typepara configurar el contenido comoapplication/jsony unauthorizationencabezado para autenticar mi solicitud con un token de portador que me asignaron a través del panel de API.

XHR

El primer ejemplo de código esXHR, que podemos usar en el navegador de forma nativa y en Node.js usandohttps://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)

La API de Fetch

Entonces tenemos el mismo código usando elObtener API, otra API disponible de forma nativa en el navegador y en Node.js usandohttps://www.npmjs.com/package/node-fetch:

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)
  })

El módulo HTTPS del nodo

A continuación, el nativohttpsMódulo 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()

losrequestBiblioteca

Aquí es lo mismo usando elrequestBiblioteca de nodos:

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

Aquí está el mismo usoAxios, una biblioteca popular tanto para Node como para el navegador:

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)
})


Más tutoriales de js:


Tech Wiki en línea!