下载文件axios请求头

在前端开发中，经常会遇到需要下载文件的场景，例如下载用户上传的文件、导出数据报表等。而axios是一种常用的发送HTTP请求的库，它提供了方便的方法来发送请求并处理响应。本文将介绍如何使用axios发送下载文件的请求，并说明如何设置请求头。

axios简介

axios是一个基于Promise的HTTP客户端，可以在浏览器和Node.js中发送请求。它提供了许多强大的功能，例如拦截请求和响应、自动转换请求和响应数据、取消请求等。

axios的使用非常简单，可以通过npm安装，并在项目代码中引入。

npm install axios

import axios from 'axios';

axios.get('/api/user')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

下载文件

要下载文件，首先需要发送一个GET请求来获取文件的内容。在axios中，可以使用get方法发送GET请求，并通过responseType参数指定响应的数据类型为blob。blob表示二进制大对象，可以用来表示和操作文件数据。

axios.get('/api/file', {
  responseType: 'blob'
})
  .then(response => {
    // 处理文件数据
    const blob = new Blob([response.data], { type: response.headers['content-type'] });
    const url = window.URL.createObjectURL(blob);

    // 创建一个a标签
    const link = document.createElement('a');
    link.href = url;
    link.download = 'file.txt'; // 设置下载文件的文件名
    link.click();

    // 释放URL对象
    window.URL.revokeObjectURL(url);
  })
  .catch(error => {
    console.error(error);
  });

在上面的代码中，我们通过new Blob([response.data], { type: response.headers['content-type'] })创建了一个Blob对象，将响应数据转换为二进制对象。然后使用window.URL.createObjectURL方法创建一个URL对象，将Blob对象的内容作为URL对象的数据。

接下来，我们创建一个a标签，设置其href属性为URL对象的URL，并通过download属性指定下载的文件名。最后，调用click方法触发点击事件来下载文件。

设置请求头

有时候，我们需要在发送请求时设置一些请求头，以便服务器能够正确地处理请求。在axios中，可以通过headers参数来设置请求头。

axios.get('/api/user', {
  headers: {
    Authorization: 'Bearer token'
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

在上面的代码中，我们通过headers参数设置了一个名为Authorization的请求头，其值为Bearer token。这个请求头可以用于身份验证，告诉服务器当前请求是经过授权的。

除了设置单个请求头外，还可以通过headers参数设置多个请求头。

axios.get('/api/user', {
  headers: {
    Authorization: 'Bearer token',
    'Content-Type': 'application/json'
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

在上面的代码中，我们设置了两个请求头：Authorization和Content-Type。

总结

本文介绍了如何使用axios发送下载文件的请求，并设置请求头。通过设置responseType: 'blob'，可以将响应数据转换为二进制对象，进而实现文件下载。同时，通过headers参数可以设置请求头，以满足特定的请求需求。

axios是一个功能强大且易于使用的HTTP客户端，可以在前端开发中帮助我们处理各种HTTP请求。希望本文能够帮助你理解如何使用axios下载文件，并设置请求头。

关系图

erDiagram
    User ||--o{ File : has

表格

User File
id id
name name
email url