Javascript Fetch API PUT Solicitud

Quiero actualizar las calificaciones de los libros. El usuario presentará la calificación para un libro particular a través de un formulario. postRatings es un creador de acción que se envía al componente con la forma. Libros variable contiene el mismo objeto de libro que está presente en el archivo json. La calificación se actualiza para el libro específico en el Libros variable y luego quiero eliminar el objeto anterior y poner este objeto actualizado. Pero cuando trato de hacer esto, tengo 404: No encontrado mensaje de error. Sería genial si alguien pudiera señalar dónde estoy engañando y ayudarme a resolver este error.

JSON File (Fake Rest API made using json-server Node Module):

{
  "books": [
    {
      "id": "0",
      "title": "1984",
      "author": "George Orwell",
      "rating": "4.6",
      "points: "228",
      "total": "50
    },
    {
      "id": "1",
      "title": "To Kill a Mockingbird",
      "author": "Harper Lee",
      "rating": "4.8",
      "points: "241",
      "total": "50
    }
  ]
}

postRatings Action Creator:

export const postRatings = (Books, title, rating) => (dispatch) => {  
  Books.some(function(obj){
    if(obj.title==title) {
      obj.total = parseInt(obj.total)+1;
        let newPts = parseInt(obj.points) + parseInt(rating);
        obj.points = ""+newPts;
        let newRating = (parseInt(obj.points) + parseInt(rating)) / parseFloat(obj.total);
        obj.ratings = ""+Math.floor(newRating * Math.pow(10, 1)) / Math.pow(10, 1).toFixed(1);
        return true;
    }   
  });
  fetch('localhost:3001/books', {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(Books)
  })
  .then(response => {
    if(response.ok) {
      return response;
    } else {
        var error = new Error('Error- ' + response.status + ":" + response.statusText);
        error.response = response;
        throw error;
    }
  },
  error => {
    var errmess = new Error(error.message);
    throw errmess;
  })
  .then(response => response.json())
  .then(response => {console.log("response:"+JSON.stringify(response)); alert("Rating Added!")})
  .catch(error => {console.log('Error Message: '+ error.message)
    alert("Some Problem Occurred.\nError: "+error.message);
  });
}

Pregunta hecha hace 3 años, 4 meses, 27 días - Por codecrusader

3 Respuestas:

  • Usted tiene que incluir el id del objeto que desea actualizar. ver el ruta predeterminada del servidor json

    así que en su url de la fetch, añadir el libro id al final de la ruta

    fetch(`localhost:3001/books/${Books.id}`)

    Respondida el Dec 19, 2020 a las 07:44 - por cyberscribe

    Votos positivos: 0 | Votos negativos: 0

  • El error de "404: No encontrado" que estás recibiendo probablemente se debe a que la URL que estás utilizando en tu solicitud fetch no es válida. En este caso, estás tratando de hacer una solicitud PUT a 'localhost:3001/books', pero parece que falta especificar el protocolo en la URL.

    Para corregir esto, debes agregar 'http://' o 'https://' al principio de la URL. Entonces, la URL de tu solicitud fetch debería verse así: 'http://localhost:3001/books' si tu servidor está en localhost y escucha en el puerto 3001.

    Aquí tienes la corrección en tu código:

    javascript
fetch('http://localhost:3001/books', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(Books)
})

    Con esta corrección, la solicitud fetch debería apuntar correctamente a tu servidor local y resolver el error de "404: No encontrado". ¡Espero que esto te ayude a solucionar tu problema! Si necesitas más ayuda, no dudes en preguntar.

    Respondida el Dec 20, 2020 a las 07:41 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • El error "404: Not Found" al realizar una solicitud PUT en la API Fetch de JavaScript generalmente indica que el recurso al que intentas acceder no existe o no se puede encontrar. En tu caso, estás intentando actualizar una lista de libros accediendo a la URL 'localhost:3001/books'. Sin embargo, parece que tu archivo JSON de origen está configurado para utilizar json-server, que utiliza una ruta diferente para las solicitudes PUT.

    Para resolver este problema, debes asegurarte de que la URL a la que estás enviando la solicitud PUT coincida con la ruta configurada en json-server. Según la documentación de json-server, la ruta predeterminada para las solicitudes PUT es "/:resource/:id".

    Por lo tanto, para actualizar un libro en particular, debes enviar la solicitud PUT a una URL como esta:

    
'localhost:3001/books/:id'

    Donde :id es el ID del libro que deseas actualizar.

    Además, asegúrate de que el objeto JSON que envías en el cuerpo de la solicitud contenga las propiedades correctas. En tu código, estás actualizando el objeto Libros en lugar de un libro individual. Debes asegurarte de que el objeto JSON que envías en la solicitud PUT contenga solo el libro que deseas actualizar.

    Aquí tienes un ejemplo actualizado de tu código de creador de acciones postRatings:

    ``` export const postRatings = (Books, title, rating, id) => (dispatch) => {
    Books.some(function(obj){ if(obj.title==title) { obj.total = parseInt(obj.total)+1; let newPts = parseInt(obj.points) + parseInt(rating); obj.points = ""+newPts; let newRating = (parseInt(obj.points) + parseInt(rating)) / parseFloat(obj.total); obj.ratings = ""+Math.floor(newRating Math.pow(10, 1)) / Math.pow(10, 1).toFixed(1); return true; }
    });

    const bookToUpdate = Books.find((book) => book.id === id);

    fetch(localhost:3001/books/${id}, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(bookToUpdate) }) .then(response => { if(response.ok) { return response; } else { var error = new Error('Error- ' + response.status + ":" + response.statusText); error.response = response; throw error; } }, error => { var errmess = new Error(error.message); throw errmess; }) .then(response => response.json()) .then(response => {console.log("response:"+JSON.stringify(response)); alert("Rating Added!")}) .catch(error => {console.log('Error Message: '+ error.message) alert("Some Problem Occurred.\nError: "+error.message); }); } ```

    En este código actualizado, hemos realizado los siguientes cambios:

    Hemos utilizado find para obtener el libro específico que deseamos actualizar, en función de su ID. Estamos enviando el libro específico en el cuerpo de la solicitud PUT, en lugar de toda la lista de libros. Hemos actualizado la URL de la solicitud PUT para que incluya el ID del libro.

    Estos cambios deberían resolver el error "404: No encontrado" y permitirte actualizar correctamente las calificaciones de los libros.

    Respondida el Dec 20, 2020 a las 07:51 - por Gemini

    Votos positivos: 0 | Votos negativos: 0