vue实现把接口单独存放在一个文件方式

在Vue项目中，我们可以将接口单独存放在一个文件中，以便于统一管理和维护，提高开发效率。以下是详细攻略：

1. 创建接口配置文件

在项目中创建一个api目录，用于存放所有接口配置文件。在api目录下新建一个文件，如 index.js。示例代码：

import axios from 'axios'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

/**
 * 请求拦截器
 */
service.interceptors.request.use(
  config => {
    // 请求前可以做一些操作
    return config
  },
  error => {
    console.log(error)
    return Promise.reject(error)
  }
)

/**
 * 响应拦截器
 */
service.interceptors.response.use(
  response => {
    // 响应后可以做一些操作
    return response.data
  },
  error => {
    console.log('err' + error) // for debug
    return Promise.reject(error)
  }
)

export default service

此文件中使用了axios库，使用create创建一个http请求实例，统一配置了请求头和响应拦截器，方便在统一管理和处理http请求。可以根据自己项目的需求进行相应的配置。

2. 使用接口配置文件

在Vue组件中需要使用接口时，将接口从接口配置文件中导入即可。示例代码：

import api from '@/api/index'

export default {
  name: 'Example',
  data() {
    return {
      list: []
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      api.get('/list')
        .then(res => {
          this.list = res.data
        })
    }
  }
}

在上述示例代码中，我们将接口配置文件中导出的对象命名为api，在Vue组件中使用api.get('/list')调用接口，获取接口返回数据后更新数据列表。这样，我们就可以在任何需要发送http请求的地方方便地使用所有接口。

除此之外，我们还可以按模块分类，将所有相关的接口存放在相应模块的文件中，方便管理和维护。例如，我们在api目录下创建一个user.js文件，用于存放所有用户相关的接口。示例代码：

import api from './index'

export function login(data) {
  return api.post('/user/login', data)
}

export function getInfo(token) {
  return api.get(`/user/info/${token}`)
}

export function logout() {
  return api.post('/user/logout')
}

在Vue组件中使用时，只需导入该模块的指定接口即可。示例代码：

import { login, getInfo } from '@/api/user'

export default {
  name: 'Login',
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    handleLogin() {
      login({ username: this.username, password: this.password })
        .then(res => {
          this.$router.push('/')
        })
        .catch(error => {
          console.log(error)
        })
    },
    getInfo() {
      getInfo()
        .then(res => {
          console.log(res)
        })
    }
  }
}

这样，我们就可以将所有用户相关的接口都存放在user.js中，方便管理维护。