React Native Await Async 在警告用户和设置状态之前不返回值答案

【问题标题】：React Native Await Async does not return value before alerting user and setting stateReact Native Await Async 在警告用户和设置状态之前不返回值
【发布时间】：2020-01-31 01:55:18
【问题描述】：

我正在使用 Axios 对 twitter API 进行 HTTPS 调用并返回令牌和推文：

TwitterScreen.js：

export default class TwitterLogin extends React.Component {
  async componentDidMount(){
      await init("<CUSTOMER KEY>", "<CUSTOMER SECRET KEY>");
      this.twitter =  await getToken();
      alert(this.twitter);
  }
  render() {
      return(
      <View style= {styles.container}>
          <Button
          title="Twitter Login Button" onPress={this.twitter)}
          />
      </View>
     )
  }
}

AxiosUtility.js：

export function init(cuskey, seckey){
    axios.defaults.baseURL = 'https://api.twitter.com';
    //TODO: RFC 1738 this. 
    axios.defaults.headers.common['Authorization'] = 'Basic ' + btoa(cuskey + ':' + seckey);
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
    axios.defaults.headers.post['Accept-Encoding'] = 'gzip';
}

export function getToken(){
    axios.post('/oauth2/token', 'grant_type=client_credentials', {
        'User-Agent' : 'whereabouts dev',
        Accept: '*/*',
    })
    .then((response) => {
        console.log(response.data);
        return (response.data);
    })
    .catch((error) =>{
        console.log(error)
    }
    )
}

console.log(response.data) 运行时，它会返回一条成功消息。但它在向应用程序发送警报消息后运行，这意味着警报消息显示“未定义”。我按照文档无济于事。

我还收到一条警告，“等待对这个表达式的类型没有影响”。如何正确利用 await 和 async，以便在调用 twitter 后发生警报？

【问题讨论】：

您需要从您的 getToken 函数返回一个承诺，在 axios 请求之前放置一个 return。

标签： javascript android ios react-native async-await

【解决方案1】：

getToken 必须返回我认为的承诺。

export function getToken(){
//do not return void but promise with return
   return axios.post('/oauth2/token', 'grant_type=client_credentials', {
        'User-Agent' : 'whereabouts dev',
        Accept: '*/*',
    }).then((response) => {
        console.log(response.data);
        return (response.data);
    })
    .catch((error) =>{
        console.log(error)
    }
    )
}

【讨论】：

【解决方案2】：

我最近注意到了这一点。 await 不适用于 componentDidMount()。建议：在其他一些函数中等待，这应该可以工作。

【讨论】：

你有理由解释它为什么不起作用吗？这是完全错误的。