vue axios调用

### 如何在 Vue 中使用 Axios 进行 HTTP 请求

#### 安装 Axios 库
为了能够在 Vue 项目中使用 Axios 发送 HTTP 请求，首先需要安装 Axios。可以通过 npm 或 yarn 来完成这一操作。

npm install axios

或者

yarn add axios

这一步骤确保了 Axios 被正确引入到项目当中[^1]。

#### 配置 Axios 插件
为了让整个应用都能方便地访问 Axios 实例，在 `main.js` 文件中创建并配置全局可用的 Axios 实例：

import Vue from 'vue';
import App from './App.vue';
import axios from 'axios';

// 创建一个新的 axios 实例，并设置基础 URL 和其他默认选项
const instance = axios.create({
  baseURL: 'https://api.example.com',
});

// 将此实例挂载至 Vue 原型上以便组件内直接调用 this.$http
Vue.prototype.$http = instance;

new Vue({
  render: h => h(App),
}).$mount('#app');

通过这种方式定义了一个带有预设参数的基础 API 地址，并将其绑定到了所有的 Vue 组件之中[^3]。

#### 使用 Axios 执行 GET 请求
当想要获取数据时，可以利用之前设定好的 `$http` 属性来进行简单的 GET 请求。下面是在某个 Vue 组件中的例子：

<template>
  <div id="example">
    <!-- 显示书籍列表 -->
    <ul v-if="books.length > 0">
      <li v-for="(book, index) in books" :key="index">{{ book.title }}</li>
    </ul>

    <!-- 加载状态提示 -->
    <p v-else>Loading...</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      books: [],
    };
  },
  created() {
    // 当组件被创建之后立即发起网络请求加载数据
    this.fetchBooks();
  },
  methods: {
    async fetchBooks() {
      try {
        const response = await this.$http.get('/api/getbooks'); // 注意这里的路径应匹配服务器端的实际接口位置
        this.books = response.data;
      } catch (err) {
        console.error('Failed to load books:', err);
      }
    },
  },
};
</script>

这段代码展示了如何在一个生命周期钩子函数 (`created`) 中执行异步的数据抓取逻辑，并处理成功响应以及可能发生的错误情况。

#### 处理 POST 请求和其他类型的请求
除了 GET 方法之外，还可以轻松构建用于提交表单或上传文件的 POST 请求。这里展示的是怎样构造一个包含 FormData 的 POST 请求来实现文件上传功能：

<template>
  <form @submit.prevent="uploadFile">
    Select file:
    <input type="file" ref="fileInput" />
    <button>Upload</button>
  </form>
</template>

<script>
export default {
  name: "FileUploader",
  methods: {
    uploadFile() {
      let formData = new FormData();
      formData.append("myFile", this.$refs.fileInput.files[0]);

      this.$http.post("/api/upload", formData).then((response) => {
        alert(`File uploaded successfully! ${JSON.stringify(response.data)}`);
      });
    },
  },
};
</script>

上述片段说明了如何收集来自用户的文件输入并通过 Axios 向指定的服务端点发送这些信息作为 multipart/form-data 编码的内容。

#### 设置拦截器以增强安全性与调试能力
对于更复杂的场景来说，可以在应用程序级别添加自定义的行为处理器——即所谓的“拦截器”。它们允许开发者监听所有进出系统的 HTTP 流量并对之作出反应。例如，可以用来统一管理 token 认证机制或是记录日志等用途。

instance.interceptors.request.use(
  config => {
    // 在发送请求前做些什么
    return config;
  },
  error => Promise.reject(error)
);

instance.interceptors.response.use(
  response => {
    // 对于成功的响应做一些事情
    return response;
  },
  error => {
    // 如果发生错误则返回经过处理后的错误对象
    return Promise.resolve(error.response); // 注意此处修改为 resolve 方便后续链式调用
  }
)[^2];

以上就是关于如何在 Vue 中集成和运用 Axios 库的一些基本指导和技术细节。