在前端构建 REST API URLs 时,可以使用以下解决方法来避免硬编码 URL:
使用相对路径:
const baseUrl = '/api';
// 使用相对路径构建 URL
const getUsersUrl = `${baseUrl}/users`;
使用环境变量:
const baseUrl = process.env.API_BASE_URL;
// 使用环境变量构建 URL
const getUsersUrl = `${baseUrl}/users`;
使用配置文件:
// config.js
export const apiBaseUrl = 'https://example.com/api';
// 使用配置文件构建 URL
import { apiBaseUrl } from './config';
const getUsersUrl = `${apiBaseUrl}/users`;
使用 URL 构建库:
可以使用一些专门的 URL 构建库来构建 URL,例如 url-join
、query-string
等。
import urlJoin from 'url-join';
import queryString from 'query-string';
const baseUrl = 'https://example.com/api';
// 使用 url-join 构建 URL
const getUsersUrl = urlJoin(baseUrl, 'users');
// 使用 query-string 构建带查询参数的 URL
const queryParams = { page: 1, limit: 10 };
const urlWithQueryParams = urlJoin(getUsersUrl, `?${queryString.stringify(queryParams)}`);
通过使用上述方法,可以避免在前端硬编码 REST API URLs,使代码更具可维护性和灵活性。