普通的vue项目中如何封装数据请求

在普通的Vue项目中，可以使用Axios来进行数据请求，并将其封装成一个单独的模块。以下是一个简单的封装示例：

首先，安装Axios：

npm install axios

创建一个api.js文件，用于封装数据请求：

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com' // 设置基本的请求URL
});

export default {
  getData() {
    return api.get('/data'); // 发起GET请求
  },

  postData(data) {
    return api.post('/data', data); // 发起POST请求
  }
}

在需要使用数据请求的组件中，引入api.js并调用相关方法：

<template>
  <div>
    <button @click="fetchData">获取数据</button>
    <ul>
      <li v-for="item in dataList" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import api from './api.js';

export default {
  data() {
    return {
      dataList: []
    }
  },

  methods: {
    fetchData() {
      api.getData().then(response => {
        this.dataList = response.data;
      }).catch(error => {
        console.log(error);
      });
    }
  }
}
</script>

通过以上封装，可以将数据请求的相关逻辑与组件解耦，方便管理和维护。同时，如果以后需要更改数据请求的方式或接口地址，只需要修改api.js文件即可，而不需要修改每个组件中的具体请求代码