调用REST API获取数据并设置为SAPUI5模型的实现方法咨询

你当前的代码存在两个核心问题：

• JSONModel 构造函数仅支持直接传入静态数据对象，无法识别 Fetch 异步请求返回的 Promise 实例
• 你在请求回调中仅打印了返回结果，没有将解析后的数据写入模型

修正后代码 #

onInit: function() {
    var myHeaders = new Headers();
    // 替换为你自己的API Key
    myHeaders.append("x-rapidapi-key", "XxXxXxXxXxXxXxXxXxXxXxXx");

    var requestOptions = {
        method: 'GET',
        headers: myHeaders,
        redirect: 'follow'
    };        
    
    // 先实例化空的JSON模型并绑定到视图
    var bBallModel = new JSONModel();
    this.getView().setModel(bBallModel, "bball");
    
    // 发起异步请求
    fetch("https://api-basketball.p.rapidapi.com/countries", requestOptions)
    .then(response => response.json()) // 直接解析为JSON对象，不要用text()
    .then(result =>  {
        console.log(result);
        // 将接口返回的完整数据写入模型
        bBallModel.setData(result);
    })
    .catch(error => console.log('请求错误', error));
}

XML视图绑定示例 #

接口返回的国家列表存放在response字段中，你可以直接通过模型路径绑定到列表控件：

<List
    items="{bball>/response}"
    headerText="可选国家"
>
    <StandardListItem
        title="{bball>name}"
        icon="{bball>flag}"
        description="国家代码：{bball>code}"
    />
</List>

注意事项 #

• 请确认你的控制器/组件顶部已经引入了sap/ui/model/json/JSONModel依赖，否则会出现类未定义错误
• 如果你确实是将这段逻辑写在Component.js中，请不要调用this.getView()，直接使用this.setModel(bBallModel, "bball")即可将模型设为全局组件模型，应用内所有视图都可以访问
• 可在请求发起前添加加载提示、请求结束后关闭提示，优化用户体验

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