vue axios调两次接口

原创

mob64ca12f63d4f 2024-11-13 04:43:20 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12f63d4f的原创作品，请联系作者获取转载授权，否则将追究法律责任

使用 Vue 和 Axios 调用两次接口的实践

在现代的 Web 开发中，Vue.js作为一种非常流行的JavaScript框架，常常与 Axios 结合使用，以便于处理 HTTP 请求。今天，我们将讨论如何使用 Vue 和 Axios 调用同一接口两次，并给出相应的代码示例，以帮助你更好地理解这种用法。

什么是 Axios？

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 node.js。它可以处理请求和响应数据，支持请求和响应拦截器，支持并发请求等。借助 Axios，我们可以方便地与 RESTful API 进行交互。

Vue 项目中使用 Axios

在这个示例中，我们将创建一个 Vue 应用程序，该程序将通过 Axios 调用同一个接口两次，并显示返回的数据。

1. 准备工作

首先，确保你有一个 Vue 项目的基础环境。如果你还没有创建项目，可以使用 Vue CLI 快速启动一个新项目。

vue create my-project
cd my-project
npm install axios

2. 创建 API 接口

为了测试，我们假设有一个可以返回数据的简单 RESTful 接口，例如 `

3. 编写 Vue 组件

在 <template> 中，我们将创建一个按钮和一个展示数据的区域。在 <script> 中，我们将使用 Axios 调用这个接口两次。

<template>
  <div>
    Vue Axios 示例
    <button @click="fetchData">获取数据</button>
    <div v-if="loading">加载中...</div>
    <div v-else>
      <h2>接口返回的数据:</h2>
      <p v-if="error">{{ error }}</p>
      <pre v-else>{{ JSON.stringify(data, null, 2) }}</pre>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      data: null,
      loading: false,
      error: null,
    };
  },
  methods: {
    async fetchData() {
      this.loading = true;
      this.error = null;

      try {
        // 第一次调用接口
        const response1 = await axios.get('
        this.data = response1.data;

        // 第二次调用接口
        const response2 = await axios.get('
        console.log('Second Response:', response2.data);

      } catch (err) {
        this.error = '请求失败: ' + err.message;
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>

<style scoped>
/* 样式可自定义 */
</style>

4. 代码解析

在上面的代码中：

我们首先定义了一些状态变量：data 用于存储请求返回的数据；loading 用于表示是否在加载中；error 用于捕获和显示错误。
fetchData 方法会在按钮点击时触发，开始进行接口请求。
使用 async/await 语法可以使得异步代码更加简洁明了。在第一次请求后，我们将返回的数据存储在 data 上，并在控制台中记录第二次请求的结果。

5. 状态图

为了更清晰地展示请求的流程，我们可以使用 Mermaid 语法绘制一个状态图：

stateDiagram
    [*] --> NotLoaded
    NotLoaded --> Loading
    Loading --> DataFetched1
    DataFetched1 --> DataFetched2
    DataFetched2 --> DisplayData
    Loading --> ErrorState
    ErrorState --> [*]