目录

一、问题

二、解决方法

三、总结


一、问题

1.有个需求:需要在原有的函数中调用一个接口后,根据接口的值返回 Boolean值。为了正确获取接口调用的值,在原有的函数上添加了 async,并且在接口调用时使用了 await接收。结果居然把原来的代码都改出问题了,注释了自己添加的代码后,仍然有问题;全部撤销后没有问题,还一直以为是自己添加的代码注释后 仍然被调用了,经过仔细排查后才发现是 因为 添加了 async 这个标识,整个函数的返回值不再是一个简单的 Boolean值,看上去是,其实上返回的是一个 promise。所以原来 的判断逻辑,全都变成了 true.

//伪代码
let originfunction=async()=>{
        //调用接口判断
        let result= await this.getIsChange();
        console.log("result",result);
        if(result){
            return true;
        }
        
        //原来的逻辑
        //有返回true,也有返回false的情况
},
getIsChange(){
    _xxx()
    .then((result)=>{
         if(result.status===200){
             return result.ischange;
         }
     })
    .catch((error)=>{
          console].log("error",error);
     )
       

二、解决方法

1.下面用一个实际说明,运行结果如 图2-1所示:async函数返回的都是 promise,需要使用 await来接收解析 promise

    例如下面的返回值 result看起来 special为false时,会直接返回 result:100,但是不用await接收返回的就是一个promise

   1)使用await时,必须写在async函数中否则会报错:Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules 

    2)使用async不一定需要await,但是一定注意:async函数的返回值不再是一般的数据类型,而是promise类型,所以需要用 await解析后再接收

let add = async (a, b) => {
    return a + b;
}
let asyncShow = async (special) => {
    let span_result = document.getElementById("result");
    let result = 100;
    if (special) {
        result = await add(3, 4)
        span_result.innerText = result;
    }
    span_result.innerText = result;

    return result;
}
window.onload=async () => {
    // async方法返回的东西 必须用await接收,否则收到的就是一个promise,需要自己解析
    let result = asyncShow();
    // result Promise {<fulfilled>: 100}[[Prototype]]: Promise[[PromiseState]]: "fulfilled"[[PromiseResult]]: 100
    console.log("result", result)

    let awaitResult = await asyncShow();
    //awaitResult 100
    console.log("awaitResult", awaitResult);



    let specailResult=asyncShow(true);
    // specialResult Promise {<pending>}[[Prototype]]: Promise[[PromiseState]]: "fulfilled"[[PromiseResult]]: 7
    console.log("specialResult",specailResult);
    let awaitSpecialResult=await asyncShow(true);
    // awaitSpecialResult 7
    console.log("awaitSpecialResult",awaitSpecialResult)
}
// 使用await时,必须写在async函数中,否则会报错:Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules (at async.js:25:19)
// let awaitResult = await asyncShow();
// console.log("awaitResult", awaitResult);

// 使用async不一定需要await,但是一定注意:async函数的返回值不再是一般的数据类型,而是promise类型,所以需要用 await解析后再接收
图 2-1

 

三、总结

        1.async函数返回的是一个promise,需要使用 await接收。

        2.await必须写在 async函数中。

/*

感谢wxy的帮助!

希望对你有帮助!

如有错误,欢迎指正!

*/

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐