【JavaScript】Fetch

[swiftwind0405]

Fetch API是一个用用于访问和操纵 HTTP 管道的强大的原生 API。

这种功能以前是使用 XMLHttpRequest实现的。Fetch提供了一个更好的替代方法，可以很容易地被其他技术使用，例如 Service Workers。Fetch还提供了单个逻辑位置来定义其他HTTP相关概念，例如CORS和HTTP的扩展。

可见 fetch 是作为 XMLHttpRequest 的替代品出现的。
使用 fetch，不需要再额外加载一个外部资源。但它还没有被浏览器完全支持，所以仍然需要一个polyfill。

fetch 的使用

一个基本的 fetch请求：

const options = {
    method: "POST", // 请求参数
    headers: { "Content-Type": "application/json"}, // 设置请求头
    body: JSON.stringify({name:'123'}), // 请求参数
    credentials: "same-origin", // cookie设置
    mode: "cors", // 跨域
}
fetch('http://www.xxx.com',options)
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson); // 响应数据
  })
  .catch(function(err){
    console.log(err); // 异常处理
  })

由于 fetch 是一个非常底层的 API，它并没有被进行很多封装，还有许多问题需要处理：

• 不能直接传递 JavaScript 对象作为参数
• 需要自己判断返回值类型，并执行响应获取返回值的方法
• 获取返回值方法只能调用一次，不能多次调用
• 无法正常的捕获异常
• 老版浏览器不会默认携带 cookie
• 不支持 jsonp