使用Vue访问后端API

发布时间：2023-05-20

一、前置准备

在我们开始使用Vue访问后端API之前，需要先确保有以下几点准备：

  1. 已经安装好Vue框架（这里假设我们使用Vue2.x版本）
  2. 已经有后端API可供访问，并了解其接口文档
  3. 已经通过npm等方式安装了axios库（用于发送HTTP请求）

二、发送GET请求

为了方便演示，我们假设后端API的接口地址为：http://localhost:8080/api/data 下面是一个简单的Vue组件，它可以向后端API发送GET请求并将返回的数据展示出来：

<template>
  <div>
    <ul>
      <li v-for="item in dataList" :key="item.id">
        {{ item.id }} - {{ item.name }}
      </li>
    </ul>
  </div>
</template>
<script>
  import axios from 'axios';
  export default {
    data() {
      return {
        dataList: [],
      };
    },
    created() {
      axios.get('http://localhost:8080/api/data')
        .then(response => {
          this.dataList = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    },
  };
</script>

上面的代码中，我们在created生命周期中使用axios.get方法发送GET请求，并将返回的数据保存到组件的dataList属性中。在组件的模板中，我们使用v-for指令遍历dataList数组，并将每个数据项展示出来。

三、发送POST请求

除了GET请求外，我们还常常需要发送POST请求，并且需要在请求体中携带数据。下面的代码展示了如何向后端API发送POST请求并在请求体中携带JSON数据：

<template>
  <div>
    <form @submit.prevent="submitFormData">
      <div>
        <input type="text" v-model="form.name" />
      </div>
      <div>
        <button type="submit">Submit</button>
      </div>
    </form>
  </div>
</template>
<script>
  import axios from 'axios';
  export default {
    data() {
      return {
        form: {
          name: '',
        },
      };
    },
    methods: {
      submitFormData() {
        axios.post('http://localhost:8080/api/data', this.form)
          .then(response => {
            console.log(response.data);
          })
          .catch(error => {
            console.error(error);
          });
      },
    },
  };
</script>

上面的代码中，我们定义了一个表单，并在submitFormData方法中使用axios.post方法发送POST请求。请求体中携带的数据是Vue组件中的form对象。

四、发送带参数的请求

有时候，我们需要在URL中携带一些查询参数，例如分页参数等。下面的代码展示了如何向后端API发送带查询参数的GET请求：

<template>
  <div>
    <ul>
      <li v-for="item in dataList" :key="item.id">
        {{ item.id }} - {{ item.name }}
      </li>
    </ul>
  </div>
</template>
<script>
  import axios from 'axios';
  export default {
    data() {
      return {
        dataList: [],
        pageNum: 1,
        pageSize: 10,
      };
    },
    created() {
      axios.get('http://localhost:8080/api/data', {
        params: {
          page_num: this.pageNum,
          page_size: this.pageSize,
        },
      })
        .then(response => {
          this.dataList = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    },
  };
</script>

上面的代码中，我们使用axios.get方法向后端API发送GET请求，并在请求中携带pageNum和pageSize两个查询参数。

五、发送带Header的请求

在一些场景下，我们需要在请求头中携带一些数据，例如认证token等。下面的代码展示了如何在Vue组件中发送带Header的请求：

<template>
  <div>
    <ul>
      <li v-for="item in dataList" :key="item.id">
        {{ item.id }} - {{ item.name }}
      </li>
    </ul>
  </div>
</template>
<script>
  import axios from 'axios';
  export default {
    data() {
      return {
        dataList: [],
      };
    },
    created() {
      axios.get('http://localhost:8080/api/data', {
        headers: {
          Authorization: 'Bearer ' + localStorage.getItem('token'),
        },
      })
        .then(response => {
          this.dataList = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    },
  };
</script>

上面的代码中，我们在请求头中添加了一个Authorization字段，并将其值设为当前用户的认证token。这样后端API就可以根据这个token来进行认证和授权。

六、处理请求异常

最后，我们需要学会如何处理请求过程中可能出现的异常。通常，我们会在catch中对异常进行处理，并给用户一个提示。

<template>
  <div>
    <ul>
      <li v-for="item in dataList" :key="item.id">
        {{ item.id }} - {{ item.name }}
      </li>
    </ul>
    <p v-if="error">{{ error.message }}</p>
  </div>
</template>
<script>
  import axios from 'axios';
  export default {
    data() {
      return {
        dataList: [],
        error: null,
      };
    },
    created() {
      axios.get('http://localhost:8080/api/data')
        .then(response => {
          this.dataList = response.data;
        })
        .catch(error => {
          this.error = error;
        });
    },
  };
</script>

上面的代码中，我们在组件的data中添加了一个error属性，用于保存异常对象。在模板中，我们可以通过v-if指令来根据异常对象的存在与否展示不同的内容。

推荐文章