使用 fetch 替代 ajax

更新日期: 2019-03-07 阅读次数: 1658 字数: 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 是需要判断。

爱评论不评论

近期节日

2019年11月20日 国际儿童日
2019年11月21日 世界问候日
2019年11月22日 小雪
2019年11月22日 感恩节
2019年11月29日 黑色星期五
2019年12月01日 世界艾滋病日
2019年12月03日 国际残疾人日
2019年12月07日 大雪
2019年12月09日 "一二九"运动纪念日
2019年12月09日 世界足球日
2019年12月10日 世界人权日
2019年12月12日 西安事变纪念日
查看更多节日