您的位置:

使用Vue访问后端API

一、前置准备

在我们开始使用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请求,并在请求中携带pageNumpageSize两个查询参数。

五、发送带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指令来根据异常对象的存在与否展示不同的内容。