位置: IT常识 - 正文
如何在 Vue.js 中使用 Axios(vue.js in action)
编辑：rootadmin推荐整理分享如何在 Vue.js 中使用 Axios(vue.js in action)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue中写jsx,vue.js放在哪,vue.js使用教程,vue中怎么引入js文件,vue.js computed,vue.js放在哪,vue.js如何使用,vue.js如何使用,内容如对您有帮助，希望把文章链接给更多的朋友！
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' 导入 axiosconst 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}上一篇：echarts柱状图坐标轴的内容太长导致显示不全的两种解决办法(echarts柱状图坐标轴)
下一篇：蓝桥杯web开发-5道模拟题让你信心满满(蓝桥杯web开发 618)
