Question

以下代码位于React本机应用程序内部：

假设我在API.js文件中具有以下功能：

export function getUsers() {
    return fetch(BASE_URL+'/users')
    .then(response => {
        return response;
    })
}

我的应用程序的BASE URL是动态的，或者可以由用户自定义。这意味着，我将此值保留在应用程序的AsyncStorage中。

这意味着AsyncStorage.getItem（'BASE_URL'）保存了我实际的BASE_URL的值。问题是，getItem函数本身就是一个promise函数。只需将其包装为promise语法即可使其工作。例如，

AsyncStorage.getItem('BASE_URL').then(url => {
    console.log(url) //gets the URL here properly
});

我的问题是，如何使用该值实际替换获取请求中的BASE_URL变量？

请记住，API.js文件不是“组件”。它只包含针对不同API端点的导出功能。

Answer 1

您可以使用promise chaining，其中AsyncStore#getItem的结果将用作fetch调用的输入。链接的文档很好地说明了您所面临的情况

一个常见的需求是背靠背执行两个或多个异步操作，其中每个后续操作都在前一个操作成功时开始，并具有上一步的结果。我们通过创建一个承诺链来实现这一目标。

因此，在给定代码中需要进行的更改是

export function getUsers() {
  return AsyncStorage.getItem('BASE_URL').then(url => {
    return fetch(url+'/users').then(response => response.json());
  }); 
}

您可以使用getUsers()，而不必担心BASE_URL。这也确保了关注点的分离。

希望这会有所帮助！

来自Javascript提取内URL中的异步函数的值

1 个答案: