ES6 Fetch API的基础使用

XMLHttpRequest 的问题

  1. 所有的功能全部几乎在同一个对象上,容易书写出混乱不易维护的代码

  2. 采用传统的事件驱动模式,无法适配的 Promise Api

Fetch Api 的特点

  1. 并非取代 AJAX,而是对 AJAX 传统 API 的改进

  2. 精细的功能分割:头部信息、请求信息、响应信息等均分布到不同的对象,更利于处理各种复杂的 AJAX 场景

  3. 使用 Promise Api,更利于异步代码的书写

  4. Fetch Api 并非 ES6 的内容,属于 HTML5 新增的 Web Api

  5. 需要掌握网络通信的知识。

参数

该函数有两个参数:

  1. 必填:字符串、请求地址

  2. 选填:对象、请求配置

请求配置对象

  • method:字符串、请求方法、默认值 GET

  • headers:对象、请求头信息

  • body:请求体的内容,必须匹配请求头中的 Content-Type

  • mode:字符串,请求模式

    • cors:默认值,配置为该值,会在请求头中加入 origin 和 referer

    • no-cors:配置为该值,不会在请求头中加入 origin 和 referer,跨域的时候可能会出现问题

    • same-origin:指示请求必须在同一个域中发生,如果请求其他域,则会报错

  • credentials:如何携带凭据(cookie)

    • omit:默认值,不携带 cookie

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

    • include:请求任何地址都携带 cookie

  • cache:配置缓存模式

    • default:表示 fetch 请求之前将检查下 http 的缓存。

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

    • reload:表示 fetch 请求之前将忽略 http 缓存的存在,但是请求拿到响应后,它将主动更新 http 缓存。

    • force-cache:表示 fetch 请求不顾一切的依赖缓存,即使缓存过期了,它依然从缓存中读取。除非没有任何缓存,那么它将发送一个正常的 request。

    • only-if-cached:表示 fetch 请求不顾一切的依赖缓存,即使缓存过期了,它依然从缓冲中读取。如果没有缓存,它将抛出网络错误(该设置只在 mode 为"same-origin"时有效)

返回值

fetch 函数返回一个 Promise 对象

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

  • 当网络发生错误(或其他导致无法完成交互的错误)时,Promise 进入 rejected 状态,状态数据为错误信息。

Response 对象

  • ok:boolean,当响应消息吗在 200~299 之间时为 true,其他为 false

  • statu:number,响应的状态码

  • text():用于处理二进制文件格式(比如图片或者电子表格)的 Ajax 响应。它读取文件的原始数据,一旦读取完整个文件,就返回一个被解决为 blob 对象的 Promise。

  • json():用于处理 JSON 格式的 Ajax 的响应。它将 JSON 数据流转换为一个被解决为 JavaScript 对象的 promise。

  • redirect():可以用于重定向到另一个 URL。它会创建一个新的 Promise,以解决来自重定向的 URL 的响应。

相关推荐

  1. ES6 Fetch API基础使用

    2024-03-21 10:14:03       19 阅读
  2. ES6模板字符串基本使用

    2024-03-21 10:14:03       38 阅读
  3. ES6:promise基本使用讲解

    2024-03-21 10:14:03       16 阅读
  4. ES6基础语法

    2024-03-21 10:14:03       42 阅读
  5. ES6基础3

    2024-03-21 10:14:03       23 阅读
  6. ES6基础1

    2024-03-21 10:14:03       18 阅读
  7. ES6基础4

    2024-03-21 10:14:03       17 阅读
  8. ES6基础5

    2024-03-21 10:14:03       21 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-03-21 10:14:03       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-21 10:14:03       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-21 10:14:03       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-21 10:14:03       20 阅读

热门阅读

  1. 使用verilog设计实现16位CPU及仿真

    2024-03-21 10:14:03       18 阅读
  2. 算法刷题day33

    2024-03-21 10:14:03       17 阅读
  3. leetcode 1969.数组元素的最小非零乘积

    2024-03-21 10:14:03       19 阅读
  4. 大语言模型的参数级别和能力之间的关系

    2024-03-21 10:14:03       20 阅读
  5. 深拷贝与浅拷贝

    2024-03-21 10:14:03       20 阅读
  6. [linux] Key is stored in legacy trusted.gpg keyring

    2024-03-21 10:14:03       19 阅读
  7. rust - 对文件进行zip压缩加密

    2024-03-21 10:14:03       17 阅读
  8. 小程序返回webview h5 不刷新问题

    2024-03-21 10:14:03       17 阅读
  9. Redis持久化策略

    2024-03-21 10:14:03       20 阅读
  10. 大数据开发(Hadoop面试真题)

    2024-03-21 10:14:03       19 阅读