异步执行的问题

Question

我先调用了dialogCall(）因为接口是异步执行所以先打印dialogCall里的console为空，怎么让它按顺序执行呢，先接口在console

   dialogCall() {
        this.getUserList();
        console.log(this.tableData)//这里为空
    },
    
    
    //接口
    getUserList() {
        axiosRequestHandler(userModuleUrl.userPage, {
            size: 10,
            page: 1
        }).then(res => {
            this.tableData = res.records;
        });
    },

Answer 1

    //接口
    getUserList() {
        axiosRequestHandler(userModuleUrl.userPage, {
            size: 10,
            page: 1
        }).then(res => {
            this.tableData = res.records;
            console.log(this.tableData)//这里为空
        });
    },

或者:

   dialogCall() {
        this.getUserList().then(res => {
            this.tableData = res.records;
            console.log(this.tableData)//这里为空
        })
    },
    
    
    //接口
    getUserList() {
        return axiosRequestHandler(userModuleUrl.userPage, {
            size: 10,
            page: 1
        })
    },

或者:

async dialogCall() {
        const res = await this.getUserList();
        this.tableData = res.records;
        console.log(this.tableData)//这里为空
    },
    
    
    //接口
    getUserList() {
        return axiosRequestHandler(userModuleUrl.userPage, {
            size: 10,
            page: 1
        })
    },

搜索一下 Promise 和 async await 用法吧

Answer 2

使用async/await

  async dialogCall () {
        let res = await this.getUserList();
        this.tableData = res.records;
        console.log(this.tableData)//这里为空
    },
    
    
    //接口
    getUserList() {
       return axiosRequestHandler(userModuleUrl.userPage, {
            size: 10,
            page: 1
        })
    },