Occurrence Problem

I want to write a process of throwing an API in two turns in a click event, but when implemented as follows, the process ended when the first API is executed, and two The eye API is not executed.

Using ASYNC /AWAIT, I expected that the API will run in the AXIOS sequentially, but the processing after the firstAPI did not move in the following process.

Only "1: FirstAPI execution" was output to the console.

As what you want to do, we want to update server-side data with the first API, get a state with the second API, update DATA, and reflect it in drawing.

Vue beginner, but what is the wrong implementation?

Applicable source code

EL-BUTTON V-IF= "Scope.Row.Status" @ click= "Callapi ()" Type= "Danger" Round >
Cancel collaboration <
/EL-Button >
/Template >
Script >
export Default {
    name: "dashboard",
    Data: ()= >
        RETURN {
          Data: [],
          Error: ""
    Methods: {
        Async Callapi () {
            TRY {
                Console.log ('1: FirstAPI run')
                AWAIT AXIOS.DELETE ("http: //localhost: 3000 /API /First);
                Console.log ('2: FirstAPI end')
                console.log ('3: SECONDAPI run')
                const secondresult= await axios.get ("http: //localhost: 3000 /API /SECOND);
                console.log ('4: SECONDAPI end')
                this.data= secondresult.data;
            } catch (Error) {
               Console.log (Error);
               this.Error= Error;
/Script >

Supplementary information (OS, version of tool, etc.)

  • "Vue": "^ 2.5.2"
  • "Vue-Router": "^ 3.0.1"
  • "Vuex": "^ 3.0.1"
  • "axios": "^ 0.18.0"

"1: FirstAPI execution" is only output to the console, but I think that the processing of AXIOS.DELETE is likely to stop. I think it would be better to check if the called API side is working properly. In the start of your hand, you should monitor the network request with the Developer tool and see what the request by AXIOS.DELETE has traced.

Faily Feely2021-04-07 14:44:40