引用式vue使用axios

### 在 Vue 项目中使用 Axios 发起 HTTP 请求 #### 安装 Axios 库 为了能够在 Vue 项目中利用 Axios 实现 AJAX 请求，首先需要通过包管理工具安装 Axios。对于采用 Yarn 的项目而言，可以通过如下命令完成安装： ```bash yarn add axios ``` 此操作适用于多个 Node.js 版本，并且不会引发错误，表明其具有良好的兼容性[^3]。 #### 创建 Axios 实例并配置基础设置 创建一个新的 JavaScript 文件用于定义全局可用的 Axios 实例以及任何必要的默认配置项。这一步骤有助于简化后续调用流程并且集中管理 API 地址等参数。假设我们将这个文件命名为 `http-common.js`: ```javascript import axios from 'axios'; // 配置公共的基础URL和其他选项 const instance = axios.create({ baseURL: "https://api.example.com/", // 替换成实际API地址 timeout: 1000, }); export default instance; ``` 上述代码片段展示了如何创建一个带有自定义配置的新 Axios 实例，其中包含了目标服务器的基础 URL 及超时时间设定[^2]。 #### 封装 GET 方法请求资源列表 接下来展示怎样编写函数来执行简单的 GET 请求获取远程数据。这里我们继续扩展之前提到过的 `http-common.js` 文件，加入新的方法以便更方便地访问特定类型的资源集合： ```javascript ... // 获取指定ID的文章详情 async function fetchArticle(id) { try { const response = await instance.get(`/articles/${id}`); return response.data; // 返回响应体中的data字段作为结果 } catch (error) { console.error('There was an error fetching the article!', error); } } export {fetchArticle}; ``` 这段代码实现了异步获取文章详情的功能，当遇到异常情况时会打印错误信息到控制台。注意这里的路径 `/articles/:id` 中冒号后的部分代表动态路由参数，在发送真实请求前会被具体的 ID 所替代。 #### 组件内发起请求 最后介绍在组件内部调用这些封装好的功能的方式。下面是一个名为 `ArticleDetail.vue` 单文件组件的例子，它会在挂载阶段尝试加载对应编号的文章内容： ```vue <template> <div v-if="loading">Loading...</div> <div v-else>{{article.title}}</div> </template> <script> import {fetchArticle} from '../services/http-common'; export default { name: 'ArticleDetail', props: ['id'], data() { return { loading: true, article: null } }, mounted(){ this.fetchData(); }, methods:{ async fetchData(){ this.article = await fetchArticle(this.id); this.loading=false; } } </script> ``` 在这个例子中，每当该组件被渲染出来的时候就会自动触发一次对后台服务的数据拉取动作；一旦接收到回复则更新视图显示最新取得的信息。