fetch的用法与解析

2,166 阅读2分钟

写在前面

在开发过程中,我们向服务端发送请求,一般会使用三种方式, XMLHttpRequest(XHR),Fetch ,jQuery实现> 的AJAX。 其中, XMLHttpRequest(XHR)和Fetch是浏览器的原生API,jquery的ajax其实是封装了XHR。

fetch是一种HTTP数据请求的方式,是XMLHttpRequest的一种替代方案。fetch不是ajax的进一步封装,而是原生js。Fetch函数就是原生js,没有使用XMLHttpRequest对象。


fetch基本用法

fetch()的功能与 XMLHttpRequest 基本相同,但有三个主要的差异。

  • fetch()使用 Promise,不使用回调函数,因此大大简化了写法,写起来更简洁。

  • fetch()采用模块化设计,API 分散在多个对象上(Response 对象、Request 对象、Headers 对象),更合理一些;相比之下,XMLHttpRequest 的 API 设计并不是很好,输入、输出、状态都在同一个接口管理,容易写出非常混乱的代码。

  • fetch()通过数据流(Stream 对象)处理数据,可以分块读取,有利于提高网站性能表现,减少内存占用,对于请求大文件或者网速慢的场景相当有用。XMLHTTPRequest 对象不支持数据流,所有的数据必须放在缓存里,不支持分块读取,必须等待全部拿到后,再一次性吐出来。

一个基本的 fetch 请求设置起来很简单:


fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });
  

我们通过网络获取一个 JSON 文件并将其打印到控制台。最简单的用法是只提供一个参数用来指明想 fetch() 到的资源路径,然后返回一个包含响应结果的promise(一个 Response 对象)。 总结为:

  1. fetch api返回的是一个promise对象

  2. Options:

    • method(String): HTTP请求方法,默认为GET
    • body(String): HTTP的请求参数
    • headers(Object): HTTP的请求头,默认为{}
    • credentials(String): 默认为omit,忽略的意思,也就是不带cookie;还有两个参数,same-origin,意思就是同源请求带cookie;include,表示无论跨域还是同源请求都会带cookie
  3. 第一个then函数里面处理的是response的格式


兼容性

由于Fetch API是基于Promise设计,旧浏览器不支持Promise,需要使用pollyfill

1629363953(1).jpg


fetch和ajax 的主要区别

1、fetch()返回的promise将不会拒绝http的错误状态,即使响应是一个HTTP 404或者500 2、在默认情况下 fetch不会接受或者发送cookies