React Native中如何覆写URL的HOST与PORT参数？

嘿，这个问题其实挺常见的，我给你几个简单实用的解决办法，看哪个适合你的场景：

方法一：使用ES6模板字符串（最直接） #

这是最简单的方式，直接用模板字符串把你的HOST和PORT变量嵌入URL里就行。先定义好你的变量，然后用反引号包裹URL，变量用${}包裹：

// 先定义你的HOST和PORT变量
const HOST = 'your-actual-host'; // 比如 '192.168.1.100' 或者 'api.yourdomain.com'
const PORT = '3000'; // 替换成你的实际端口号

// 拼接URL发起请求
axios.get(`http://${HOST}:${PORT}/dtcmtools/api/mufs/dynsystbls/MFO`)

方法二：使用URL对象（更规范安全） #

如果你的URL后续可能有更多参数需要处理，用原生的URL对象会更稳妥，它能自动处理一些特殊字符和路径拼接的问题：

const HOST = 'your-actual-host';
const PORT = '3000';

// 创建基础URL对象
const baseUrl = new URL(`http://${HOST}:${PORT}`);
// 设置请求路径
baseUrl.pathname = '/dtcmtools/api/mufs/dynsystbls/MFO';

// 转成字符串发起请求
axios.get(baseUrl.toString())

方法三：全局配置Axios的baseURL（适合多请求场景） #

如果你的App里很多请求都用同一个HOST和PORT，直接全局配置Axios的baseURL会更高效，不用每次都重复拼接：

const HOST = 'your-actual-host';
const PORT = '3000';

// 全局设置Axios的基础URL
axios.defaults.baseURL = `http://${HOST}:${PORT}`;

// 之后发起请求只需要写路径部分就行
axios.get('/dtcmtools/api/mufs/dynsystbls/MFO')

这几种方法都能完美解决你的问题，选最适合你项目需求的就行～

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