Dynami c js пакет синхронного вызова API

Question

В моем случае у меня есть js веб-приложение, которое я связываю с веб-пакетом. Приложение развернуто в веб-приложении azure, где я хотел бы использовать функцию «Настройки приложения». Особенно мне нравится иметь возможность устанавливать базовый URL API, который должно использовать приложение. Чтобы заставить это работать, моя идея состоит в том, чтобы поместить. php в root, который просто возвращает что-то вроде {url: 'api.mypage.com'}. . php может читать переменную окружения и возвращать правильный URL в зависимости от окружения. Сегодня, когда я связываю свой js, он читает .config с помощью api url, что делает среду пакета зависимой. Я пытался сделать вызов относительно себя (/api.php), который работает нормально. Проблема в том, что синхронизация не работает.

Как бы вы, ребята, решили это? Я не js эксперт, но для этого должно быть разумное решение. Я бродил с чем-то вроде этого:

const dynConfig = {
    apiUrl: getApiBaseUrl((param) => {console.log('3. Callback done: ', param); return param;})
}



function getApiBaseUrl(_callBack) {
  console.log('1. Enter getApiBaseUrl');
  fetch('https://official-joke-api.appspot.com/jokes/programming/random')
  .then(response => response.json())
  .then( data => {
    console.log('2. Data fetched: ', data[0].type);
    _callBack(data[0].type);
  })    
  .catch(err => {
    console.error(err);
  })
}


// This where it fails to "wait"
console.log('4. This should not be undefined: ', dynConfig.apiUrl);

jsfiddle

Answer 1

Согласно нашему обсуждению в комментариях, здесь есть реализация с async / await и обещаниями

Асинхронная / ожидающая

/* Async/Await */
async function async_getApiBaseUrl() {
    try {
    let res = await (await fetch('https://official-joke-api.appspot.com/jokes/programming/random')).json();

    return res[0];

  } catch(err) {
    console.error(err);
    return '';
  }
}

async_getApiBaseUrl().then(function(joke){
  console.log('async joke:')
  console.log(`Got a joke: ${joke.setup}`);
  console.log(joke.punchline);
  console.log(' ');
});

Promise на основании

/* Promise */
function promise_getApiBaseUrl(_callBack){
    return new Promise(function(resolve, reject) {
    fetch('https://official-joke-api.appspot.com/jokes/programming/random')
        .then(async function(res) { return await res.json(); })
        .then(function (res) {
          resolve(res[0]);
      })
      .catch(function (err) { reject(err) });
  });
}

promise_getApiBaseUrl()
    .then(function(joke) {
    // use your apiBaseUrl
    console.log('promise joke:')
    console.log(`Got a joke: ${joke.setup}`);
    console.log(joke.punchline);
  })
  .catch(function(err){
    console.error(err);
  });