vue接口axios封装

对于 Vue 项目中的接口请求，可以使用 axios 库进行封装和管理。以下是一个简单的示例：

1. 首先，安装 axios 库：

npm install axios

2. 在项目的 src 目录下创建一个 api 文件夹，并在该文件夹下创建一个 api.js 文件。

3. 在 api.js 文件中，封装接口请求的方法。例如：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'http://api.example.com', // 接口的基础路径
  timeout: 5000, // 请求超时时间
});

export const getUserInfo = (userId) => {
  return instance.get(`/user/${userId}`);
};

export const login = (username, password) => {
  return instance.post('/login', {
    username,
    password,
  });
};

// 其他接口的封装...

4. 在需要使用接口的地方，引入 api.js 文件，并调用相应的方法。例如，在 Vue 组件中：

import { getUserInfo } from '@/api/api.js';

export default {
  data() {
    return {
      userInfo: null,
    };
  },
  mounted() {
    this.getUserData();
  },
  methods: {
    getUserData() {
      getUserInfo(123)
        .then((response) => {
          this.userInfo = response.data;
        })
        .catch((error) => {
          console.error(error);
        });
    },
  },
};

这样，你就可以通过调用封装好的接口方法，发送请求并处理响应了。当然，在实际项目中，你可能还需要处理请求的错误、添加请求拦截器和响应拦截器等，这里只是一个简单的示例。