ORDER OF EXECUTION VUEJS

Question

Good afternoon,

Gentlemen.

Using Vue with lib and not as a framework, I have two functions that make requests for two endpoints, where the first I get a token and the second I need to pass the token to make the request. I put in the Mounted, my function that receives the token. until then ok. The problem is when I try to make the second call, if I put a button to make the request, everything goes well, however, I would like in the page loading, both happen, but one depends on the other and the second call always error.

I could chain two keys to a function (I don’t know how to do this) and could also somehow cause the second call to occur only when the first call (token) was completed.

How should I proceed?

Thank you!!

  <script>
    var app = new Vue({
      el: '#app',
      vuetify: new Vuetify(),
      data: () => ({
        teste:'',
        oauthToken:'',
        gwDevAppKey:'',
        agenciaBeneficiario:'452',
        contaBeneficiario:'123873',
        indicadorSituacao:'B',
        indice:'300',
        codigoEstadoTituloCobranca:'7',
        dataInicioMovimento:'04.09.2020',
        dataFimMovimento:'09.09.2020',
  }),
    created: function(){
        //this.getOauthToken();
    
    },
    
    computed:{
        getToken(){
            return this.oauthToken;
        }
    },

    mounted() {
        this.getBoletos();
        
    },
  
    methods: {
        getOauthToken(){
            axios({method: 'post',url:'https://oauth.sandbox.bb.com.br/oauth/token?',
            headers: {
                ContentType:"application/x-www-form-urlencoded",
                "Authorization":'',
                "Accept":"*/*"
            }, 
            data: {
                grant_type: "client_credentials",
                scope: "cobrancas.boletos-info cobrancas.boletos-requisicao"
            }
            }).then(response => {
                this.oauthToken=response.data.token_type+' '+response.data.access_token;
                console.log(this.oauthToken)
            }).catch(error => {
                console.log(error);
            });
        },
        getBoletos(){
            let agenciaBeneficiario=this.agenciaBeneficiario;
            let contaBeneficiario=this.contaBeneficiario;
            let indicadorSituacao=this.indicadorSituacao;
            let indice=this.indice;
            let codigoEstadoTituloCobranca=this.codigoEstadoTituloCobranca;
            let dataInicioMovimento=this.dataInicioMovimento;
            let dataFimMovimento=this.dataFimMovimento;
            let gwDevAppKey=this.gwDevAppKey;
            let params='&agenciaBeneficiario='+agenciaBeneficiario+'&contaBeneficiario='+contaBeneficiario+'&indicadorSituacao='+indicadorSituacao+'&indice='+indice+'&codigoEstadoTituloCobranca='+codigoEstadoTituloCobranca+'&dataInicioMovimento='+dataInicioMovimento+'&dataFimMovimento='+dataFimMovimento;
            console.log(params);
            axios({method: 'post',url:'https://oauth.sandbox.bb.com.br/oauth/token?',
            headers: {
                ContentType:"application/x-www-form-urlencoded",
                "Authorization":'',
                "Accept":"*/*"
            }, 
            data: {
                grant_type: "client_credentials",
                scope: "cobrancas.boletos-info cobrancas.boletos-requisicao"
            }
            }).then(response => {
                this.oauthToken=response.data.token_type+' '+response.data.access_token;
                console.log(this.oauthToken)
            }).catch(error => {
                console.log(error);
            });
            axios({method: 'get',url:'https://api.sandbox.bb.com.br/cobrancas/v1/boletos?'+'gw-dev-app-key='+gwDevAppKey+params,
            headers: {
                ContentType:"application/json",
                "Authorization":this.oauthToken,
                "Accept":"*/*"
            }, 
            data: {

            }
            }).then(response => {
                console.log(response)
                console.log('token:'+this.oauthToken)
            }).catch(error => {
                console.log(error);
                console.log('token:'+this.oauthToken)
            });
        }
        
    },
    
    })
  </script>

<html>
<head>
<title>BOLETOS ONLINE</title>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/css-spinning-spinners/1.1.0/load4.css" />
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<style>
.loading:before { font-size: 5px; }
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  color: #2c3e50;
  margin-top: 10px;
}
</style>
<body>
<div id="app" data-app>
    <v-row class="text-center" width="100%">
      <v-col cols="12">
        <h2 style="text-align:center" class="font-weight-light mb-2 center">    REGISTRAR MANIFESTACAO DEVOLUCAO TOTAL</h2>
            <div>   
                <v-alert type="error">DIV ERROR</v-alert>
            </div>
                <v-card-text>
                    <v-row>
    
                    </v-row>
                    <v-form ref="form" lazy-validation>
                        <v-col cols="12" sm="2">
                            <v-container fluid>
                                <v-text-field required label="Filial" v-model="teste" placeholder="Ex:1,3,6" outlined dense required></v-text-field>
                            </v-container>
                        </v-col>
                    </v-form>
                    <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn @click="">CANCELAR</v-btn>
                    <v-btn @click="getBoletos()">SALVAR</v-btn>
                </v-card-actions>
            </v-card-text>
        </v-col>
    </v-row>
</div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>  

Answer 1

you must use the await to wait for the first Password that brings the token and only then will perform the second request, and for that you must declare the Token as asynchronous, for example

async mounted() {
      await this.getOauthToken();
      await this.getBoletos();
        
    },