使用Vue对接PHP注册接口时如何正确提取API响应中的错误信息

问题根因 #

PHP中直接对数组类型的$error执行echo操作时，会自动将数组转换为字符串，默认输出内容就是Array，因此前端无法拿到具体错误信息。你改用print_r虽然能输出错误内容，但返回的是无结构的纯文本，前端无法批量提取错误字段做展示。

解决方案 #

第一步：修改PHP端返回逻辑 #

统一所有接口返回格式为JSON，同时添加响应头明确返回类型，保证前端可以统一解析：

// 首先添加响应头，声明返回内容为JSON格式，避免前端解析异常
header('Content-Type: application/json; charset=utf-8');

if(count($error)){
    // 错误场景返回统一结构
    echo json_encode([
        "isRegistered" => false,
        "errors" => $error
    ]);
} else {
    echo json_encode(["isRegistered" => true]);
}

注意：输出JSON前不要有任何额外输出（包括PHP文件首尾的多余空格、其他echo内容），否则会导致JSON格式损坏。

第二步：修改Vue端逻辑 #

修正请求方法的写法，新增返回值判断逻辑：

data(){
  return{
    // ...其他变量
    data : {}, // 用户数据
    response : ""
  }
},
methods: {
  // ...其他方法
  submitRegister() {
    // 注意拼写是axios不是axio
    axios.post("api/register.php", data, config)
    .then((response) =>{
      this.response = response.data; 
      console.log(this.response);
      if(this.response.isRegistered) {
        // 注册成功逻辑
        alert('注册成功');
        // 此处补充你的路由跳转代码
      } else {
        // 注册失败，提取错误信息拼接为提示文本
        const errorMsg = Object.values(this.response.errors).join('；');
        alert(`注册失败：${errorMsg}`);
      }
    })
    .catch(err => {
      // 捕获网络异常、请求失败等场景
      console.error('请求异常', err);
      alert('网络错误，请稍后重试');
    })
  }
}

内容的提问来源于stack exchange，提问作者opeolluwa