vue3请求接口报错：Cannot read properties of undefined (reading ‘data‘)

news2024/11/30 12:17:51

在这里插入图片描述

文章目录

报错内容
解决方案

报错内容

Cannot read properties of undefined (reading ‘data’)

解决方案

响应未按预期返回
确保服务器返回的数据结构符合预期。例如，服务器可能返回了一个错误响应，而不是预期的 JSON 数据。

检查响应
在 response 拦截器中添加更多的日志输出，以检查实际返回的响应内容：

// response interceptor
service.interceptors.response.use(
    response => {
        console.log('Response:', response); // 添加日志输出
        return response;
    },
    error => {
        console.log('Error Response:', error.response); // 添加日志输出
        const res = error.response ? error.response.data : null;
        const status = error.response ? error.response.status : null;

        if (status >= 500) {
            ElMessage.error('服务繁忙请稍后再试');
        } else if (status >= 400) {
            if (res && res.status === 401) {
                ElMessage.warning("您的账号登录已失效, 请重新登录");
            } else {
                ElMessage.error("未知错误");
                console.error(error);
            }
        }
        return Promise.reject(error); // 返回拒绝的 Promise
    }
);

异步请求处理
确保在处理异步请求时正确处理 Promise 和 async/await。

methods: {
    async login() {
        try {
            const response = await service.post('/auth/login', {
                username: this.username,
                password: this.password
            });
            console.log('Login successful:', response.data);
        } catch (error) {
            console.error('Login failed:', error);
        }
    }
}