使用 fetch 替代 ajax

前一段时间看到条消息 bootstrap 5 将移除对 jquery 的依赖。例如：

• 用 querySelectorAll 来查询 DOM 节点
• 使用 fetch 代替 ajax（在不支持的浏览器上使用 XHR）
• 使用代理事件来进行事件处理
• 为一些尚未实现的 DOM 标准写了 polyfill
• 更多地使用自定义元素 (CustomElement)

我完全理解 bootstrap 这样做的初衷，因为写一个简单的小功能，例如调用服务端接口，就需要引入庞大的 jquery 依赖，实际上是非常不合理的。

所以，我决定在新项目中都采用相同的做法，使用 fetch 替代 ajax。

fetch 如何替代 ajax

使用示例，一个 GET 请求

fetch('/some-api')
    .then(function(rsp) {
        console.log(rsp);
        return rsp.json();
    }).then(function(json) {
        console.log(json);
    });

rsp 的数据结构

body: (...)
bodyUsed: true
headers: Headers {}
ok: true
redirected: false
status: 200
statusText: "OK"
type: "basic"
url: "http://localhost:8000/some-api"

第二个 rsp.json 的结果才是服务端返回的数据。

data: false
err_code: 0
err_msg: "OK"

我不是很理解为何要这么麻烦。

关于作者 🌱

我是来自山东烟台的一名开发者，有敢兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式