vue 封装axios,写一个get请求

Vue封装Axios是一种常见的前端开发技巧，它可以简化在Vue项目中使用Axios进行网络请求的过程。下面是一个示例，展示如何封装一个基于Axios的GET请求：

首先，安装Axios依赖：

npm install axios

然后，在项目中创建一个api.js文件，用于封装Axios请求：

import axios from 'axios';

// 创建一个axios实例
const instance = axios.create({
  baseURL: 'http://api.example.com', // 设置请求的基础URL
  timeout: 5000, // 设置请求超时时间
});

// 封装GET请求方法
export function get(url, params) {
  return instance.get(url, {
    params: params,
  });
}

接下来，在Vue组件中使用封装好的GET请求方法：

import { get } from './api.js';

export default {
  methods: {
    fetchData() {
      get('/data', { id: 1 })
        .then(response => {
          // 处理请求成功的响应数据
          console.log(response.data);
        })
        .catch(error => {
          // 处理请求失败的错误信息
          console.error(error);
        });
    },
  },
};

在上述示例中，我们通过封装的get方法发送了一个GET请求到`http://api.example.com/data`，并传递了一个id参数。在请求成功时，我们可以通过`response.data`获取到响应数据；在请求失败时，我们可以通过`error`获取到错误信息。