¿Cómo hacer una llamada POST a una API usando Axios.js en JavaScript?

Axios es un cliente HTTP basado en promesas diseñado para Node.js y el navegador. Con Axios, podemos enviar fácilmente requests HTTP asíncronas a las API REST y realizar operaciones de creación, lectura, actualización y eliminación. Es un proyecto de colaboración de código abierto alojado en Github. Se puede importar en Javascript simple o con cualquier biblioteca en consecuencia. 
El siguiente script src incluirá axios.js en la sección principal de su código HTML 
 

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

Cuando enviamos una solicitud a la API usando axios, devuelve una respuesta. El objeto de respuesta consta de: 
 

  • datos: los datos devueltos por el servidor.
  • estado: el código HTTP devuelto por el servidor.
  • statusText: el estado HTTP devuelto por el servidor.
  • headers: encabezados obtenidos del servidor.
  • config: la configuración de la solicitud original.
  • petición: el objeto de la petición.

Con fines de demostración, alojaremos una API en localhost: 
 

http://127.0.0.1:5000

Secuencia de comandos de Python: necesitará los siguientes paquetes para ejecutar la API: matraz, requests, jsonify, matraz_cors . El código para la API de Python es el siguiente:
 

  • Programa: 
     

Python3

from flask import Flask, jsonify, request
from flask_cors import CORS
 
app = Flask(__name__)
CORS(app)
 
@app.route('/test', methods =['POST'])
def test():
   return jsonify({"Result": "Welcome to GeeksForGeeks, "
                                   +request.json['name']})
 
if __name__ == '__main__':
    app.run(debug = True)

Nota: puede alojar esta API simplemente ejecutando el código Python anterior.
JS Script: incluya axios.js y el archivo JS correspondiente en el archivo HTML. En el archivo JS, escriba el siguiente código que realiza una solicitud POST utilizando axios a la API. Una solicitud POST a la API requiere las siguientes variables: 
 

  • ruta: La ruta al método API.
  • queryObj: objeto de consulta que contiene los datos de encabezado para la llamada POST. El objeto de consulta tiene la forma de un objeto Javascript. Por ejemplo: {nombre:’GeeksForGeeks’, tipo:’Sitio web’}
  • Programa: 
     

javascript

function makePostRequest(path, queryObj) {
    axios.post(path, queryObj).then(
        (response) => {
            var result = response.data;
            console.log(result);
        },
        (error) => {
            console.log(error);
        }
    );
}
 
queryObj = { name: 'Chitrank' };
makePostRequest('http://127.0.0.1:5000/test', queryObj);
  • Salida: llamará a la API con una solicitud POST que lleva los datos del encabezado mencionado. La respuesta obtenida se obtendrá en la ventana de la consola
     

Publicación traducida automáticamente

Artículo escrito por chitrankmishra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *