Solicitud POST simple utilizando la API de obtención

El método fetch() , como la solicitud XMLHttpRequest y Axios, se utiliza para enviar las requests al servidor. La principal diferencia es que Fetch API usa Promises, lo que permite una API más simple y limpia. Obtendrá todo el método Obtener y Publicar utilizando la API de obtención

Sintaxis:

• fetch(url, { config }) 
  .then(res => { 
      // Handle response 
  }) 
  .catch(err => { 
      // Handle errors 
  }) 
  

• Dado que fetch devuelve una promesa, también podemos usar palabras clave async/await para realizar requests:

  async() => {
    const resp = await fetch('http://example.com/example.json');
    // Handle response
  }
  

Cree una solicitud POST usando fetch(): La solicitud POST se usa ampliamente para enviar formularios al servidor.

fetch(url, {
    method: 'POST',
    headers: {
      "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
    },
    credentials: 'include',
    body: 'foo=bar&lorem=ipsum'
  })
  .then(res.json())
  .then(res => {
    // Handle response 
    console.log('Response: ', res);
  })
  .catch(err => {
    // Handle error 
    console.log('Error message: ', error);
  });

Explicación:

• Para crear una solicitud POST, debemos especificar algunos parámetros con la solicitud, como el método, los encabezados, etc. Primero, debemos especificar el método de solicitud (GET, POST, DELETE, etc.), que es POST en nuestro caso. A esto le sigue el tipo de contenido, que le dice al cliente cuál es realmente el tipo de contenido de los datos devueltos. La clave de credenciales es opcional y debe usarse si desea realizar una solicitud de obtención con credenciales como cookies. Luego configuramos el cuerpo que consta de los datos que deseamos pasar al servidor.
• La respuesta de una solicitud fetch() es un objeto de flujo, lo que significa que cuando llamamos al método json(), se devuelve una Promesa ya que la lectura del flujo ocurrirá de forma asíncrona.
• Si la API devuelve un estado de 201 (el código de estado HTTP para Creado), se puede acceder a los datos devueltos por la API: res(respuesta). En caso de que ocurra un error, se ejecutará el código dentro del bloque catch.