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

【问题标题】：next js axios http request to laravel lumen endpoint and display the response data in next js app下一个 js axios http 请求到 laravel lumen 端点并在下一个 js 应用程序中显示响应数据
【发布时间】：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()

标签： javascript reactjs laravel axios next.js

【解决方案1】：

谢谢@kamlesh

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

redux saga doc
next redux wrapper

【讨论】：