vue3 axios params 不能获取数据

Question

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'code')

const params = ref({
  name: '',
  page: 1,
  pagesize: 10
})

const getEmpList = async () => {
  const res = await empGetPageService(params.value)
  empList.value = res.data.data.records
  total.value = res.data.data.total
}

---

//分页查询员工信息接口
export const empGetPageService = (params) => {
  return request.get('/admin/empaccount/emp/page', { params })
}

---

const baseURL = '/api'
const instance = axios.create({
  baseURL,
  timeout: 20000
})

// 添加请求拦截器

instance.interceptors.request.use(
  (res) => {
    if (res.data.code === 1) {
      return res
    }
    ElMessage.error(res.data.msg || '服务异常')
    return Promise.reject(res.data)
  }
)
export default instance
export { baseURL }

---

vite.config.ts

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

---

控制台报错，好像是说找不到 code 的值。

---

Swagger 后端调试 能成功获取数据。

{
  "code": 1,
  "msg": null,
  "data": {
    "total": 0,
    "records": []
  }
}

Answer 1

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

看起来你在使用 Vue3 和 Axios 进行前后端交互时遇到了一些问题。从你的描述来看，问题可能出现在请求拦截器中对响应状态的判断上。

首先，让我们检查一下错误提示，它提到找不到 code 的值。这可能是由于在拦截器中访问 res.data.code 时，res.data 可能是 undefined。为了确保不会触发这个错误，我们需要添加一个条件来检查 res.data 是否存在。

下面是修复后的请求拦截器代码：

instance.interceptors.request.use(
  (res) => {
    if (!res.data) {
      return res;
    }
    
    if (res.data.code === 1) {
      return res;
    }

    ElMessage.error(res.data.msg || '服务异常');
    return Promise.reject(res.data);
  }
)

现在，我们已经处理了 res.data 不存在的情况，但仍然需要注意的是，如果服务器返回的数据格式与预期不符，可能会导致其他问题。确保服务器返回的数据结构与你期望的一致，即包含 code, msg 和 data 属性。

如果你的问题依然存在，可以尝试以下几个步骤：

1. 检查 Vue 应用和后端服务器是否在同一台机器上运行，并且代理设置正确。你的 Vite 配置看起来是正确的，将 /api 前缀映射到了本地 http://localhost:8888/。

2. 确保 Vue 应用的网络请求到达了后端服务器。你已经在 Swagger 中测试并成功获取了数据，这通常意味着后端没有问题。但是，你也可以在 Chrome 浏览器的开发者工具中查看 Network 面板，确认请求被发送到正确的 URL 并且返回了预期的数据。

3. 检查 Vue 应用中的错误处理，确保任何潜在的错误都被正确地捕获和显示。你可以在 Vue 组件中使用 try...catch 语句来捕获并处理可能的错误。

4. 如果问题依然存在，考虑在 Axios 请求中使用 debug 模式来获取更详细的日志信息。要启用 debug 模式，只需在创建 Axios 实例时传递一个配置对象，并将其 log 属性设为 true：

   const instance = axios.create({
     baseURL,
     timeout: 20000,
     log: true // 开启 debug 模式
   });
   

   这将在控制台输出详细的请求和响应信息，帮助你更好地理解问题所在。

5. 最后，确保 Vue 组件中的 getEmpList 函数在适当的时间调用，例如在 onMounted 生命周期钩子中，确保 params 已经初始化：

   setup() {
     onMounted(() => {
       getEmpList();
     });
   
     // ... 其他代码
   }
   

按照上述步骤进行排查，应该能找到问题的原因。如果有更多细节或新的问题，请随时告诉我。