Estoy tratando de obtener datos del servidor back-end usando esta función de búsqueda:
let users = [] const fetchUsers = () => { fetch(baseUrl + "/users/", { method: "GET", }) .then((res) => res.json()) .then((data) => (resJSON = data)) .then((resJSON) => { users = resJSON; }) .catch((err) => { console.log("error in json", err); users = []; }); };pero lo consigo
error in json ReferenceError: resJSON is not defined ocurre un error en esta línea: .then((data) => (resJSON = data))
Lo extraño es que veo en el backend que se crea el json. También estoy usando una solicitud de recuperación muy similar para datos POST en otro punto final sin ningún problema. Así que me pregunto qué podría estar mal aquí.
El problema es que resJSON = data se asigna a un identificador que no está declarado en ninguna parte. Aparentemente, su código se ejecuta en modo estricto (¡bien!), por lo que asignar un identificador no declarado es un error.
Pero no hay necesidad de resJSON , no hace nada útil en ese código. Puede combinar los dos controladores then hacer users = data . Pero , por lo general, esa es una mala práctica, porque te estás preparando para este problema en el que fetch usar users antes de que se complete . : debe marcar ok antes de llamar a json() .)
Pero, fundamentalmente, hacer que fetchUsers se asigne directamente a una variable de users declarada fuera de ella es un problema. En su lugar, haga que fetchUsers devuelva una promesa de la matriz de usuarios. Aquí, en 2022, puede hacerlo con una función async :
const fetchUsers = async () => { const response = await fetch(baseUrl + "/users/", { method: "GET", }); if (!response.ok) { throw new Error(`HTTP error ${response.status}`); } return await response.json(); }; (Si desea ocultar los errores del código de llamada (lo cual es una mala práctica), envuélvalo en un try / catch y devuelva una matriz vacía del catch ).
Luego, tenga el código que debe completar users . let users = await fetchUser(); (tenga en cuenta que ese código también deberá estar en una función async o en el nivel superior de un módulo).
Si por alguna razón no puede usar una función async , puede hacerlo de la manera anterior:
const fetchUsers = () => { return fetch(baseUrl + "/users/", { method: "GET", }) .then(response => { if (!response.ok) { throw new Error(`HTTP error ${response.status}`); } return response.json(); }); };Tiene una asignación en su declaración de devolución. Además, esta asignación se limita a la devolución de llamada actual, por lo que en el siguiente bloque .then resJSON no está disponible. Tampoco es necesario intentar hacer una tarea adicional.
let users = [] fetch(/* ... */) .then((res) => { // res is the raw response. // res.json returns a new promise // that when sucefully fulfilled, // will return the decoded body return res.json() }) .then((data) => { // data refers to the json decoded // bytes of the response body // assign it directly to user users = data }) .catch(console.warn)Esto puede seguir siendo problemático, ya que nunca se sabe cuándo los usuarios están asignados o no. Dependiendo de su código, debe cambiar el trabajo adicional a la devolución de llamada.
const useUserdata = (users) => console.log("do something with the user", users) fetch(/* ... */) .then(raw => raw.json()) .then(useUserdata) .catch(console.warn)