如何在JavaScript中合并双API请求实现Android HTML应用首页数据展示

核心思路：并行请求两个接口，合并数据后渲染UI #

两个接口相互独立，并行发起请求能减少整体等待时间，等两个接口都返回数据后，将结果合并成一份数据集，再同步更新页面的各个展示模块。

前端实现代码（JavaScript） #

假设你的HTML GUI是通过Android WebView加载的前端页面，用以下代码完成请求合并：

// 替换为你的实际基础URL
const baseUrl = "你的基础API地址";
const homeDataApi = `${baseUrl}api/android_app/home_data`;
const dayBookApi = `${baseUrl}api/android_app/day_book_reports`;

// 封装通用请求函数
function getApiData(apiUrl) {
  return fetch(apiUrl)
    .then(res => {
      if (!res.ok) throw new Error(`请求错误：${res.status}`);
      return res.json();
    });
}

// 并行发起两个请求
Promise.all([getApiData(homeDataApi), getApiData(dayBookApi)])
  .then(([homeResp, dayBookResp]) => {
    // 合并两份数据，按实际接口返回的字段名调整
    const allData = {
      // 首页原有数据
      walletBalance: homeResp.wallet_balance,
      notices: homeResp.notices,
      banners: homeResp.banners,
      // 新增的充值和佣金数据
      totalRecharge: dayBookResp.total_recharge,
      totalCommission: dayBookResp.total_commission
    };

    // 更新页面UI，示例：
    document.querySelector('#wallet-balance').textContent = allData.walletBalance;
    document.querySelector('#total-recharge').textContent = allData.totalRecharge;
    document.querySelector('#total-commission').textContent = allData.totalCommission;
    
    // 渲染公告、轮播图等其他模块...
  })
  .catch(err => {
    console.log('数据加载失败：', err);
    // 这里可以添加错误提示，比如显示页面内的错误提示框
  });

容错优化（可选） #

如果希望某个接口失败时，不影响另一个接口的数据展示，改用Promise.allSettled：

Promise.allSettled([getApiData(homeDataApi), getApiData(dayBookApi)])
  .then(results => {
    // 处理首页数据
    if (results[0].status === 'fulfilled') {
      const homeData = results[0].value;
      // 渲染钱包余额、公告、轮播图
      document.querySelector('#wallet-balance').textContent = homeData.wallet_balance;
    } else {
      console.error('首页数据加载失败：', results[0].reason);
      // 显示首页数据加载失败的提示
    }

    // 处理充值佣金数据
    if (results[1].status === 'fulfilled') {
      const bookData = results[1].value;
      document.querySelector('#total-recharge').textContent = bookData.total_recharge;
      document.querySelector('#total-commission').textContent = bookData.total_commission;
    } else {
      console.error('充值佣金数据加载失败：', results[1].reason);
      // 显示该部分数据加载失败的提示
    }
  });

Android WebView配置注意事项 #

如果你的HTML页面是通过Android WebView加载的，需要确保WebView开启必要设置：

WebView webView = findViewById(R.id.your_webview_id);
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);
// 允许混合内容（若接口为HTTP、页面为HTTPS时需要）
settings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
// 允许网络访问
webView.setWebViewClient(new WebViewClient());

内容的提问来源于stack exchange，提问作者Pushkar Jain