vue+axios实现文件下载及vue中使用axios的实例

下面我将详细介绍“vue+axios实现文件下载及vue中使用axios的实例”的完整攻略。

1. 使用axios实现文件下载

使用axios实现文件下载的过程比较简单，只需要在axios请求中设置responseType: 'blob'，同时将后端返回的数据保存为文件即可。

下面是一个示例，首先我们需要一个按钮来触发文件下载：

<template>
  <button @click="download">下载文件</button>
</template>

然后，我们需要在对应的methods中编写下载文件的方法：

<script>
import axios from 'axios';

export default {
  name: 'FileDownload',
  methods: {
    async download() {
      const response = await axios({
        url: 'http://localhost:3000/api/download',
        method: 'GET',
        responseType: 'blob'
      });

      const url = window.URL.createObjectURL(new Blob([response.data]));
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', 'filename.xlsx');
      document.body.appendChild(link);
      link.click();
    }
  }
}
</script>

在上述代码中，我们首先对后端进行了一个GET请求，该请求的返回类型为blob（二进制数据流），接着利用window.URL.createObjectURL()方法将二进制数据流转化为一个可下载的地址。

最后，我们通过创建一个<a>标签并通过JS模拟点击的方式来进行文件的下载。

注意：上述代码中的请求地址需要修改为你自己的后端接口地址。

2. Vue中使用axios的实例

在Vue项目中，我们通常会在main.js或者单独的js文件中进行axios的全局配置，从而在整个项目中使用同一份axios实例。

下面是一个简单的示例，我们在main.js中全局配置axios实例：

import axios from 'axios';

axios.defaults.baseURL = 'http://localhost:3000'; // 后端接口地址

Vue.prototype.$http = axios; // 将axios挂载到Vue原型链上，以便在组件中使用

配置完成后，我们就可以在组件中使用this.$http进行请求了。例如，在一个用户列表展示页面，我们需要获取后端返回的所有用户：

<script>
export default {
  name: 'UserList',
  data() {
    return {
      userList: []
    }
  },
  async created() {
    try {
      const response = await this.$http.get('/api/user/list');
      this.userList = response.data;
    } catch (error) {
      console.log(error);
    }
  }
}
</script>

上述代码使用了我们在main.js中定义的全局axios实例，接着通过组件的生命周期钩子created在页面渲染前从后端获取用户列表数据，并将数据存储在当前组件的data属性中。

另外，如果我们需要在某个组件中对axios进行一些局部的单独配置，也可以通过创建一个新的axios实例来实现：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'http://localhost:3000/api',
  timeout: 1000,
  headers: { 'X-Custom-Header': 'foobar' }
});

instance.get('/user/list') // 单独使用该axios实例进行请求