在异步方法函数中调用方法函数答案

【问题标题】：Call a method function inside an async Method Function在异步方法函数中调用方法函数
【发布时间】：2019-10-17 11:31:26
【问题描述】：

我有两种方法： method_1 和 aysnc method_2; 我想在aysnc method_2 中调用method_1（在检索到一些数据之后）；

（aysnc method_2 捕获数据并将其传递给method_1 并执行它。）

我在aysnc method_2 中使用this.method_1 来调用它，但没有任何反应。

method_1 (data) {
    console.log( 'I need it here', data );
} ,

triggerByUser () {

    this.method_1( 'just a test' );

    async function method_2 () {

        let code = await fileRetriever( 'songs' );
        console.log( 'this code retrieved: ' ,  code );
        this.method_1( code );
        console.log( 'the code has been sent!' );

    } ;

    method_2 (  ) ;
},

结果：

JS: 'I need it here' 'just a test'
JS: 'response From fileRetriever:' 58
JS: 'this code retrieved: ' 58

（项目是在 NativeScript + Vue 上编写的）

【问题讨论】：

"我想调用method_1 在完成后 async method_2" next "但是当我使用this.method_1 在aysnc method_2 内部，什么也没有发生。”。 1.添加实际代码。 2. 之后 OR 里面 ? 3. 如果你能提供一个 codepen 或类似的东西就更好了。
你可以看到它卡在这条线上this.method_1( data.length );
@Max 我希望现在已经清楚了。 :)

标签： vuejs2 nativescript nativescript-vue

【解决方案1】：

看来我需要将它作为回调传递；

triggerByUser () {

    this.method_1( 'just a test' );

    async function method_2 ( callback ) {

        let code = await fileRetriever( 'songs' );
        console.log( 'this code retrieved: ' ,  code );
        callback( code );
        console.log( 'the code has been sent!' );

    } ;

    method_2 ( this.method_1 ) ;
},

结果：

JS: 'I need it here' 'just a test'
JS: 'response From fileRetriever:' 58
JS: 'this code retrieved: ' 58
JS: 'I need it here' 58
JS: 'the code has been sent!'

有没有更好的方法？！（因为使用 async + callback 对我来说似乎有点脏）

【讨论】：

【解决方案2】：

我不知道 Nativescript，但从介绍中可以看出，Vue 组件似乎与 classic Vue 相同。

如果将triggerByUser 移到外部methods 中，则您已将method_2 嵌套在methods 中，并使用await 正确调用所有函数

methods:{
    method_1 (data) {
      console.log( 'I need it here', data );
    },
    async triggerByUser () {
        this.method_1( 'just a test' );
        await this.method_2();
    },
    async method_2 () {

        let code = await fileRetriever( 'songs' );
        console.log( 'this code retrieved: ' ,  code );
        this.method_1( code );
        console.log( 'the code has been sent!' );

    }    
}

【讨论】：

【解决方案3】：

嗯，很简单..

创建两个方法并在第三个异步方法中调用它们

例如，当用户单击锚标记时，您必须运行两次 ajax 调用，然后您将这样做。

<template>
    <div>
         <a @click="getDataFromTwoOtherMethods()">Click here</a>
    </div>
</template>
<script>
    export default{
    ...
    methods:{
       method1(){},
       method2(){},


       async getDataFromTwoOtherMethods(){
            await this.method1();
            this.method2();
            //this method will wait for method1 to execute 
            //and get response and then call second method
       } 
   },
</script>

【讨论】：