Vuex异步调用REST API时fetch在Ionic Vue安卓端运行失败如何解决？

1. 先补充错误捕获定位问题 #

你现有代码未对fetch添加错误捕获逻辑，无法感知请求阶段的异常，先修改callAPI action 补充catch逻辑：

callAPI(context, ean) {
  confirm("callAPI: ");
  fetch("https://world.openfoodfacts.org/api/v0/product/" + ean + ".json")
    .then(response => {
      confirm("response");
      // 额外判断响应状态
      if (!response.ok) throw new Error(`响应异常，状态码：${response.status}`)
      return response.json();
    })
    .then(data => {
      confirm("data: " + data);
      context.dispatch('saveProduct', data);
    })
    // 新增错误捕获
    .catch(err => {
      confirm(`请求失败：${err.message}`)
      console.error(err)
    })
},

同时建议在saveProduct中补充数据合法性判断，避免接口返回结构异常导致逻辑中断：

saveProduct(context, data) {
  confirm("saveProduct: ");
  if (!data?.product) {
    confirm("接口返回数据无有效product信息")
    return
  }
  // 原有构造product、提交mutation的逻辑
}

2. 检查安卓网络权限 #

Ionic打包的安卓应用默认需要声明网络权限才能发起外网请求，打开android/app/src/main/AndroidManifest.xml文件，确认是否已添加以下权限配置，没有则补充：

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

3. 替换fetch为Capacitor原生HTTP插件 #

部分安卓设备的WebView对原生fetch的兼容性存在缺陷，推荐使用Ionic/Capacitor生态的原生HTTP插件替代，兼容性更强：

安装插件 #

npm install @capacitor-community/http
npx cap sync

替换请求逻辑 #

首先在store文件头部引入插件：

import { Http } from '@capacitor-community/http';

修改callAPI为异步action，替换原有fetch逻辑：

async callAPI(context, ean) {
  confirm("callAPI: ");
  try {
    const response = await Http.get({
      url: `https://world.openfoodfacts.org/api/v0/product/${ean}.json`
    });
    confirm("response");
    const data = response.data;
    confirm("data: " + data);
    context.dispatch('saveProduct', data);
  } catch (err) {
    confirm(`请求失败：${err.message}`)
    console.error(err)
  }
}

4. 验证设备网络连通性 #

先确认测试用的模拟器/安卓设备可以正常访问外网，用设备自带浏览器打开你请求的API链接，确认可以正常返回数据，排除设备网络本身的问题。

内容的提问来源于stack exchange，提问作者Sascha Behnke