JavaScript中Fetch API相关问题记录

一.Fetch API主要内容

目前我们使用Fetch API的时候主要使用REST API，以下是四种常见的方法：

1.GET：取数据库中的数据

2.POST：更新（增加）数据至数据库

3.PUT：修改数据至数据库

4.DELETE：删除数据至数据库

在每个REST API中都有三个元素：

Request：包含发送给API的数据

Response：从服务器返回的成功/失败信息（请求）

Headers：帮助服务器理解这是何种请求，例如，content-type

使用REST API的真正优势在于我们可以构建单个API层以供多个应用程序使用

二.如何使用REST API

目前我们在写web应用时涉及到从外部取数据（Fetch API）时，经常使用的是AJAX请求。

AJAX是Asynchronous JavaScript and XML的缩写，英语单词“asynchronous”也有暂时不做、在未来去做的含义，因此这个缩写的意思是用JavaScript执行异步网络请求。这样可以解决某些网络请求速度慢但是不影响用户体验的场景，例如下载文件、和数据库做交互（做增删改查）等等。

由于一次HTTP请求对应一个页面，那么通过AJAX请求我们可以让用户停留在当前页面中，同时发出新的HTTP请求，通过JavaScript发送这个新请求且接收到数据后，再用JavaScript更新页面，这样用户就感觉自己仍然停留在当前页面，但数据却可以不断地更新。

由于AJAX请求是异步执行的，因此要通过回调函数获得响应。

当请求次数增多时，会形成回调地狱(Callback Hell)，使得代码易读性变差（嗯，都不想读了），因此为了解决回调地狱，我们可以优化写法。

三.fetch API基本写法

在使用JSON进行数据交互之前，XMLHttpRequest是最常见的方法。目前我们可以将fetch方法看作XMLHttpRequest的升级版，但是它有一些和XMLHttpRequest有三个主要区别

a.fetch API 使用Promise，不使用回调函数，因此简化了写法

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

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

基本写法如下：

fetch(url)
  .then(...)
  .catch(...)

其中fetch()接受一个URL字符串作为参数，默认向该网址发出GET请求，返回一个Promise对象。

以下是一个例子：

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => console.log(json))
  .catch(err => console.log('Request Failed', err));

上面示例中，fetch()接收到的response是一个Stream对象 (Stream对象含义参考MDN文档)，response.json()是一个异步操作，取出所有内容，并将其转为 JSON 对象。

Promise 可以使用 await 语法改写，使得语义更清晰。

async function getJSON() {
  let url = 'https://jsonplaceholder.typicode.com/todos/1';
  try {
    let response = await fetch(url);
    return await response.json();
  } catch (error) {
    console.log('Request Failed', error);
  }
}

上面示例中，await语句必须放在try...catch里面，这样才能捕捉异步操作中可能发生的错误。

后文都采用await的写法，不使用.then()的写法。

以上一些有关Fetch API的基本知识，太基础了，主要是供我自己参考吧。