如何用Next.js API Routes替代Axios？求实现指导及替代方案

一、Next.js API Routes实现步骤 #

Next.js API Routes允许你在项目内创建后端代理接口，解决直接调用外部API的错误问题，同时还能统一处理请求逻辑、添加错误捕获。

1. 创建API路由文件 #

在项目的pages/api目录下，分别创建两个文件：tasks.js（处理GET请求）和ipfs.js（处理POST请求）。如果pages/api目录不存在，手动创建即可。

2. 编写tasks.js代理接口 #

这个接口负责转发GET请求到外部API，并返回处理后的数据：

import axios from 'axios';
import { get } from 'lodash'; // 保持和原代码一致的工具函数

export default async function handler(req, res) {
  // 只允许GET请求
  if (req.method !== 'GET') {
    res.setHeader('Allow', ['GET']);
    return res.status(405).end(`Method ${req.method} Not Allowed`);
  }

  try {
    // 调用外部API
    const response = await axios.get('https://liwaiw1kuj.execute-api.ap-southeast-1.amazonaws.com/tasks');
    // 提取所需数据
    const data = get(response, 'data.data', []);
    // 返回给客户端
    res.status(200).json(data);
  } catch (error) {
    console.error('获取tasks数据失败:', error);
    // 返回错误状态和信息
    res.status(error.response?.status || 500).json({ error: '服务器内部错误' });
  }
}

3. 修改Landing.tsx中的数据获取逻辑 #

将直接调用外部API的代码，改为调用本地API路由：

const fetchData = async () => {
  try {
    // 调用本地API路由
    const response = await axios.get('/api/tasks');
    setData(response.data);
    setLoading(false);
  } catch (error) {
    console.error('数据加载失败:', error);
    setLoading(false);
  }
};

useEffect(() => {
  fetchData();
}, []);

4. 编写ipfs.js代理接口 #

这个接口负责转发POST请求到外部API：

import axios from 'axios';

export default async function handler(req, res) {
  // 只允许POST请求
  if (req.method !== 'POST') {
    res.setHeader('Allow', ['POST']);
    return res.status(405).end(`Method ${req.method} Not Allowed`);
  }

  try {
    // 转发请求体到外部API
    const response = await axios.post(
      'https://liwaiw1kuj.execute-api.ap-southeast-1.amazonaws.com/ipfs',
      req.body
    );
    // 返回外部API的响应结果
    res.status(200).json(response.data);
  } catch (error) {
    console.error('IPFS上传失败:', error);
    res.status(error.response?.status || 500).json({ error: '服务器内部错误' });
  }
}

5. 修改组件中的POST请求逻辑 #

同样改为调用本地API路由：

try {
  const ipfs = await axios.post('/api/ipfs', {
    ...description,
    salary,
    discord,
    whatsapp,
    telegram,
    signal,
  });
  // 后续业务逻辑（比如处理返回结果）
} catch (error) {
  console.error('上传操作失败:', error);
}

二、其他可行替代方法 #

除了API Routes，还有以下几种方案可以替代直接用Axios调用外部API：

1. 使用浏览器原生fetch API #

不需要依赖Axios，直接用浏览器内置的fetch函数实现请求：

// 获取tasks示例
const fetchData = async () => {
  try {
    const response = await fetch('/api/tasks');
    if (!response.ok) throw new Error('请求失败');
    const data = await response.json();
    setData(data);
    setLoading(false);
  } catch (error) {
    console.error(error);
    setLoading(false);
  }
};

// 上传IPFS示例
const ipfsResponse = await fetch('/api/ipfs', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    ...description,
    salary,
    discord,
    whatsapp,
    telegram,
    signal,
  }),
});
const ipfsData = await ipfsResponse.json();

2. 使用SWR/React Query做数据管理 #

这类库提供了缓存、自动重新验证、错误重试等高级功能，适合复杂的数据场景：
以SWR为例：

import useSWR from 'swr';

// 定义通用请求函数
const fetcher = async (url) => {
  const res = await fetch(url);
  if (!res.ok) throw new Error('请求失败');
  return res.json();
};

function Landing() {
  // 自动处理数据获取、加载、错误状态
  const { data, error, isLoading } = useSWR('/api/tasks', fetcher);

  if (error) return <div>数据加载失败，请稍后重试</div>;
  if (isLoading) return <div>加载中...</div>;

  // 直接使用data渲染页面
  return <div>{/* 渲染数据的逻辑 */}</div>;
}

3. Next.js页面级数据获取 #

如果是页面初始化时需要获取数据，可以用Next.js的getServerSideProps（服务器端渲染）或getStaticProps（静态生成），直接在服务器端请求外部API，避免客户端跨域或错误问题：

// Landing.tsx
import axios from 'axios';
import { get } from 'lodash';

// 服务器端执行的函数，获取数据后传递给页面组件
export async function getServerSideProps() {
  try {
    const response = await axios.get('https://liwaiw1kuj.execute-api.ap-southeast-1.amazonaws.com/tasks');
    const data = get(response, 'data.data', []);
    return { props: { data } };
  } catch (error) {
    console.error('服务器端获取数据失败:', error);
    return { props: { data: [] } };
  }
}

// 页面组件直接接收props中的data
function Landing({ data }) {
  return <div>{/* 渲染数据的逻辑 */}</div>;
}

export default Landing;

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