Vue api interface component problem

problem description

in the code currently written, in common.js. Already. Then () once. Why in the vue component. We need to do it again. Then (). Is there any way to get the desired res data directly using this.common.Login ()?

related codes

common.js

Login: () => {
    return axios.get("", {})
    .then(res => {
        let { msg, code, data } = res.data;
        if (code !== 1) {
            Message({
                message: msg,
                type: "error"
            });
        } else {
            return res
            console.log(res);
        }
    })
    .catch(function(error) {
        console.log(error);
    });
}

demo.vue

    methods:{
        getList(){
            this.common.Login()
            .then( res =>{
                this.Role = res.data.data
            })
        }
    },

continue the question

if not in the demo.vue component

.then( res=> {
    this.Role = res.data.data
})

use the following directly

getList(){
    this.common.Login()
}

In the case of

. The data obtained is as follows:
how to solve the problem with an extra layer of Promise,?

what result do you expect? What is the error message actually seen?

common.js writes all interface methods to death. In the demo.vue component. You can get the data directly by this.common.Login (). There is no need for .then ().