使用 fetch 替代 ajax

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

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

领取阿里云图片 CDN 优惠券

阿里云 CDN 优惠券,最高可领 1888 元

谈笑风生

程序员

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

大象

嗯,status 是需要判断。

爱评论不评论

近期节日

2019年04月01日 愚人节
2019年04月01日 复活节
2019年04月02日 国际儿童图书日
2019年04月04日 寒食节
2019年04月05日 清明节
2019年04月07日 世界卫生日
2019年04月11日 世界帕金森病日
2019年04月20日 谷雨
2019年04月22日 世界地球日
2019年04月23日 世界读书日
2019年04月26日 知识产权日
2019年04月30日 全国交通安全反思日
查看更多节日