避免踩坑！详解Vue3+Vite+Ts使用Axios遇到的那些坑

Vue3 + Vite + TS 项目中使用 Axios：常见问题及解决方案

在 Vue3、Vite 和 TypeScript 的组合项目中，Axios 广泛用于处理数据请求，但开发人员可能会遇到一些常见问题和错误。本文将详细探讨这些问题并提供全面的解决方案，帮助你避免陷入陷阱，轻松上手。

问题一：封装 Axios 时遇到的错误

问题

在封装 Axios 时，严格遵循封装规范，但在使用时却遭遇错误，如：

TypeError: Cannot read properties of undefined (reading 'then')

解决方案

此错误通常是由未正确导入 Axios 库引起的。在使用 Axios 之前，确保已通过以下方式安装并导入：

npm install axios

然后在代码中引入：

import axios from 'axios'

问题二：使用 AxiosPromise 时遇到的错误

问题

使用 AxiosPromise 时，可能出现以下错误：

Property 'then' does not exist on type 'AxiosResponse<any>'

解决方案

该错误源于在使用 AxiosPromise 时未指定正确的泛型类型。在使用 AxiosPromise 时，务必明确指定泛型类型，例如：

type LoginResponse = {
  code: number,
  data: any,
  msg: string,
}

const login = (username: string, password: string, code: string, uuid: string): AxiosPromise<LoginResponse> => {
  return axios.post('/login', {
    username,
    password,
    code,
    uuid
  })
}

问题三：解决登录问题

问题描述

使用 Axios 进行登录时，可能会遇到以下问题：

401 Unauthorized

解决方案

此问题通常是由未正确配置登录接口引起的。在使用 Axios 进行登录时，务必确保已正确配置登录接口，包括接口地址、请求方法和请求参数，例如：

const login = (username: string, password: string, code: string, uuid: string): AxiosPromise<LoginResponse> => {
  return axios.post('/api/login', {
    username,
    password,
    code,
    uuid
  })
}

常见问题解答

1. 如何处理 Axios 请求超时？

在 axios.create 中设置 timeout 选项，指定请求超时时间，例如：

const axios = axios.create({
  timeout: 10000 // 10 秒超时
})

2. 如何捕获 Axios 请求错误？

使用 try-catch 或 await 捕获错误，并提供相应的错误处理，例如：

try {
  const response = await axios.get('/api/users')
} catch (error) {
  console.error(error)
}

3. 如何取消 Axios 请求？

AxiosCancelToken 提供了一个 source 对象，可以用于取消请求，例如：

const source = axios.CancelToken.source()

const request = axios.get('/api/users', {
  cancelToken: source.token
})

// 取消请求
source.cancel('Operation canceled by the user.')

4. 如何处理 Axios 响应中的 401 未授权错误？

检查 response.status，如果是 401，则执行以下操作：

if (response.status === 401) {
  // 刷新令牌或重定向到登录页面
}

5. 如何在 Vue 组件中使用 Axios？

在 Vue 组件中创建 data 函数并初始化 Axios 实例，例如：

data() {
  return {
    axios: axios.create({
      baseURL: '/api'
    })
  }
}

结论

通过了解这些常见问题及其解决方案，你可以更轻松地使用 Axios 在 Vue3 + Vite + TS 项目中处理数据请求。记住，持续实践和深入研究将帮助你掌握 Axios 的强大功能，提升你的开发技能。