使用 fetch 替代 ajax

更新日期: 2019-03-07 阅读次数: 1899 字数: 262 分类: Javascript

前一段时间看到条消息 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 聊聊。 白天工地搬砖,晚上哄熊孩子,可能回复有点慢,见谅。 查看更多联系方式

相关文章

谈笑风生

程序员

有时候得取 header 吧,status 可能也要判断。

大象

嗯,status 是需要判断。

爱评论不评论

近期节日

查看更多节日