vue封装请求

当你在Vue项目中需要封装GET和POST请求时，你可以创建一个专门处理网络请求的模块。下面是一个简单的示例，演示了如何在Vue中封装GET和POST请求。

首先，你需要安装axios，一个常用的处理网络请求的库。你可以使用npm或者yarn进行安装：

npm install axios

然后，在你的Vue项目中创建一个新的JavaScript文件，比如api.js，用来封装GET和POST请求的函数。

// api.js
import axios from 'axios';
const baseURL = 'https://api.example.com'; // 替换成你的API地址
// 封装GET请求
export const get = (url, params) => {
  return axios.get(`${baseURL}/${url}`, { params });
};
// 封装POST请求
export const post = (url, data) => {
  return axios.post(`${baseURL}/${url}`, data);
};

接下来，你可以在Vue组件中引入这些函数，并使用它们来发起网络请求。

// YourComponent.vue
<script>
import { get, post } from './api';
export default {
  methods: {
    fetchData() {
      get('data', { id: 123 })
        .then(response => {
          // 处理GET请求的响应数据
        })
        .catch(error => {
          // 处理GET请求的错误
        });
    },
    submitData() {
      post('submit', { name: 'John', age: 30 })
        .then(response => {
          // 处理POST请求的响应数据
        })
        .catch(error => {
          // 处理POST请求的错误
        });
    }
  }
}
</script>