JS fetch 下载后端返回的 URL 文件-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_23207707/article/details/134266525

# Fetch 方法

`fetch()` 方法是 JavaScript 提供的用于发送网络请求的函数。它可以用于从后端服务器获取数据、文件等资源。

## 语法

```javascript
fetch(url [, options])
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  });

url：请求的 URL 地址。
options (可选)：一个包含请求参数的对象，例如请求方法、请求头等。

返回值

fetch() 方法返回一个 Promise 对象，该 Promise 对象在请求完成后会解析为一个 Response 对象。

使用示例

以下示例演示了如何使用 fetch() 方法下载后端返回的 URL 文件：

fetch(url)
  .then(response => response.blob())
  .then(blob => {
    const downloadLink = document.createElement('a');
    downloadLink.href = window.URL.createObjectURL(blob);
    downloadLink.download = 'filename.jpg';
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
  })
  .catch(error => {
    console.error('下载文件失败', error);
  });

在上述示例中，我们首先使用 fetch() 方法发送 GET 请求到指定的 url。然后，通过 .then() 方法链式调用，将返回的响应对象转换为 blob 对象，表示要下载的文件内容。接着，我们创建一个 <a> 元素，将 blob 对象的 URL 赋值给 href 属性，指定下载链接。然后，设置下载链接的文件名，并将下载链接添加到页面的 <body> 元素中。最后，触发下载链接的点击事件，浏览器会自动下载文件。下载完成后，将下载链接从页面中移除。

请注意，上述示例中的 url 是指后端返回的文件资源的地址。你需要替换为你实际使用的 URL 地址。

错误处理

如果请求过程中出现错误，可以使用 .catch() 方法捕获错误并进行处理。在上述示例中，我们使用 .catch() 方法打印错误信息到控制台。

.catch(error => {
  console.error('下载文件失败', error);
});

总结

fetch() 方法是一种用于发送网络请求的强大工具，可以用于获取后端返回的数据、文件等资源。它返回一个 Promise 对象，可以通过 .then() 方法处理响应数据，通过 .catch() 方法处理错误。在下载文件时，可以使用 fetch() 方法获取文件内容，并通过创建下载链接实现文件的下载。

以上是关于 fetch() 方法的简单文档，希望对你的笔记有所帮助！如果有任何问题，请随时提问。