反应本机从那时获取响应并分配给变量

Question

我正在尝试获取缩略图路径并存储到要使用的变量，但是我没有得到定义

getThumbnail(filePath){
  let thumbnailURL = RNThumbnail.get(filePath)
    .then((response) => response.path)
    .then((responseData) => {
      console.warn(responseData);
      return responseData;
    }).catch(error => console.warn(error));
  alert(thumbnailURL);
  //return thumbnailURL;
}

Answer 1

.then不是那样工作的，它不会返回值。你可以做：

  let thumbnailURL;
  RNThumbnail.get(filePath)
    .then((response) => response.path)
    .then((responseData) => {
      thumbnailURL = responseData;
      alert(thumbnailURL);
    }).catch(error => console.warn(error));

但是您必须在第二次then调用中继续计算，因为该值在那里只会是可靠的

你最好使用 async/await ，只需将代码重构为：

async function getThumbnail(filePath){
  try {
    let thumbnailURL = await RNThumbnail.get(filePath)
    alert(thumbnailURL)
  } catch(err) {
    console.warn(err)
  }

阅读更多关于 异步/等待

Answer 2

对于 React 应用程序，很可能您希望将响应设置为状态：

state = {
  thumbnailURL: ''
}
getThumbnail = (filePath) => {
  RNThumbnail.get(filePath)
  .then(response => response.path)
  .then(responseData => {
      this.setState({
        thumbnailURL: responseData
      })
    })
  .catch(error => console.warn(error))
}
render() {
  return (
    <img src={this.state.thumbnailURL} />
  )
}

您将需要getThumbnail上的箭头功能进行词法绑定，以便您可以访问this.setState()。

---

编辑：

您实际上无法立即getThumbnail()返回thumbnailURL值。 但是，getThumbnail()可以返回承诺，您可以在要访问thumbnailURL的位置解决它：

getThumbnail = filePath => {
  return RNThumbnail.get(filePath)
    .then(response => response.path)
    .then(responseData => responseData)
    .catch(error => console.warn(error))
}
IWannaAccessThumbnailURLHere = () => {
  this.getThumbnail('....')
  .then(thumbnailURL => {
    // do things with thumbnailURL
  })
}

或者，使用 setState 重新渲染，然后您可以在下一个渲染周期中访问this.state.thumbnailURL。