Resulta que estoy haciendo una app en React donde necesito hacer una clase donde se llame un web services, pero necesito que no se ejecute un servicio hasta que el otro me haya dado respuesta.
No se que tengo mal, pero no me esta funcionando.
Mi codigo es el siguiente, el siguiente codigo es la clase donde tendre las funciones basicas, como el get, delete, update y todas ellas.
const API = 'https://jsonplaceholder.typicode.com/';
class ServicesFactory {
request = async (url) => {
return await new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = (e) => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
resolve(JSON.parse(xhr.response))
} else {
reject(xhr.status)
}
}
}
xhr.ontimeout = () => {
reject('timeout')
}
xhr.open('get', API + url, true);
xhr.send()
})
}
get = async (query) => {
return await this.request(query)
}
}
export default ServicesFactory;
y aca en App.js la uso de la siguiente forma
class App extends Component {
constructor() {
let sf = new ServicesFactory();
sf.get("todos").then((res) => console.log(res));
sf.get("todos/1").then((res) => console.log(res));
}
...
el problema viene cuando las operaciones responden de forma alternada, es decir, no se ejecuta por completo la primera y ya la segunda responde, quiero solo que termine la primera y la segunda ya comience
otra cosa es que me gustaria guardar el resultado en una variable como lo he visto que lo hacen de este modo
let sf = new ServicesFactory();
let var1 = sf.get("todos");
let var2 = sf.get("todos/1");
pero cuando lo hago de este modo, no se ve el objeto que responde sino un objeto como esto
{
__proto__: Promise,
[[PromiseStatus]]: "resolved",
[[PromiseValue]]: Object
}
donde PromiseValue es mi respuesta, pero yo quiero que esa respuesta se guarde de una vez en la variable, y ya la pueda usar.
Alguna recomendacion