JavaScipt

# ajax、fetch

# ajax 缺点

  • 本身是针对 MVC 编程，不符合前端 MVVM 的浪潮。
  • 基于原生 XML 开发，XML 本身的架构不清晰。
  • 不符合关注分离的原则。
  • 配置和调用方式混乱，而且基于事件的异步模型不友好。

# Fetch

在 ES6 出现，是用了 ES6 的 promise 对象。 Fetch 是基于 promise 设计的。

Fetch 代码结构比 ajax 简单多。 fetch 不是 ajax 的进一步封装，而是原生 js，没有使用 XMLHttpRequest 对象。

fetch 优点：

  • 语法简洁，语义化。
  • 基于标准 promise 实现，支持 async/await
  • 更加底层，提供api丰富。
  • 脱离XMR，是ES规范里的新的实现方式。

fetch 缺点：

  • fetch 只对网络请求报错，对 400，500 都当作成功的请求。服务器返回 400， 500 时并不会reject，只有网络错误导致请求不能完成时，fetch 才会被 reject。
  • fetch 默认不会带 cookie，需要配置 fetch(url, {credentials: 'include'}😉
  • fetch 不支持超时控制。使用 setTimeout 及 promose.reject 的实现的超时控制并不能阻止请求过程继续在后台运行，造成流量浪费。
  • fetch 没有办法原生监控请求的进度。

# axios

  • 基于promise 封装的 HTTP 客户端。
  • 浏览器发起 XMLHttpRequest 请求。
  • node 端发起 http 请求。
  • 支持 promise 请求。
  • 监听请求和返回。
  • 拦截器。
  • 取消请求。
  • 自动转换 json 数据。
  • 客户端支持防御 XSRF 攻击。

← ajax →