引入 Web API
Web API 是现代前端开发中的一个重要组成部分。它们允许开发者通过 JavaScript 访问浏览器提供的各种功能和服务，例如网络请求、文件操作、定时器等。在使用 Bun 进行开发时，理解并正确利用这些 Web API 可以极大地提高开发效率和应用性能。
使用 Fetch API 发送 HTTP 请求
Fetch API 是一个现代的、基于 Promise 的网络请求 API。它为发送 HTTP 请求提供了简单而强大的接口。Bun 完全支持 Fetch API，因此你可以直接使用它来发送网络请求。
基本使用
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));这段代码展示了如何使用 Fetch API 发送一个 GET 请求，并处理返回的数据。
设置请求头
有时你需要自定义请求头，比如设置 Content-Type 或者添加认证信息。这可以通过传递第二个参数给 fetch() 来实现：
-- -------------------- ---- -------
------------------------------------- -
------- -------
-------- -
--------------- -------------------
--
----- ----------------
---- -------
--
--
-------------- -- ----------------
---------- -- ------------------
------------ -- ----------------------- --------处理错误
在实际应用中，网络请求可能会失败。你可以通过捕获 .catch() 中的错误来处理这些情况：
-- -------------------- ---- -------
-------------------------------------
-------------- -- -
-- -------------- -
----- --- ----------- ------ ------- ---------------------
-
------ ----------------
--
---------- -- ------------------
------------ -- -------------------- -------- --------使用 Web Workers 提高应用性能
Web Workers 允许你在后台线程中运行脚本，从而不会阻塞主线程。这对于执行耗时任务，如复杂的计算或大量的数据处理非常有用。
创建和使用 Worker
首先，创建一个 Worker 文件，比如 worker.js：
// worker.js
self.onmessage = function(event) {
const result = event.data * 2;
self.postMessage(result);
};然后，在主页面中使用这个 Worker：
const worker = new Worker('./worker.js');
worker.onmessage = function(event) {
console.log('Result:', event.data);
};
worker.postMessage(42); // 向 Worker 发送消息关闭 Worker
当不再需要 Worker 时，可以通过调用 terminate() 方法来关闭它：
worker.terminate();
使用 IndexedDB 存储数据
IndexedDB 是一种在客户端存储大量结构化数据的低级 API。Bun 支持使用 IndexedDB 来存储和检索数据。
打开数据库
-- -------------------- ---- -------
--- ---
----- ------- - ---------------------------- ---
----------------------- - --------------- -
----- -- - --------------------
----------------------------- - -------- ---- ---
--
----------------- - --------------- -
-- - --------------------
--
--------------- - --------------- -
-------------------- ------- -----------
--添加数据
-- -------------------- ---- -------
-------- ------------- -
----- ----------- - ------------------------- -------------
----- ----- - ---------------------------------
----- ------- - ----------------
----------------- - --------------- -
----------------- --------
--
--------------- - --------------- -
-------------------- ------ -------
--
-
--------- --- -- ----- -------- ----- ---查询数据
-- -------------------- ---- -------
-------- ----------- -
----- ----------- - ------------------------- ------------
----- ----- - ---------------------------------
----- ------- - --------------
----------------- - --------------- -
-- ---------------- -
------------------ ------- ----------------
- ---- -
--------------- ---- --------
-
--
--------------- - --------------- -
-------------------- ------- -------
--
-
-----------删除数据
-- -------------------- ---- -------
-------- -------------- -
----- ----------- - ------------------------- -------------
----- ----- - ---------------------------------
----- ------- - -----------------
----------------- - --------------- -
----------------- ----------
--
--------------- - --------------- -
-------------------- -------- -------
--
-
--------------总结
本章介绍了如何在 Bun 中使用 Web API，包括 Fetch API、Web Workers 和 IndexedDB。通过这些 API，你可以构建出更强大、更高效的前端应用。在实际开发中，合理利用这些功能可以显著提升用户体验和应用性能。