如何在 Vue.js 中使用 Axios

Axios是一个基于 Promise 的 HTTP 客户端库，适用于浏览器和 Node.js 应用程序，这意味着它可以在前端 JavaScript 应用程序和后端 Node 服务器中使用。

在本文中，我们将了解如何在一个简单的Vue.js应用程序中使用 Axios。Vue 是一个简单的前端 JavaScript 框架，因此这里的 Axios 用例将用于浏览器。

我们将涵盖：

• 本教程使用 Axios 和 Vue.js 的先决条件
• 设置我们的 Vue.js 项目
• 将 Axios 添加到我们的 Vue.js 应用程序
• 在 Vue.js 组件中通过简单的导入使用 Axios
• 通过创建插件在我们的 Vue.js 项目中使用 Axios

本教程使用 Axios 和 Vue.js 的先决条件

要继续，您需要安装以下内容：

• Node.js v14 或更新版本
• JavaScript 包管理器
• 您选择的 IDE 或文本编辑器，例如 Sublime Text 或Visual Studio Code

我们将使用 npm 作为我们的 JavaScript 包管理器，安装 Node.js 时会包含它。

设置我们的 Vue.js 项目

我们将使用 Vue CLI 创建我们的项目，首先运行以下命令：

$ npm init vue@latest

该命令提示我们选择如何设置我们的项目。

我选择为这个项目命名是mice-away因为——你猜对了——我们正在构建一个有趣的与猫相关的应用程序！我们还将设置它以使用 TypeScript。

这是一个Vue查看（我忍不住）我的项目配置；随意更改您的喜好：

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →

Axios 通过各自名称的函数提供对不同 HTTP 方法的访问。例如，可以用于.post(…)POST 请求，也可以用于.get(…)GET 请求等。让我们看看在我们的 Vue 项目中使用 Axios 处理 HTTP 请求的选项！

将 Axios 添加到我们的 Vue.js 应用程序

我们可以通过运行以下命令来安装 Axios：

$ npm i axios

现在已经安装了 Axios，我们将看看在我们的项目中使用它的两种方法。

在 Vue.js 组件中通过简单的导入使用 Axios

您可以在 Vue 组件中使用 Axios，只需将其导入需要发出 HTTP 请求的组件中即可。这是一个例子：

// AnimalFacts.vue
​
​
<模板>
    <div class="行">
        <div class="col-md-12">
            <h3>猫的事实</h3>
        </div>
        <div class="col-md-12">
            <ul class="list-group">
                <li v-for="(fact, index) in catFacts" :key="index" class="list-group-item">{{index + 1}}。{{fact.text}}</li>
            </ul>
        </div>
        <div class="row mt-3">
            <div class="col-md-12 text-center">
                <button @click="loadMoreFacts" class="btn btn-md btn-primary">{{ fetchingFacts ? '...' : '加载更多' }}</button>
            </div>
        </div>
    </div>
</模板>
<script lang="ts">
    从'vue'导入{defineComponent}
    从'axios'导入axios
    接口动物事实{
        文本：字符串
    }
    导出默认定义组件（{
        名称：'AnimalFacts'，
        数据（） {
            返回 {
                catFacts: [] 作为 AnimalFacts[],
                fetchingFacts：假
            }
        },
        方法： {
            异步 fetchCatFacts() {
                const catFactsResponse = await axios.get<AnimalFacts[]>('https://cat-fact.herokuapp.com/facts/random?animal_type=cat&amount=5')
                this.catFacts = catFactsResponse.data
            },
            异步加载更多事实（）{
                this.fetchingFacts = true
                const catFactsResponse = await axios.get<AnimalFacts[]>('https://cat-fact.herokuapp.com/facts/random?animal_type=cat&amount=5')
                this.catFacts.push(...(catFactsResponse.data || []))
​
                this.fetchingFacts = false
            }
        },
        异步安装（）{
            等待 this.fetchCatFacts()
        }
    })
</脚本>

在这个示例中，我们在组件中导入了 Axios，并在其中一个组件方法中使用它，通过调用该方法来获取数据以显示在页面上GET。您可以在下面看到此方法的结果：

通过创建插件在我们的 Vue.js 项目中使用 Axios

在我们的项目中使用 Axios 的另一个选择是创建一个插件并为我们的项目分配一个全局 Axios 实例。当您构建应用程序以使用特定 API（可将其配置为基本 URL）时，此选项很有用。

让我们创建我们的 Axios 插件！

首先，我们将通过在终端中运行以下命令来创建一个目录来存放我们的插件：

$ cd src/
$ mkdir 插件

接下来，我们将通过在终端中运行以下命令来创建我们的 Axios 插件文件axios.ts：

柒核免费工具箱App，日常必备聚合工具软件，满足你日常所需！

来自 LogRocket 的更多精彩文章：

• 不要错过来自 LogRocket 的精选时事通讯The Replay
• 使用 React 的 useEffect优化应用程序的性能
• 在多个 Node 版本之间切换
• 了解如何使用 AnimXYZ 为您的 React 应用程序制作动画
• 探索 Tauri，一个用于构建二进制文件的新框架
• 比较NestJS 与 Express.js
• 发现TypeScript 领域中使用的流行 ORM

$ 触摸 axios.ts

然后，在我们新创建的axios.ts文件中，我们将创建一个 Axios 实例并使其成为全局属性：

// axios.ts
​
从'axios'导入axios
从“vue”导入类型 {App}
​
接口 AxiosOptions {
    baseUrl?: 字符串
    令牌？：字符串
}
​
导出默认 {
    安装：（应用程序：应用程序，选项：AxiosOptions）=> {
        app.config.globalProperties.$axios = axios.create({
            baseURL：options.baseUrl，
            标题：{
                授权：options.token ? `承载 ${options.token}` : '',
            }
        })
    }
}

现在，我们将我们的插件注册到我们的 Vue 实例中main.ts。在注册我们的 Axios 插件时，我们将传入实例选项，包括我们的baseUrl：

// main.ts
​
从'vue'导入{createApp}
从'pinia'导入{createPinia}
​
从 './App.vue' 导入应用程序
从'./router'导入路由器
从 './plugins/axios' 导入 axios
​
const app = createApp(App)
​
app.use(createPinia())
app.use（路由器）
app.use(axios, {
    baseUrl: 'https://cataas.com/',
})
​
app.mount('#app')

现在我们已经注册了 Axios，我们有一个全局的 Axios 对象可以作为this.$axios. 让我们在我们的组件中使用它：

// HomeView.vue
​
<脚本设置 lang="ts">
</脚本>
<模板>
  <主>
    <div class="行">
      <div class="col-md-12 text-center mb-3">
        <span @click="selectTag(tag)" v-for="(tag, index) in visibileTags" :key="index"
          class="badge rounded-pill fs-5 me-2" :class="[tag === activeTag ? 'text-bg-primary' : 'text-bg-secondary']">
            ＃{{标签}}
        </span>
        <span @click="showNext()" class="badge rounded-pill text-bg-light fs-4">...</span>
      </div>
    </div>
    <div v-if="catImage" class="row">
      <div class="col-md-12 text-center">
        <img :src="catImage" class="img-fluid" height="500" width="450" :alt="activeTag ?? '默认图片'">
      </div>
    </div>
  </main>
</模板>
<script lang="ts">
从'vue'导入{defineComponent}
从“axios”导入类型 {AxiosInstance}
​
声明模块'@vue/runtime-core' {
  接口 ComponentCustomProperties {
    $axios: axiosInstance
    catTags：字符串[]
  }
}
​
接口狗品种{
  名称：字符串
}
​
导出默认定义组件（{
  名称：'主视图'，
  数据（） {
    返回 {
      catTags：[] 作为字符串 []，
      显示开始：0，
      显示计数：5，
      活动标签：''，
      猫图像：''，
    };
  },
  计算：{
    cleanCatTags() {
      返回 this.catTags.filter((tag) => tag !== '').map((tag) => tag.replace(/[&\/\\#,+()$~%.'": *?<>{}]/g, ''))
    },
    总标签（）{
      返回 this.cleanCatTags.length
    },
    显示结束（）{
      const sliceEnd = this.displayCount + this.displayStart
      返回 this.totalTags > sliceEnd ？sliceEnd : this.totalTags
    },
    可见标签（）{
      返回 this.cleanCatTags.slice(this.displayStart, this.displayEnd)
    },
    hasNextTags() {
      返回 this.displayEnd < this.totalTags
    }
  },
  方法： {
    异步 fetchCatTags() {
      const tagsResponse = await this.$axios.get('/api/tags')
      this.catTags = tagsResponse.data
    },
    显示下一个（）{
      this.displayStart += this.displayCount
      this.selectTag(this.cleanCatTags[this.displayStart])
    },
    选择标签（标签：字符串）{
      const baseUrl = 'https://cataas.com/'
      this.catImage = `${baseUrl}cat/${tag}`
      this.activeTag = 标签
    },
    loadDefaultCatImage() {
      const baseUrl = 'https://cataas.com/'
      this.catImage = `${baseUrl}cat/gif`
    }
  },
  异步安装（）{
    等待 this.fetchCatTags()
    this.loadDefaultCatImage()
  },
});
</脚本>

在我们的组件中，我们必须覆盖ComponentCustomProperties要包含$axios为属性的类型。没有这个，我们会得到以下编译器错误：

ComponentCustomProperties 类型上不存在属性 $axios

为了注册$axios，我们还必须通过运行npm i @types/axios和导入 Axios 实例类型来安装 Axios 类型AxiosInstance。

在我们组件的fetchCatTags方法中，我们用来获取猫标签，通过它我们可以显示猫的图像。HomeView``this.$axios

使用我们的插件实例和直接将 Axios 导入我们的组件之间的区别在于，使用插件，我们可以为我们的 Axios 实例配置选项，以避免为每个请求传递某些值。

例如，使用我们的插件，我们不必传入baseUrl，并且我们的请求/api/tags解析为baseUrl我们配置的。

你可以通过在下面创建一个插件来查看使用 Axios 和 Vue 的结果：

结论

在本文中，我们尝试了两种在 Vue 项目中使用 Axios 的方法。

第一个选项是将 Axios 对象直接导入到我们的组件中，我们用它来从很酷的 cat fact API中获取 cat fact 。

我们的第二个选项是创建一个注入全局 Axios 对象的 Axios 插件。我们还将 Axios 实例的基本 URL 配置为cat as a service API，这意味着我们不必在请求中指定完整的 URL。

您可以在我的 Github 存储库中找到本文中使用的全部代码。

我希望你觉得这篇文章有用。请在评论部分分享您可能有的任何想法或问题！

以用户的方式体验您的 Vue 应用程序

调试 Vue.js 应用程序可能很困难，尤其是在用户会话期间有数十个甚至数百个突变时。如果您对监控和跟踪生产中所有用户的 Vue 突变感兴趣，请尝试 LogRocket。LogRocket | Signup

LogRocket就像一个用于 Web 和移动应用程序的 DVR，从字面上记录您的 Vue 应用程序中发生的所有事情，包括网络请求、JavaScript 错误、性能问题等等。无需猜测问题发生的原因，您可以汇总并报告问题发生时应用程序所处的状态。

LogRocket Vuex 插件将 Vuex 突变记录到 LogRocket 控制台，为您提供有关导致错误的原因以及发生问题时应用程序处于什么状态的上下文。