vue3 axios post 及 封装axios拦截器问题

Question

用 axios.post 发起post请求 ，报错如下：

用自己封装的 request.post 发起post请求 ，报错如下：

---

前端方法代码：

const register = async () => {
  await form.value.validate()
  await userRegisterService(formModel.value)
  ElMessage.success('注册成功')
  isRegister.value = false
}

const userStore = useUserStore()
const router = useRouter()

const login = async () => {
  try {
    await form.value.validate()
    const res = await userLoginService(formModel.value)
    userStore.setToken(res.data.token)
    ElMessage.success('登录成功')
    router.push('/')
  } catch (error) {
    console.error('Error fetching data:', error)
  }
}

---

前端api代码：

import request from '@/utils/request'
import axios from 'axios'
//注册接口
export const userRegisterService = ({ username, password, empId, state }) => {
  return request.post('/admin/empaccount', {
    username,
    password,
    empId,
    state
  })
}

// 登录接口
export const userLoginService = ({ username, password }) => {
  try {
    return axios.post('/admin/empaccount/login', { username, password })
  } catch (error) {
    console.error('Error fetching data:', error)
  }
}

---

封装axios 拦截器

import axios from 'axios'
import { useUserStore } from '@/stores'
import { ElMessage } from 'element-plus'
import router from '@/router'

const baseURL = '/api'

const instance = axios.create({
  baseURL,
  timeout: 30000
})

// 添加请求拦截器
instance.interceptors.request.use(
  (config) => {
    const useStore = useUserStore()
    // 在请求中添加 Token
    if (useStore.token) {
      config.headers.Authorization = useStore.token
    }
    return config
  },
  (err) => Promise.reject(err)
)

//响应拦截器
instance.interceptors.request.use(
  (res) => {
    if (!res.data) {
      return res
    }
    if (res.data.code === 1) {
      return res
    }
    ElMessage.error(res.data.msg || '服务异常1')
    return Promise.reject(res.data)
  },
  (err) => {
    if (err.response?.status === 401) {
      router.push('/login')
    }
    ElMessage.error(err.response.data.message || '服务异常2')
    return Promise.reject(err)
  }
)

export default instance
export { baseURL }

---

前端代理：

  //前端服务配置修改
  server: {
    host: '0.0.0.0', //服务启动地址
    port: 7777, //服务启动端口
    open: true, //启动后是否打开浏览器
    proxy: {
      '/api': {
        target: 'http://localhost:8888/',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }

---

Answer 1

引自免费微信小程序：皆我百晓生

看起来你在尝试使用 Vue.js、axios 和一个自定义的请求库进行前后端交互时遇到了一些问题。让我们逐步分析并解决这些问题。

首先，我们来看一下错误信息。在第一个例子中，你使用 axios.post 直接发起请求，返回了 404 错误，这意味着服务器找不到你请求的资源。这可能是因为你的 URL 不正确，或者是服务器端的问题。从提供的信息看，请求 URL 是 http://localhost:7777/admin/empaccount/login，但你似乎已经设置了代理，所以应该使用代理后的路径。

在第二个例子中，你使用了封装的 request.post 方法，但是出现了 Vue 的警告，这表明在组件事件处理程序中发生了未捕获的错误。这通常与错误处理有关，可能是由于错误没有被正确的 catch 块捕获。

为了解决这些问题，你需要做以下几步：

1. 调整请求 URL：既然你已经在前端设置了代理，你应该使用代理后的路径。因此，在 userLoginService 中，将请求 URL 修改为 /admin/empaccount/login 替换为 /api/admin/empaccount/login。
2. 修复错误处理：在 userLoginService 中，你需要确保任何错误都被正确地处理。你当前的实现并没有正确地返回 Promise，导致了 Vue 警告。修正后的代码应如下所示：

// 登录接口
export const userLoginService = ({ username, password }) => {
  try {
    const response = await axios.post('/api/admin/empaccount/login', { username, password });
    if (response.status === 200) {
      return response.data;
    }
  } catch (error) {
    console.error('Error fetching data:', error);
    throw error; // 抛出错误以便上层代码可以捕获
  }
};

1. 统一错误处理：在你的主业务逻辑（例如 login 函数），你需要确保所有的错误都被处理，包括来自 userLoginService 的错误。你可以通过修改 login 函数来实现这一点：

async function login() {
  try {
    await form.value.validate();
    const res = await userLoginService(formModel.value);
    userStore.setToken(res.data.token);
    ElMessage.success('登录成功');
    router.push('/');
  } catch (error) {
    console.error('Error fetching data:', error);
    ElMessage.error('登录失败，请检查您的用户名和密码。'); // 更友好的错误提示
  }
}

这样，无论是在 axios.post 还是自定义的 userLoginService 中发生的错误，都会被捕获并在 login 函数中处理。

按照这些更改，你应该能解决你现在遇到的问题。如果你仍然遇到问题，或者有新的疑问，请随时告诉我。