Third-Party APIs — Fetch API Usage

同学们，这节课我们来聊聊在 Lightning Web Components 里怎么调用外部接口，也就是用 Fetch API 发 HTTP 请求。别担心，它不是什么新框架，就是浏览器自带的标准功能，所以你在 LWC 里直接用就行，不需要额外安装任何东西。 不过呢，在 Salesforce 里用 Fetch API 有一个小前提——你得先配置好站点的 CSP 受信任 URL。注意，这里加的只是基础 URL，比如 `https://api.example.com`，不是后面带具体路径的完整端点。这一步一定要先做，不然你的呼叫会被浏览器拦住。 Fetch API 天然是基于 Promise 的，所以你可以很优雅地用 `async/await` 来写，让代码读起来更像同步流程，非常好维护。 但这里有一个非常容易踩的坑，大家一定要记住：Fetch 返回的 Promise 只有在网络层面的故障时才进入 `catch`，比如你断网了、请求超时了。如果是服务器返回了 404 或者 500 这样的错误状态码，`catch` 是捕获不到的，Promise 仍然是成功的！所以正确做法是拿到响应后，自己用 `response.ok` 或 `response.status` 去判断，手动处理业务错误。 另外，`finally` 块不管最终是成功还是失败都会执行，特别适合用来做一些清理工作，比如隐藏一个加载中的旋转动画，这样用户体验会更好。 还有一点关于安全的，特别重要：永远不要把 API 密钥、令牌这种东西写在你的客户端 JavaScript 代码里。因为打包部署后，这些信息会暴露出去，非常危险。在 Salesforce 里，最佳实践是通过一个 Apex 类，用 `HttpRequest` 去代理你的请求，这样凭据安全地保存在后端，前端只调用这个 Apex 方法。 如果你想看一个完整的例子，去搜一下 Salesforce 官方的 `lwc-recipes` 仓库，里面有一个 `miscRestApiCall` 组件，演示了怎么调用 Google Books API，跟着学一遍就会了。 好了，Fetch 在 LWC 里的要点就这么多，现在我们一起来看看代码示例吧。