SAPUI5应用调用Google Gemini API函数失败问题排查

核心问题定位 #

SAPUI5异步机制与async/await结合时，常见报错原因：

• await未在异步函数内使用
• 回调嵌套导致await失效
• 请求未返回标准Promise对象
• Gemini API请求参数格式不符合要求

代码修正示例（Prompt请求场景） #

错误写法示例（常见问题） #

// 错误：await用在非async函数中，未捕获异常
sendPrompt: function() {
  const response = await fetch(`https://generativelanguage.googleapis.com/v1/models/gemini-pro:generateContent?key=${yourApiKey}`, {
    method: "POST",
    headers: {"Content-Type": "application/json"},
    body: JSON.stringify({contents: [{parts: [{text: "测试Prompt"}]}]})
  });
  const data = await response.json();
}

正确写法1：控制器方法声明为async #

直接将UI5控制器的事件处理方法标记为async，同时用try/catch捕获异常：

sendPrompt: async function() {
  try {
    const apiKey = this.getView().getModel("appSettings").getProperty("/geminiApiKey");
    const userPrompt = this.getView().getModel("userInput").getProperty("/prompt");

    // 发送Gemini请求，await必须在async函数内
    const response = await fetch(`https://generativelanguage.googleapis.com/v1/models/gemini-pro:generateContent?key=${apiKey}`, {
      method: "POST",
      headers: {"Content-Type": "application/json"},
      body: JSON.stringify({
        contents: [{parts: [{text: userPrompt}]}]
      })
    });

    if (!response.ok) {
      throw new Error(`API请求失败：${response.statusText}`);
    }

    const result = await response.json();
    // 将响应绑定到UI模型
    this.getView().getModel("geminiResponse").setProperty("/content", result.candidates[0].content.parts[0].text);
  } catch (error) {
    console.error("请求错误：", error);
    sap.m.MessageBox.error("获取Gemini响应失败：" + error.message);
  }
}

正确写法2：封装jQuery.ajax为Promise（兼容旧版UI5） #

如果使用SAPUI5内置的jQuery.ajax，需先封装为Promise再用await：

sendPrompt: async function() {
  try {
    const apiKey = "...";
    const prompt = "...";

    // 封装jQuery请求为Promise
    const ajaxPromise = new Promise((resolve, reject) => {
      jQuery.ajax({
        url: `https://generativelanguage.googleapis.com/v1/models/gemini-pro:generateContent?key=${apiKey}`,
        method: "POST",
        contentType: "application/json",
        data: JSON.stringify({contents: [{parts: [{text: prompt}]}]}),
        success: resolve,
        error: reject
      });
    });

    const result = await ajaxPromise;
    console.log("Gemini响应：", result);
  } catch (error) {
    console.error("错误详情：", error);
  }
}

关键注意事项 #

• async标记强制要求：所有使用await的函数必须声明为async，包括UI5的事件处理方法
• 异常必须捕获：await代码块必须包裹在try/catch中，否则未处理的Promise拒绝会触发控制台报错
• API格式校验：Gemini Pro要求请求体严格遵循{contents: [{parts: [{text: "xxx"}]}]}结构，格式错误会返回400状态码
• 跨域问题处理：本地开发时需配置SAPUI5代理（如ui5.yaml或neo-app.json），避免浏览器拦截跨域请求

内容的提问来源于stack exchange，提问作者SAP ASFlash