如何根据用户输入在 Axios 中设置 Base URL - React Native答案

【问题标题】：How to set Base URL in Axios, based on a user input - React Native如何根据用户输入在 Axios 中设置 Base URL - React Native
【发布时间】：2021-07-04 19:50:04
【问题描述】：

我正在构建一个应用程序，用户在登录时通过输入 URL 连接到服务器。

每个服务器都提供一个 API，我无法在创建 Axios 客户端实例时硬编码 BaseURL 的值。我不知何故需要全局存储 URL 并根据登录表单中的用户输入进行设置。

所以我想知道什么是正确的方法。我真的不确定动态存储创建 API 连接时可以访问的值的最佳方法是什么。欢迎任何想法和最佳实践建议。

这里是创建 API 连接的代码：client.js

import { create } from 'apisauce';

const api = create({
    baseURL: "BASE_URL_FROM_USER_INPUT" + "server/odata/"
});

export default api;

这就是我使用 API 的方式：users.js

import api from './client';

const getUsers = () => api.get("/users");

export default {
    getUsers
}

这就是我获取数据的方式：

import React, { useState, useEffect } from "react";
import usersApi from '../api/users';

const TestScreenAuthenticated = ({navigation}) => {
    const [users, setUsers] = useState([]);

    useEffect(() => {
        loadUsers();
    });

    const loadUsers = async () => {
        const response = await usersApi.getUsers();
        setUsers(response);
    }

    ...
};

export default TestScreenAuthenticated;

【问题讨论】：

标签： reactjs react-native axios

【解决方案1】：

您可以使用localStore来存储baseUrl。

//save the value
localStore.setItem('baseUrl', value)

//read the value
localStore.getItem('baseUrl')

【讨论】：

【解决方案2】：

如果您可以在项目中使用 .env 文件并将 Web 服务地址放在那里。浏览该网站的用户无法访问此文件，也无法对其进行编辑

这个链接： https://create-react-app.dev/docs/adding-custom-environment-variables/

【讨论】：