在Next.js应用中使用Axios调用外部API并传递查询参数问题

场景与现有代码 #

我在Next.js应用中配置了API路由，希望通过API获取数据并展示在页面上，但遇到了查询参数传递的问题。

API路由文件：api/apps/get-apps.js #

import { APPS_PATH, BASE_URL } from '../constants/api.constants';
import axios from 'axios';

export default async function handler(request, response) {
  const requestUrl = encodeURI(BASE_URL + APPS_PATH);    
  try {
    const axiosResponse = await axios.get(requestUrl);
    return response.status(200).send(axiosResponse.data);
  } catch (error) {
    return response.status(404).send('error');
  }
}

页面文件：pages/apps/index.js #

async function fetchAllReviews(id, callback) {
  try {
    const response = await axios.get('/api/reviews/get-apps');
    if (response.status === 200) {
      callback(true, response.data);
    }
  } catch (error) {
    callback(false, error);
  }
}

需求 #

请求API时需要带上应用ID作为查询参数，例如：/api/apps/get-apps?id=248294829，并在API路由的handler中使用该参数调用外部API。

遇到的问题 #

尝试在axios请求中添加params: { id }对象，但在get-apps.js的handler中无法从request中获取到该参数。

解决方案 #

1. 修正页面中的请求代码 #

首先注意：原请求路径/api/reviews/get-apps与API文件路径api/apps/get-apps.js不匹配，需改为/api/apps/get-apps。然后通过axios的params属性传递查询参数：

async function fetchAllReviews(id, callback) {
  try {
    // 通过params自动生成查询参数
    const response = await axios.get('/api/apps/get-apps', {
      params: { id }
    });
    if (response.status === 200) {
      callback(true, response.data);
    }
  } catch (error) {
    callback(false, error);
  }
}

2. 修改API路由handler获取并使用参数 #

在Next.js的API路由中，GET请求的查询参数可通过request.query直接获取，之后将其传递给外部API：

import { APPS_PATH, BASE_URL } from '../constants/api.constants';
import axios from 'axios';

export default async function handler(request, response) {
  // 从request.query中解构获取id参数
  const { id } = request.query;

  // 校验参数是否存在
  if (!id) {
    return response.status(400).send('缺少必要参数：id');
  }

  try {
    // 将id作为查询参数传递给外部API，用axios的params自动处理编码
    const axiosResponse = await axios.get(`${BASE_URL}${APPS_PATH}`, {
      params: { id }
    });
    return response.status(200).send(axiosResponse.data);
  } catch (error) {
    // 返回更具体的错误信息，便于调试
    const statusCode = error.response?.status || 500;
    const errorMessage = error.message || '调用外部API失败';
    return response.status(statusCode).send(errorMessage);
  }
}

关键说明 #

• Next.js API路由中，GET请求的查询参数统一存放在request.query对象中，直接解构即可获取
• 使用axios的params属性传递参数时，axios会自动处理URL编码，无需手动调用encodeURI
• 增加参数校验可以避免无效请求，提升接口健壮性

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