一、前置准备
在我们开始使用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
指令来根据异常对象的存在与否展示不同的内容。