要使用 axios-get-post Vue 实现 GET 和 POST 请求，首先需要安装 axios 和 axios-get-post。在项目中运行以下命令：
```bash
npm install axios axios-get-post --save
```
接下来，创建一个名为 `axios.js` 的文件，将以下代码粘贴到文件中：
```javascript
import axios from 'axios';
const axiosGet = axios.create({
baseURL: 'https://jsonplaceholder.typicode.com/',
});
const axiosPost = axios.create({
baseURL: 'https://jsonplaceholder.typicode.com/posts',
});
export default {
get(url, params) {
return axiosGet({ ...params, url })
.then((response) => response.data)
.catch((error) => console.error('Error:', error));
},
post(url, data) {
return axiosPost({ ...data, url })
.then((response) => response.data)
.catch((error) => console.error('Error:', error));
},
};
```
现在，你可以在 Vue 组件中使用这两个方法进行 GET 和 POST 请求。例如：
```html
获取数据
发布数据
import axios from 'axios';
import axiosGet from './axios.js';
import axiosPost from './axios.js';
export default {
methods: {
async getData() {
try {
const response = await axiosGet('/posts');
console.log('获取的数据：', response.data);
} catch (error) {
console.error('获取数据失败：', error);
}
},
async postData() {
try {
const response = await axiosPost('/posts', { title: 'Hello World' });
console.log('发布数据成功：', response.data);
} catch (error) {
console.error('发布数据失败：', error);
}
},
},
};
```
在这个示例中，我们创建了两个方法：`getData` 用于获取数据，`postData` 用于发布数据。在按钮点击事件中调用这两个方法，并使用 `try-catch` 语句处理可能出现的错误。