javascript - React-Native 动态改变 fetch url

Question

我有一个使用云服务器或本地服务器来提供信息的移动应用程序。

在我的 App.js 中，我有：

helperUtil.apiURL().then((url) => { 
  global.API_URL = url;
})

该函数执行以下操作：

export async function apiURL() {

  try {
    var local = await AsyncStorage.getItem('local')
    local = (local === 'true')

    if(typeof local == 'undefined') return "https://api.website.com";
    else if(!local) return "http://192.168.0.6:8080";
    else return "https://api.website.com";
  }
  catch(err) {
    return "https://api.website.com";
  }

}

然后我的 fetch 命令将是：

fetch(global.API_URL+'/page', { 
  method: 'GET', 
  headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer '+this.state.authtoken },
})

我在这里遇到了 API_URL 最终未定义的问题，所以我觉得可能有更好的解决方案。

接受任何和所有建议。谢谢你。

标签： javascriptiosreact-native

Answer 1

在全局 obj 中设置 url 始终使用返回 Promise 的方法，如果存在，它将返回您的全局对象，如果不从 apiURL 函数获取数据。使用 async/await 语法，只有当 getAPI 承诺将被解析并且不会出现 url 为空的情况时才会执行 fetch。

const getAPI = () => {
    return new Promise((resolve, reject) =>{
         if(global.API_URL) {
              resolve(global.API_URL)
         } else {
              helperUtil.apiURL().then((url) => { 
                  global.API_URL = url;
                  resolve(url)
              })
         }

});


const fetchFunc = async () => {
   const url = await getAPI()

   fetch(url+'/page', { 
      method: 'GET', 
      headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer 
      '+this.state.authtoken },
    })
}