使用 fetch 替代 ajax

更新日期: 2019-03-07 阅读次数: 624 字数: 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"

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

谈笑风生

程序员

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

大象

嗯,status 是需要判断。

爱评论不评论

近期节日

2019年05月20日 全国助残日
2019年05月21日 小满
2019年05月30日 五卅运动纪念
2019年05月31日 世界无烟日
2019年06月01日 六一儿童节
2019年06月05日 世界环境日
2019年06月06日 芒种
2019年06月06日 全国爱眼日
2019年06月07日 端午节
2019年06月11日 中国人口日
2019年06月16日 父亲节
2019年06月20日 世界难民日
查看更多节日