JavaScript fetch是一种新的用于从服务器获取资源的方式，它支持 Promise，并内置了 json() 函数用于解析返回的 JSON 数据。同时它的 API 具有清晰、简洁的语法，并解决了跨域问题，是我们日常工作中经常使用的工具。本文将详细讲述 JavaScript fetch

JavaScript fetch接口案例解析

简介

JavaScript fetch是一种新的用于从服务器获取资源的方式，它支持 Promise，并内置了 json() 函数用于解析返回的 JSON 数据。同时它的 API 具有清晰、简洁的语法，并解决了跨域问题，是我们日常工作中经常使用的工具。本文将详细讲述 JavaScript fetch 的使用方法以及在实际开发中的应用。

发送 GET 请求

发送 GET 请求的语法如下：

fetch(url, init);

其中 url 是请求的地址，init 是配置选项，如下：

method: 请求方法，默认为 GET
headers: 请求头部信息
mode: 请求的模式（cors, no-cors, same-origin），默认为 cors
cache: 缓存模式（default, no-store, reload, no-cache, force-cache, only-if-cached）
credentials: 是否允许携带 cookie（omit, same-origin, include），默认为 same-origin
redirect: 如何处理重定向（follow, error, manual），默认为 follow
referrer: 引用页头部信息（只有在需要该信息的时候才会被发送）
referrerPolicy: 引用页验证策略（no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, unsafe-url）
integrity: 完整性校验

示例代码如下：

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

这个例子演示了如何向服务器请求 JSON 数据并展示在控制台里。通常我们会把 JSON 数据用于更新界面上的内容。

发送 POST 请求

发送 POST 请求和 GET 请求的语法很相似，只是需要在配置选项中加入 body 参数。例如，我们向指定目录里添加文件，需要传递文件名和内容信息，那么请求代码如下：

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    fileName: 'file1.txt',
    content: 'This is a file content.'
  })
})
  .then(response => response.json())
  .then(json => console.log(json))
  .catch(error => console.error(error));

这个例子演示了如何向服务器发送 POST 请求并且发送 JSON 数据。这只是一个模拟例子，实际上通常发送 JSON 数据时会使用一个表单或者普通的对象。