vue封装api ai生成

Vue封装API，通常是指将一些常用的请求方法和参数进行封装，以便在不同的组件中重复使用。

以下是一个简单的Vue API封装的例子：

import axios from 'axios'

const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  headers: {
    'Content-Type': 'application/json'
  }
})

export default {
  getProducts() {
    return apiClient.get('/products')
  },

  getProduct(id) {
    return apiClient.get('/products/' + id)
  },

  createProduct(product) {
    return apiClient.post('/products', product)
  },

  updateProduct(product) {
    return apiClient.put('/products/' + product.id, product)
  },

  deleteProduct(id) {
    return apiClient.delete('/products/' + id)
  }
}

在此示例中，我们创建了一个名为apiClient的axios实例，并定义了一组常用的HTTP请求，如getProducts，getProduct，createProduct和updateProduct，以及deleteProduct。这使得我们可以在Vue组件中轻松地调用这些方法。例如：

<script>
import api from '@/api'

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

  mounted() {
    this.fetchProducts()
  },

  methods: {
    async fetchProducts() {
      const response = await api.getProducts()
      this.products = response.data
    }
  }
}
</script>

通过Vue封装API，我们可以减少在组件中重复编写相同代码的次数，并提高代码的可维护性和可重用性。

1. 首先在Vue项目中创建一个api文件夹，用于存放所有的API接口。

2. 在该文件夹中创建一个index.js文件，用于封装所有的API接口，并在每次请求API接口时带上token。

   import axios from 'axios'
   
   // 创建axios实例
   const service = axios.create({
     baseURL: process.env.VUE_APP_BASE_API,
     timeout: 5000 // 请求超时时间
   })
   
   // request拦截器
   service.interceptors.request.use(
     config => {
       // 如果有token，则带上token
       if (localStorage.getItem('token')) {
         config.headers['Authorization'] = localStorage.getItem('token')
       }
       return config
     },
     error => {
       // 请求错误处理
       console.log(error)
       Promise.reject(error)
     }
   )
   
   // response拦截器
   service.interceptors.response.use(
     response => {
       const res = response.data
       if (res.code !== 20000) {
         // 错误处理
         return Promise.reject(new Error(res.message || 'Error'))
       } else {
         return res
       }
     },
     error => {
       console.log('err' + error)
       return Promise.reject(error)
     }
   )
   
   // 封装所有的API接口
   export function login(params) {
     return service({
       url: '/login',
       method: 'post',
       data: params
     })
   }
   
   export function getUserInfo() {
     return service({
       url: '/user/info',
       method: 'get'
     })
   }
   
   // 。。。其他API接口
   

3. 在Vue组件中直接引入上述封装的API接口即可调用：

   import { login, getUserInfo } from '@/api'
   
   // 调用API接口，带上token
   login(params).then(res => {
     // 处理登录逻辑
   })
   
   // 调用API接口，带上token
   getUserInfo().then(res => {
     // 处理获取用户信息逻辑
   })
   

   注意：在调用API接口时需要先登录并保存token，可以将token保存在localStorage中。