将获取 api 调用存储为局部变量(不是承诺)的函数

Question

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

我正在使用 fetch 来获取数据并收到承诺。获取是在我稍后将多次调用的函数中完成的。我找到了如何在进行 api 调用时直接控制台.log fetch 承诺中的数据的示例，但在函数中执行此操作似乎总是为我带来承诺......我不知道如何返回数据！

任何可以提供的帮助将不胜感激。我当前的代码在下面并返回一个承诺。

谢谢。

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);
}

更新

您不能将承诺转换为数组，否则。在 React 中有一定的流程：状态 + 生命周期钩子。在这种情况下，您必须将数据存储在状态中并使用componentDidMount钩

子

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
}));
}

...
}