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 数据时会使用一个表单或者普通的对象。

总结

JavaScript fetch 接口可以从服务器获取资源，并解决了跨域问题。GET 请求用于获取数据，POST 请求用于创建数据。上述代码可以实现向服务器请求资源和发送数据，适用于开发 Web 应用程序和移动应用程序。