En Vue.js, tengo este método:
async deleteItemFromDb(item_id) { const dbUser = this.settings.db_user const dbCreds = this.settings.db_creds const dbUrl = "http://127.0.0.1:9878/items/" const headers = { "Content-Type": "application/json", "Authorization": "Basic " + btoa(dbUser + ":" + dbCreds) } let getUrl = dbUrl + item_id const projectData = await fetch(getUrl, { method: "GET", headers: headers, mode: "cors", credentials: "include" }) let delUrl = dbUrl + await projectData._id + "?rev=" + await projectData._rev const deleteItem = await fetch(delUrl, { method: "DELETE", headers: headers, mode: "cors", credentials: "include" }) console.log("Item deleted from DB:", deleteItem.data) } Lo que sucede aquí es que projectData no informa ningún error, por lo que el método de búsqueda se inicia correctamente, pero deleteItem regresa con algo como:
DELETE http://127.0.0.1:9878/items/undefined?rev=undefined 404 (Object Not Found) Además, console.log devuelve undefined como los datos.
Supongo que los datos no logran volver lo suficientemente pronto como para formar el delUrl correctamente. Pero, ¿cuál es el orden correcto, o más bien qué variables deben marcarse aquí como await ?
fetch() debe seguirse con una llamada a .json() (o una de las otras funciones si espera un formato de datos diferente)
const response = await fetch(getUrl, { method: "GET", headers: headers, mode: "cors", credentials: "include" }) const data = await response.json(); let delUrl = dbUrl + data._id + "?rev=" + data._revElimine la espera de la siguiente declaración
const projectData = await fetch(getUrl, { method: "GET", headers: headers, mode: "cors", credentials: "include" }).json(); // change added let delUrl = dbUrl + projectData._id + "?rev=" + projectData._rev; // removed await