将 fetch api 调用存储为局部变量的函数（不是承诺）

Question

我正在向数据库发送 api 请求，以便在小部件内接收数据，对数据执行一些处理，然后将其绘制并呈现到我的网页上。这是在反应网络应用程序中完成的。

我正在使用 fetch 获取数据并收到承诺。提取是在一个函数内完成的，稍后我将多次调用该函数。我已经找到了如何在进行 api 调用时直接从 fetch promises console.log 中获取数据的示例，但是在函数内部执行此操作似乎总是对我产生承诺......我不知道如何到return数据！

如能提供任何帮助，我们将不胜感激。我当前的代码如下，return是一个承诺。

谢谢。

class MyWidget extends Component {
    constructor(props) {
        super(props)
    }

async fetchData(url) {
    try {
        const response = await fetch(url);
        const data = await response.json();
        return data;
    } catch (error) {
        console.error(error);
    }
}

async readDB(url) {
    const data = await this.fetchData(url);
    return data
}

processingFunction() {
    const url = 'my/database/api/variable=X'
    const database_data = this.readDB(url)
    // perform processing on database data...
    // plot processed data...
}

Answer 1

你必须在 processingFunction 中 await 也必须更改为 async

async processingFunction() {                      // change to async
    const url = 'my/database/api/variable=X'
    const database_data = await this.readDB(url); // await the async result
    // perform processing on database data...
    // plot processed data...
}

但你似乎根本不需要 readDB 函数

async processingFunction() {
    const url = 'my/database/api/variable=X'
    const database_data = await this.fetchData(url);

}

更新

您不能将 Promise 转换为 Array 或其他。 React 中有一个流程：state + life-cycle hooks。在这种情况下，您必须将数据存储在状态中并使用 componentDidMount hook

import React, {Component} from 'react'

class MyWidget extends Component {
  state = {
    dataFromDB: null // set initial state
  };

  processingFunction() {
    const yourData = this.state.dataFromDB;
    // perform processing on database data...
    // plot processed data...
  }
  
  async componentDidMount() {
    const url = "my/database/api/variable=X";
    const database_data = await this.fetchData(url);
    
    this.setState(() => ({
      dataFromDB: database_data // set data in state from DB
    }));
  }
  
  ...
}

将 fetch api 调用存储为局部变量的函数（不是承诺）

Function to store fetch api call as local variable (not promise)

javascript

function

promise

reactjs

fetch-api