Question

我有一个帮助器js文件并且有一个异步调用方法，在我的组件中导入helper js文件并在componentDidMount中进行调用。

在ajax完成之前，该值将返回为undefined。有没有办法编写回调函数，成功时它应该来到我的componentDidMount方法。

这就是我的尝试：

helper.js

export const asynchronous = data => {
   axios.get(url).then(res => {
     return res;
   });
}

component.js

import {asynchronous} from 'helper';

componentDidMount(){
  const newResp = asynchronous(this.props.data);
  console.log(newResp); // returned before api success/failure, should be returned after api request
}

Answer 1

使用from bs4 import BeautifulSoup as bs import requests import re site = requests.get('https://www.ubc.ca/') html = bs(site.content, 'html.parser') link = html.find('a', string=re.compile('(?i)(donate|donation|gift)')) #returns none

async-await

以及您的async componentDidMount(){ const newResp = await asynchronous(this.props.data); console.log(newResp); // returned before api success/failure, should be returned after api request }代码。您错过了asynchronous声明。

return

示例：Async Await with React Lifecycle methods

Answer 2

需要向componentDidMount添加异步，然后等待响应。

// helper.js
async function getData(url) {
   const response = await axios.get(url);
   console.log(response);

   return response;
}

export default getData;

在您的组件中：

import { getData } from './helper.js'; // <-- Not 'helper' which looks in node modules
...
componentDidMount = async () => {
  const newResp = await asynchronous(this.props.data);

  console.log(newResp);
}
...

更重要的是，你会想要对这种反应做些什么。

...
componentDidMount = async () => {
  const newResp = await asynchronous(this.props.data);

  this.setState({ data: newResp })
}
...

Answer 3

您可以返回初始axios承诺，然后使用其then，

export const asynchronous = data => {
   return axios.get(url);
}

并在componentDidMount中使用它

componentDidMount(){
  const newResp = asynchronous(this.props.data).then(res => {
      console.log(res);
   });
}

如何使用React JS

3 个答案: