时间戳

首页 > 解决方案 > 动态js捆绑同步api调用

javascript - 动态js捆绑同步api调用

问题描述

我的情况是我有一个与 webpack 捆绑在一起的 js web 应用程序。该应用程序部署到我喜欢使用应用程序设置功能的天蓝色 web 应用程序。特别是我希望能够设置应用程序应该使用的 api 基本 url。为了完成这项工作，我的想法是在根目录中放置一个 .php ，简单地返回类似 .php 的内容{url: 'api.mypage.com'}。.php 可以读取环境变量并根据环境返回正确的 url。今天，当我捆绑我的 js 时，它会读取带有 api url 的 .config，这使得捆绑环境依赖。我一直在尝试相对于它自己（/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

标签： javascriptapiwebpackdynamicazure-web-app-service

解决方案

根据我们在评论中的讨论，这里是一个带有 async/await 和 Promise 的实现

基于异步/等待

/* 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 */
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);
  });

推荐阅读