Javascript fetch 中 URL 中异步函数的值答案

【问题标题】：Value from async function in URL inside Javascript fetchJavascript fetch 中 URL 中异步函数的值
【发布时间】：2018-11-07 14:03:45
【问题描述】：

下面的代码在 react native 应用中：

假设我在 API.js 文件中有以下函数：

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

我的应用程序的基本 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 端点的导出函数。

【问题讨论】：

为什么不能将 BASE_URL 作为参数传递给 getusers 函数并在 getItem 的 .then 中调用它？
啊。好主意。谢谢。

标签： javascript reactjs react-native

【解决方案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。这也确保了关注点的分离。

希望这会有所帮助！

【讨论】：