如何通过Capacitor HTTP插件捕获Laravel的错误

1. 确保Laravel返回JSON格式的验证错误 #

Laravel的$request->validate()在API请求（请求头含Accept: application/json）时默认返回JSON错误，但如果路由在web.php中或请求头配置不当，会返回HTML错误页面。可以通过以下两种方式处理：

方式一：将路由迁移至routes/api.php #

API路由组默认适配JSON响应，验证失败会自动返回JSON格式的422错误：

// routes/api.php
Route::post('/register_app_user', [UserController::class, 'register']);

方式二：手动控制验证响应（自定义场景） #

如果需要保留web路由或自定义错误格式，用Validator facade手动验证并强制返回JSON：

use Illuminate\Support\Facades\Validator;

public function register(Request $request)
{
    $validator = Validator::make($request->all(), [
        'username' => 'required|string',
        'email' => 'required|email|unique:users,email',
        'password' => 'required|string|confirmed|min:8',
    ]);

    if ($validator->fails()) {
        return response()->json([
            'message' => '输入信息验证失败',
            'errors' => $validator->errors()
        ], 422);
    }

    // 执行用户注册逻辑...
}

2. 在Vue中用@capacitor-community/http处理错误 #

@capacitor-community/http不会像axios那样自动抛出HTTP错误（如4xx/5xx状态码），需要手动检查响应状态码并解析数据：

<script setup>
import { Http } from "@capacitor-community/http";
import { ref } from 'vue';

const loadingState = ref(false);
const requestURL = ref('你的API基础地址');
const userForm = ref({
  username: '',
  email: '',
  password: '',
  password_confirmation: ''
});
const errorMessage = ref('');

const registerUser = async () => {
  loadingState.value = true;
  errorMessage.value = '';
  try {
    const options = {
      url: `${requestURL.value}/register_app_user`,
      headers: { 
        "Content-Type": "application/json",
        "Accept": "application/json" // 关键：告知Laravel返回JSON格式
      },
      data: userForm.value,
      method: "POST"
    };

    const response = await Http.request(options);

    // 处理成功响应
    if ([200, 201].includes(response.statusCode)) {
      console.log('注册成功', response.data);
      // 后续逻辑：跳转页面、提示用户等
    } 
    // 处理验证错误（422状态码）
    else if (response.statusCode === 422) {
      // 转换响应数据：Capacitor可能返回字符串格式的JSON
      const errorData = typeof response.data === 'string' ? JSON.parse(response.data) : response.data;
      errorMessage.value = errorData.message || '输入信息有误';
      // 可单独获取字段错误：errorData.errors.username 等
      console.log('字段验证错误', errorData.errors);
    } 
    // 处理其他服务器错误
    else {
      errorMessage.value = '服务器异常，请稍后重试';
      console.log('请求错误', response);
    }
  } catch (err) {
    // 处理网络异常、请求超时等非HTTP状态码错误
    errorMessage.value = '网络连接失败，请检查网络';
    console.error('网络错误', err);
  } finally {
    loadingState.value = false;
  }
};
</script>

核心注意事项 #

• 必须设置Accept: application/json请求头：确保Laravel返回JSON而非HTML错误页面。
• 手动解析响应数据：插件返回的response.data可能是字符串，需转换为JSON对象才能读取错误详情。
• 根据状态码分支处理：插件不会抛出HTTP错误，需通过statusCode区分成功、验证失败、服务器错误等场景。

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