使用 fetch 替代 ajax

更新日期: 2019-03-07 阅读次数: 1315 字数: 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年09月20日 国际爱牙日
2019年09月21日 国际和平日
2019年09月22日 世界无车日
2019年09月23日 秋分
2019年09月23日 国际聋人节
2019年09月27日 世界旅游日
2019年10月01日 国庆节
2019年10月04日 世界动物日
2019年10月07日 重阳节
2019年10月08日 寒露
2019年10月09日 世界邮政日
2019年10月10日 辛亥革命纪念日
查看更多节日