第八章 Fetch API

web小张
121 阅读5分钟

Fetch API

XMLHttpResquest的问题：

  1. 所有功能全部集中在同一个对象上，容易书写出混乱不易维护的代码
  2. 采用传统的事件驱动模式，无法适配新的Promise API

基本使用

使用fetch函数即可立即向服务器发送网络请求

该函数有两个参数：

  1. 请求地址，必填，类型为字符串
  2. 请求配置，选填，类型为对象
请求配置

请求配置中可以包含如下属性：

  1. method

    请求方法，字符串，默认为"GET"

  2. headers

    请求头，对象

  3. body

    请求体，值的格式必须匹配请求头中的Content-Type

  4. mode

    请求模式，字符串

    cors：默认值，配置为该值，将会在请求头中加入origin和referer，服务器可以根据这两个请求头信息来判断是否允许当前的源获取到数据

    no-cors：配置为该值，将不会在请求头中加入origin和rferer，这可能导致跨域请求时出现问题

    same-origin：指示请求必须在同一个源中发生，如果请求其他的源，将会直接导致错误

  5. credentials

    如何携带凭据（cookie）

    omit：默认值，不携带cookie

    same-origin：请求同源地址时携带cookie

    include：请求任何地址时都携带cookie

  6. cache

    配置缓存模式

    default：在请求之前先检查下http的缓存，有缓存就用缓存的结果，否则就发送请求到服务器并将响应结果存入缓存

    no-store：请求将完全忽略http缓存的存在，这意味着请求之前将不再检查下http的缓存，拿到响应后，它也不会更新http缓存

    no-cache：不管是否存在http缓存，请求都会发送出去，并且每次都会更新缓存结果

    reload：不管是否存在http缓存，请求都会发送出去，若之前存在缓存结果时，才会更新缓存，否则不加入缓存中

    force-cache：请求不顾一切的依赖缓存，即使缓存过期了，依然会从缓存中读取，除非没有任何缓存，那么它将发送一个正常的请求

    only-if-cached：请求不顾一切的依赖缓存，即使缓存过期了，它依然从缓存中读取，如果没有缓存，它将抛出网络错误（该设置只在mode为”same-origin”时有效）

返回值

fetch函数会返回一个Promise对象

当收到服务器的返回结果后，Promise将进入resolved状态，状态数据为Response对象

当网络发生错误时，Promise将进入rejected状态，状态数据为错误对象

状态码为4XX或5XX的响应，这种不是网络错误，而是返回结果

Response对象

Response对象中包含如下属性和方法：

  1. ok

    布尔值，当响应消息码在200~299之间时为true，否则为false

  2. status

    数值，响应消息码

  3. text()

    用于处理文本格式的响应体

    该方法会从响应中获取文本流，并将其读完，然后返回一个已决状态的Promise，Promise的相关数据为响应体字符串

    若读取过程中出现了错误，则返回一个失败状态的Promise

  4. blob()

    用于处理二进制文件格式（比如图片或者电子表格）的响应体

    它读取文件的原始数据，一旦读取完整个文件，就返回一个已决的Promise，Promise的相关数据为blob对象的

  5. json()

    用于处理 JSON 格式的的响应体

    它可以将响应体转换为一个JavaScript对象

  6. redirect()

    可以用于重定向到另一个URL

    该方法会自动对一个已经重定向后的URL进行重新的请求，重新请求的URL就是重定向后的URL

扩展：手动创建Response对象

使用构造函数Response来创建一个Response对象

构造函数Response的第一个参数是响应体内容，第二个参数就是上面所讲的一系列属性

 var resp = new Response(`[
     {"id": 1, "name": "北京"},
     {"id": 2, "name": "天津"}
 ]`, {
     ok: true,
     status: 200
 });

Request对象

fetch函数也可以直接传入一个Request对象

使用Request构造函数来创建一个Request对象

构造函数Request所要传递的参数和fetch一模一样，其实fetch函数内部就会把传递的两个参数给封装为一个Request对象

 var req = new Request("url地址", 配置对象);
 fetch(req)...;

注意：建议每次请求都使用一个全新的Request对象

Request对象中有一个方法clone()，可以拷贝出一个与该Request对象一模一样的新Request对象

Headers对象

Request对象和Response对象中都有一个Headers对象，该对象代表请求或响应的头信息

可以使用构造函数Headers来创建一个Headers对象

 var headers = new Headers({
     "key1": value1,
     "key2": value2
 });

Headers对象中的方法：

  1. has(key)

    判断头部中是否有指定的key值，返回一个布尔值

  2. get(key)

    得到头部中指定key的值

  3. set(key, value)

    设置头部中指定key的值，若设置的是头部中原来不存在的key，则相当于给头部中增加一个键值对

  4. append(key, value)

    为头部中添加指定的键值对，若添加的键值对已经存在，则value会与就的值用逗号字符串进行拼接

  5. keys()

    得到头部中所有的键组成的可迭代对象

  6. values()

    得到头部中所有的值组成的可迭代对象

  7. entries()

    得到头部中所有的["key", "value"]组成的可迭代对象

avatar
文章
阅读
粉丝