下一个 js axios http 请求到 laravel lumen 端点并在下一个 js 应用程序中显示响应数据

Posted 2023-03-06

【中文标题】下一个 js axios http 请求到 laravel lumen 端点并在下一个 js 应用程序中显示响应数据

【英文标题】：next js axios http request to laravel lumen endpoint and display the response data in next js app

【发布时间】：2021-12-27 04:59:15

【问题描述】：

我有下一个 js 应用程序和 Axios 用来调用流明端点。 Axios http 客户端函数被编码到一个单独的文件夹中，称为 services/index.tsx 示例代码，如下所示。

export const register = async (payload: any) => 
  try 
    const endpoint = baseUrl + '/api/register';
    const res = await Axios.post(endpoint, payload)
    return await res.data
   catch (error) 
   return error.response
  

从 signup.tsx 组件调用上述注册函数，如下所示

const formik = useFormik(
    onSubmit: (values) => 
        register(values).then(response => 
            console.log(data);
        ).catch(function(error)
            console.log(error)
        )
    
);

Lumen 控制器 json 响应如下所示。表单验证错误

$this->validate($request,[
        'email' => 'required|unique:users,email'
]);

return response()->json(['message' => 'Account Created'],201);

如何在下一个js应用的signup.tsx组件中显示流明控制器响应数据？

【问题讨论】：

你有语法错误register(values).then(response 在这里你得到response 变量和日志data ？如何

response.message 应该有你想要的数据。将其设置为状态属性以显示它。仅供参考，return await res.data 中的 await 是多余的

@KamleshPaul 我可以在 services/index.tsx 文件中获取错误响应。 “error.response.data”，但我想将该错误消息转发到 signup.tsx 组件

@aseladaskon 使用state

@KamleshPaul 你的意思是const [error, setState] = useState()

【参考方案1】：

谢谢@kamlesh

我通过使用带有 Saga 中间件的 redux 包装器解决了这个问题。我所做的是创建一个 redux 存储并使用 saga 中间件调度 redux 操作。这些入门教程对我帮助很大。要考虑的另一点是，如果您打算在下一个 js 应用程序中使用服务器端和客户端渲染，则必须使用下一个 redux 包装器来顺利处理这些请求。

redux saga doc next redux wrapper