Блог

У меня есть ниже 2 файлов, я хочу убедиться, что вызов в порядке. Я попробовал обещание и обратный вызов, должен признать, что я не на 100% знаком с асинхронными вызовами.

config.js:

 import rolesJson from '../../roles';  class Config{  url; rolesList;  constructor(callback){   var baseurl = 'www.example.com/env';   fetch(baseurl)  .then(response =gt; response.json())  .then(data =gt; {  this.url = data.url;  getAuth(data.env);  }).catch((error) =gt; {   });   const getAuth= (env) =gt; {  const headers = { 'Content-Type': 'application/json' };  const options = { method: 'POST', headers, body:JSON.stringify(rolesJson(env))};  console.log("THIS BODY SHOULD NOT BE UNDEFINED", options.body);  fetch('www.example.com/auth', options)  .then(response =gt; response.json())  .then(data =gt; {   }).catch((error) =gt; {   });  }; }  } module.exports = Config;  

roles.js

 var roleUrl = 'www.example.com/roles';  const setEnviroment = (rolesdata,env) =gt; { let reqBody = {  "environment": env,  "components": rolesdata } console.log("REQUEST BODY CREATED", reqBody); return req; }  const getRoles = (env) =gt; { fetch(roleUrl) .then(response =gt; response.json()) .then(roles =gt; {  let rolesList = [];  roles.map(x =gt; {  const roleObj = {  name: x.name,  id: x.id,  }  rolesList.push(roleObj);  })  return setEnviroment(rolesList, env);  }).catch((error) =gt; {  }); }; module.exports = getRoles;  

Как я могу быть уверен, когда я вызываю fetch(‘www.example.com/auth’, варианты), варианты.тело не является неопределенным? Я пытался использовать асинхронное/ожидание и обратные вызовы, для меня ничего не работает.

Any help will be very appreciated.

Thanks

No worries — promises are not easy to get at first. So first of all, you can only rely on the value, if you waited that it was resolved. This can be done, as you already pointed out, with .then or with async / await.

.then-solution:

 var roleUrl = 'www.example.com/roles';  const setEnviroment = (rolesdata,env) =gt; { let reqBody = {  "environment": env,  "components": rolesdata } console.log("REQUEST BODY CREATED", reqBody); return req; }  const getRoles = (env) =gt; { fetch(roleUrl) .then(response =gt; response.json()) .then(roles =gt; {  let rolesList = [];  roles.map(x =gt; {  const roleObj = {  name: x.name,  id: x.id,  }  rolesList.push(roleObj);  })  return setEnviroment(rolesList, env);  });  // we return the promise }; module.exports = getRoles;  

 class Config{  url; rolesList;  constructor(callback){   var baseurl = 'www.example.com/env';   fetch(baseurl)  .then(response =gt; response.json())  .then(data =gt; {  this.url = data.url;  getAuth(data.env);  }).catch((error) =gt; {   });   const getAuth= (env) =gt; {  const headers = { 'Content-Type': 'application/json' };  const options = { method: 'POST', headers, body:JSON.stringify(rolesJson(env))};  console.log("THIS BODY SHOULD NOT BE UNDEFINED", options.body);  fetch('www.example.com/auth', options)  .then(response =gt; response.json());  // we return the Promise  }; }  } module.exports = Config;  

 // calling method  Config.getAuth(env).then((value) =gt; {  return getRoles(env); //this returns a Promise again }).then(x =gt; {  // here you have the return type of getRoles })  

асинхронное ожидание решения:

 var roleUrl = 'www.example.com/roles';  const setEnviroment = (rolesdata,env) =gt; { let reqBody = {  "environment": env,  "components": rolesdata } console.log("REQUEST BODY CREATED", reqBody); return req; }  const getRoles = async (env) =gt; {  let response await fetch(roleUrl); // awaiting fetch promise  let roles = await response.json(); // awaiting .json()-promise  let rolesList = [];  roles.map(x =gt; {  const roleObj = {  name: x.name,  id: x.id,  }  rolesList.push(roleObj);  })  return setEnviroment(rolesList, env);  };  // async always returns a promise  module.exports = getRoles;  

 class Config{  url; rolesList;  constructor(callback){   var baseurl = 'www.example.com/env';   fetch(baseurl)  .then(response =gt; response.json())  .then(data =gt; {  this.url = data.url;  getAuth(data.env);  }).catch((error) =gt; {   });   const getAuth = async (env) =gt; {  const headers = { 'Content-Type': 'application/json' };  const options = { method: 'POST', headers, body:JSON.stringify(rolesJson(env))};  console.log("THIS BODY SHOULD NOT BE UNDEFINED", options.body);  const response = await fetch('www.example.com/auth', options);  const body = await response.json();  return body; // we return a Promise including the body  }; }  } module.exports = Config;  

 // calling method  const callerMethod = async () =gt; {  const auth = await Config.getAuth(env);  const roles = await getRoles(env);  //now you can work with the resolved stuff };  

Пожалуйста, обратите внимание, что callerMethod снова вернет само обещание, потому что оно асинхронно.