为 React Native 中的函数设置顺序

盖比

我在 componentDidMount 中有 2 个函数

componentDidMount() {
    this.m1();
    this.m2();
}

m1 下载我在 m2 中使用的文件,但是当我运行该应用程序时,我收到一个错误,因为 m2 在 m1 之前运行。

有没有办法设置我想要的顺序,以便 m1 先下载文件,然后运行 ​​m2?

赫尔默船

在某些情况下,如果您使用承诺,这些函数可能会更高效和可读。Promise 可以帮助您防止所有“回调地狱”,将来您将能够以最简单的方式理解任何异步和嵌套函数的所有功能。

例如(您应该多次调用代码以查看错误或成功)

const myAsyncFuntion = () => {
  return new Promise ((resolve, reject) => {
    //Some Logic for example a random number betweeen 1 and 10.
    //randomNumber should be smaller than 5. if not, the mySyncFuntion wont be called
    var myRandomNumber = Math.floor((Math.random() * 10) + 1);
    setTimeout(() =>{      
      if(myRandomNumber <= 5){
        console.log('AsyncFunction with randomNumber = ' + myRandomNumber)
        resolve(myRandomNumber);
      }else{
        console.log('AsyncFunction, with randomNumber = ' + myRandomNumber)
        reject(new Error('randomNumber ' + myRandomNumber + ' is bigger than 5'))
      }
    }, 1000)
  })
};

const mySyncFunction = (number) => {
  //Some Logic
    console.log('SyncFunction, randomNumber as param =>' + number)
};


//MAIN SYNCHRONOUS FUNCTION 
 var consoleLOGS = myAsyncFuntion()
  .then((response) => { //first response from the resolve() method
    mySyncFunction(response)
    return  (response) // you can pass the response to second then() method
  })
  .then((newResponse) => console.log('success, mySyncFunction executed, param recived in 2nd then = ' + newResponse))
  .catch((error) => console.log('error, mySyncFunction wasnt executed, ' + error.message))

请注意,虽然异步函数需要 1000 毫秒才能执行,但它比同步函数的主要功能先运行console.log(),花费的时间更少。不要忘记在componentDidMount()你应该调用方法中......

myAsyncFuntion()
 .then((response) => { 
     mySyncFunction(response)
     return  (response) // you can pass the response to second then() method
   })
 .then((newResponse) => console.log('success... second then = ' + newResponse))
 .catch((error) => console.log('error catched, ...' + error.message))

最后,如果函数的定义const是在主组件上定义的,则应该在没有类型的情况下编写函数的定义。回调非常好,但 Promise 更好,更具可读性。我相信你可以用 Promise 做更多的逻辑和实现。

如果您正在处理 API 请求,则可以使用 axios 或 fetch。也许您正在使用 firebase 作为数据库并且许多函数都是 THENABLE,这意味着您可以访问 then 和 catch 方法,因为有从服务器返回的承诺。

看看这里https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何使console.log在React Native中为Android工作

来自分类Dev

如何在react-native中为webview请求设置自定义标头

来自分类Dev

为iOS React-Native项目设置Fbsdk框架

来自分类Dev

将指定HTML标记之间的文本内容设置为React-Native中的UpperCase

来自分类Dev

是否可以在React Native中为带有动画的模态设置动画?

来自分类Dev

react-native useState错误(“为只读”)

来自分类Dev

将React Native状态设置为Button标题prop

来自分类Dev

按钮显示为长按钮React native

来自分类Dev

为动画React Native重置动画

来自分类Dev

在react-native-gifted-chat中,Android``超级表达式必须为null或函数''

来自分类Dev

在react-native-gifted-chat中,Android``超级表达式必须为null或函数''

来自分类Dev

React Native构造函数:意外的令牌,预期为“;”

来自分类Dev

如何在React Native中为数组设置状态值?

来自分类Dev

在React Native中为持久性会话将访问令牌设置为redux状态是否安全?

来自分类Dev

如何在React Native React Navigation 5中为标题后退按钮的颜色设置动画?

来自分类Dev

在React Native Navigation中为onPress指定名称或键

来自分类Dev

React Native:将TextInput值设置为00:00

来自分类Dev

如何在React Native中默认将isConnected值设置为false

来自分类Dev

React Native:意外的令牌,预期为“,”

来自分类Dev

为iOS React-Native项目设置Fbsdk框架

来自分类Dev

将指定HTML标记之间的文本内容设置为React-Native中的UpperCase

来自分类Dev

React Native-为Image的blurRadius设置动画

来自分类Dev

如何在React Native中为图像添加标题

来自分类Dev

React Native本机iOS组件为空

来自分类Dev

React Native 中的循环函数

来自分类Dev

如何检查react native中的变量是否为空?

来自分类Dev

如何在react native中为createMaterialTopTabNavigator设置activeBackgroundColor?

来自分类Dev

在 React Native 中为 WebView 设置 LayerType

来自分类Dev

如何在 react-native 中创建变量并将其设置为多行 JSX 结构

Related 相关文章

  1. 1

    如何使console.log在React Native中为Android工作

  2. 2

    如何在react-native中为webview请求设置自定义标头

  3. 3

    为iOS React-Native项目设置Fbsdk框架

  4. 4

    将指定HTML标记之间的文本内容设置为React-Native中的UpperCase

  5. 5

    是否可以在React Native中为带有动画的模态设置动画?

  6. 6

    react-native useState错误(“为只读”)

  7. 7

    将React Native状态设置为Button标题prop

  8. 8

    按钮显示为长按钮React native

  9. 9

    为动画React Native重置动画

  10. 10

    在react-native-gifted-chat中,Android``超级表达式必须为null或函数''

  11. 11

    在react-native-gifted-chat中,Android``超级表达式必须为null或函数''

  12. 12

    React Native构造函数:意外的令牌,预期为“;”

  13. 13

    如何在React Native中为数组设置状态值?

  14. 14

    在React Native中为持久性会话将访问令牌设置为redux状态是否安全?

  15. 15

    如何在React Native React Navigation 5中为标题后退按钮的颜色设置动画?

  16. 16

    在React Native Navigation中为onPress指定名称或键

  17. 17

    React Native:将TextInput值设置为00:00

  18. 18

    如何在React Native中默认将isConnected值设置为false

  19. 19

    React Native:意外的令牌,预期为“,”

  20. 20

    为iOS React-Native项目设置Fbsdk框架

  21. 21

    将指定HTML标记之间的文本内容设置为React-Native中的UpperCase

  22. 22

    React Native-为Image的blurRadius设置动画

  23. 23

    如何在React Native中为图像添加标题

  24. 24

    React Native本机iOS组件为空

  25. 25

    React Native 中的循环函数

  26. 26

    如何检查react native中的变量是否为空?

  27. 27

    如何在react native中为createMaterialTopTabNavigator设置activeBackgroundColor?

  28. 28

    在 React Native 中为 WebView 设置 LayerType

  29. 29

    如何在 react-native 中创建变量并将其设置为多行 JSX 结构

热门标签

归档