Next.js使用Axios请求Laravel Lumen接口并在组件展示返回数据实现问题

你现有代码存在3处需要调整的问题，按以下步骤修改即可正常获取并展示接口响应：

1. 先修复接口封装层的逻辑问题 #

原有services/index.tsx的错误处理逻辑会吞掉异常，导致请求失败时也不会进入调用方的catch分支，同时多余的await可以去掉，推荐两种优化方案二选一：

方案A：抛出异常，保持正常的Promise rejected状态 #

export const register = async (payload: any) => {
  try {
    const endpoint = baseUrl + '/api/register';
    const res = await Axios.post(endpoint, payload)
    // res.data已经是axios解析完成的响应体，无需额外加await
    return res.data
  } catch (error: any) {
    // 抛出错误，让外层调用方可通过catch捕获
    throw error.response
  }
}

方案B：统一返回结构，无需外层处理异常 #

如果不想用try/catch，可以统一返回标准结构，调用方直接判断状态即可：

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

2. 调整signup.tsx的调用与展示逻辑 #

需要新增React状态存储响应消息，同时修正变量名错误，以下是完整适配代码（适配上面的方案A）：

import { useState } from 'react'
import { useFormik } from 'formik'
import { register } from '@/services'

export default function Signup() {
  // 新增状态存储响应信息，用于页面渲染展示
  const [successMessage, setSuccessMessage] = useState('')
  const [errorMessage, setErrorMessage] = useState('')

  const formik = useFormik({
    initialValues: {
      email: '',
      // 补充你的其他表单字段
    },
    onSubmit: async (values) => {
      // 每次提交前清空历史消息
      setSuccessMessage('')
      setErrorMessage('')
      try {
        const res = await register(values)
        // 赋值成功消息，Lumen返回的结构直接取message字段
        setSuccessMessage(res.message)
      } catch (err: any) {
        // 处理Lumen返回的校验错误/其他错误
        if (err?.status === 422 && err?.data?.errors) {
          // 表单校验错误（比如邮箱已存在、必填），拼接所有错误提示
          const errorList = Object.values(err.data.errors).flat()
          setErrorMessage(errorList.join('、'))
        } else {
          // 其他错误场景
          setErrorMessage(err?.data?.message || '注册失败，请稍后重试')
        }
      }
    }
  })

  return (
    <div>
      {/* 展示成功提示 */}
      {successMessage && <p style={{ color: '#2ecc71' }}>{successMessage}</p>}
      {/* 展示错误提示 */}
      {errorMessage && <p style={{ color: '#e74c3c' }}>{errorMessage}</p>}

      {/* 你的表单代码 */}
      <form onSubmit={formik.handleSubmit}>
        <div>
          <label>邮箱</label>
          <input 
            type="email" 
            name="email"
            onChange={formik.handleChange}
            value={formik.values.email}
          />
        </div>
        <button type="submit">注册</button>
      </form>
    </div>
  )
}

可选：如果使用方案B的统一返回结构，调整onSubmit逻辑即可 #

onSubmit: async (values) => {
  setSuccessMessage('')
  setErrorMessage('')
  const result = await register(values)
  if (result.success) {
    setSuccessMessage(result.data.message)
  } else {
    // 同上的错误处理逻辑
    const err = result.error
    if (err?.status === 422 && err?.data?.errors) {
      const errorList = Object.values(err.data.errors).flat()
      setErrorMessage(errorList.join('、'))
    } else {
      setErrorMessage(err?.data?.message || '注册失败，请稍后重试')
    }
  }
}

注意：如果存在跨域问题，需要在Lumen端配置CORS跨域头，允许你的Next.js域名访问接口。

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