javascript - Javascript fetch 中 URL 中异步函数的值

Question

下面的代码在一个 React Native 应用程序中:

假设我在 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 调用的输入。链接文档很好地解释了您所面临的情况

A common need is to execute two or more asynchronous operations back to back, where each subsequent operation starts when the previous operation succeeds, with the result from the previous step. We accomplish this by creating a promise chain.

因此，您需要对给定代码进行的更改是

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

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

希望这会有所帮助!