使用 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 聊聊，或者关注我的个人公众号“大象工具”，查看更多联系方式

使用 fetch 替代 ajax

fetch 如何替代 ajax

关于作者 🌱

相关推荐