外部文件中的异步/等待 axios答案

【问题标题】：Async/await axios in external file外部文件中的异步/等待 axios
【发布时间】：2023-12-02 01:11:01
【问题描述】：

我正在尝试使用 axios 和外部 JavaScript 文件来理解 async/await。这是为了不在 Vue 页面中包含 HTTP 调用并在其他组件中重用它。当我尝试这段代码似乎可以工作但“const result=await this.login.goLogin(this.password)”时，结果仍然未定义。

    scr
 |- components
      |-login.vue
 |- service
      |-login.js

--> Login.vue 方法

async goLogin(){
            console.log(this.password)
            const result=await this.login.goLogin(this.password)
            console.log('--Res')
            console.log(result)
        },

--> login.js 函数

 async goLogin(password){
        //console.log(password)
        await axios.post(appRoute+'user/login',{pwd:password})
                .then(data=>{
                    var user = { token:data.data.results };
                    return user})
                .catch(err=>{
                    return {errorMessage:err.message}})
    }

【问题讨论】：

标签： vue.js async-await axios vuejs3

【解决方案1】：

您应该首先了解Async/Await 与Promises 的基本区别。

异步/等待：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

承诺：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

这是Promise 的示例：

someFunction().then((result)=>{
    /*Your logic*/
}).catch(()=>{
    /*Error handle*/
})

这是Async/Await 的示例：

try{
    let result = await someFunction()
    /*Your logic*/
}catch(err){
    /*Error handle*/
}

如果您要将Async/Await 与axios 一起使用：

let response = await axios.post()
//The program will wait until response got its result.
let user = response.data.results

【讨论】：

【解决方案2】：

在链接的.then() 方法中返回不会解决承诺。您可以将您的 axios 包装在 Promise() 对象中并根据响应解决/拒绝：

goLogin(password){
    return new Promise((resolve, reject) => {
        axios.post(appRoute+'user/login',{ pwd: password })
            .then(data => {
                var user = ;
                resolve({ token: data.data.results });
            })
            .catch(err => {
                reject({ errorMessage: err.message });
            })
    });
}

【讨论】：

【解决方案3】：

我以这种方式解决：这样，我可以做出更复杂的结果，并且 vue 端的未决承诺可以像上面 login.vue 中一样正确解析

--> login.js function
async goLogin(password){
        let result
        await axios.post(appRoute+'user/login',{pwd:password})
                .then(data=>{
                    console.log(data)
                    result = { token: data.data.results }})
                .catch(err=>{
                    result= {errorMessage:err.message}})
        return result
    }
}

_{代表问题作者添加。}

【讨论】：