如何在 Vue 项目中优雅地使用 VueUse 和 Axios？

terry 7小时前阅读数 9 #Vue

文章标签 Axios

在 Vue 项目开发中，VueUse 和 Axios 是两个非常实用的工具，VueUse 提供了一系列的组合式函数，能让我们更方便地处理常见的逻辑；Axios 则是一款强大的 HTTP 客户端，用于与后端 API 进行交互，那怎样才能在 Vue 项目中优雅地使用它们呢？下面我们来详细探讨。

VueUse 的基本使用

VueUse 包含了众多有用的函数，useDark 可以检测用户设备是否处于深色模式，在 Vue 组件中使用它非常简单，首先安装 VueUse：

npm install @vueuse/core

然后在组件中引入并使用：

import { useDark } from '@vueuse/core'
export default {
  setup() {
    const isDark = useDark()
    return {
      isDark
    }
  }
}

这样在模板中就可以根据 isDark 的值来切换不同的样式了，还有 useWindowSize 可以获取窗口的大小，useLocalStorage 方便操作本地存储等等。

Axios 的基础配置

首先安装 Axios：

npm install axios

在项目中创建一个 api.js 文件来进行 Axios 的基础配置，比如设置基础 URL、请求拦截器和响应拦截器：

import axios from 'axios'
const instance = axios.create({
  baseURL: 'https://api.example.com', // 替换成实际的 API 基础 URL
  timeout: 5000 // 设置请求超时时间
})
// 请求拦截器
instance.interceptors.request.use(config => {
  // 可以在这里添加请求头，token
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
}, error => {
  return Promise.reject(error)
})
// 响应拦截器
instance.interceptors.response.use(response => {
  return response.data
}, error => {
  if (error.response) {
    // 处理不同的 HTTP 错误状态码
    switch (error.response.status) {
      case 401:
        // 处理未授权情况，比如跳转到登录页
        break
      case 404:
        // 处理资源未找到情况
        break
      default:
        // 其他错误处理
        break
    }
  }
  return Promise.reject(error)
})
export default instance

这样在其他组件中就可以直接引入 api.js 来发送请求了。

将 VueUse 和 Axios 结合使用

比如我们要实现一个功能,当窗口大小变化时，根据不同的窗口宽度发送不同的 API 请求获取数据，我们可以这样做：

import { useWindowSize } from '@vueuse/core'
import api from './api'
export default {
  setup() {
    const { width } = useWindowSize()
    const fetchData = async () => {
      try {
        if (width.value < 768) {
          const response = await api.get('/api/mobile-data')
          // 处理移动端数据
        } else {
          const response = await api.get('/api/desktop-data')
          // 处理桌面端数据
        }
      } catch (error) {
        console.error(error)
      }
    }
    // 监听窗口大小变化并调用获取数据函数
    width.addEventListener('resize', fetchData)
    // 初始加载时也获取数据
    fetchData()
    return {
      // 可以返回其他需要的数据或方法
    }
  }
}

在这个例子中,我们利用 useWindowSize 获取窗口宽度，然后根据宽度值通过 Axios 发送不同的请求。

封装 Axios 请求

为了让代码更整洁和可维护,我们可以进一步封装 Axios 请求，比如创建一个 user.js 文件来专门处理用户相关的 API 请求：

import api from './api'
export const getUserInfo = async (userId) => {
  try {
    const response = await api.get(`/api/users/${userId}`)
    return response
  } catch (error) {
    throw error
  }
}
export const updateUser = async (userId, userData) => {
  try {
    const response = await api.put(`/api/users/${userId}`, userData)
    return response
  } catch (error) {
    throw error
  }
}

然后在组件中就可以这样使用：

import { getUserInfo } from './api/user'
export default {
  setup() {
    const fetchUser = async () => {
      try {
        const user = await getUserInfo(1) // 假设用户 ID 为 1
        console.log(user)
      } catch (error) {
        console.error(error)
      }
    }
    fetchUser()
    return {
      // 可以返回其他内容
    }
  }
}

错误处理和状态管理

在实际项目中,错误处理和状态管理也很重要，对于 Axios 请求的错误，除了在响应拦截器中进行初步处理外，在组件中调用请求函数时也可以进行更细致的错误提示，比如使用 Toast 组件（假设项目中引入了相关 UI 库）：

import { getUserInfo } from './api/user'
import { Toast } from 'vant' // 假设使用 Vant UI 库
export default {
  setup() {
    const fetchUser = async () => {
      try {
        const user = await getUserInfo(1)
        console.log(user)
      } catch (error) {
        Toast.fail('获取用户信息失败，请稍后重试')
      }
    }
    fetchUser()
    return {
      // 可以返回其他内容
    }
  }
}

关于状态管理,如果项目比较复杂，可以结合 Vuex 或 Pinia，比如使用 Pinia 来管理用户数据：

import { defineStore } from 'pinia'
import { getUserInfo } from './api/user'
export const useUserStore = defineStore('user', {
  state: () => ({
    user: null,
    loading: false
  }),
  actions: {
    async fetchUser() {
      this.loading = true
      try {
        const user = await getUserInfo(1)
        this.user = user
      } catch (error) {
        console.error(error)
      } finally {
        this.loading = false
      }
    }
  }
})

然后在组件中使用：

import { useUserStore } from './stores/user'
export default {
  setup() {
    const userStore = useUserStore()
    userStore.fetchUser()
    return {
      userStore
    }
  }
}

通过以上这些方法,我们可以在 Vue 项目中更优雅地使用 VueUse 和 Axios，让代码结构更清晰，功能实现更高效，同时也便于后续的维护和扩展，无论是处理 UI 相关的逻辑（借助 VueUse），还是与后端进行数据交互（依靠 Axios），都能很好地协同工作，为项目开发带来便利。