async和await

重点:
1、等待指的是:遇见await,先执行await行的代码,然后暂停await行后面的代码(awai行执行的代码,如果是async函数:先返回promise对象,执行resolve后,promise对象将更新),先执行await所在函数的外部代码;
await三层意义:
1、async和await一起配合,完成函数等待,先执行外部调用函数;
2、await+promise一起配置,完成settimeout的等待,确保被调用函数内部的执行顺序。
3、await会简化then,直接获取promise的返回值。

详解:
1、函数使用async修饰后,函数的返回值将为promise;
2、函数内有await,必须要使用async修饰;
3、有async修饰符的函数,函数内不一定非要有await代码;
4、await后面是普通函数,也可以是async修饰的函数以及promise对象及普通对象;都将触发当前函数的进程等待;

详述:
async:
1、函数内部可能有await,函数为异步函数;
2、返回值为promise类型;确保异步函数可以嵌套;
3、async函数内的代码会顺序执行;

await:
1、替换了then,简化获取promise的值,代码清晰;
2、所属的函数必须要有async包围,因为有了await,就证明了该代码块是异步的;
3、await的代码执行完毕后,才会执行函数后续的代码;

代码汇总讲解:
非await 调用:
调用函数(调用前的代码)-->被调用函数(await+await前的代码)--->调用函数(调用后的代码)-->调用函数外部的代码-->被调用函数(await后的代码)
被调用函数:
let promise = async function () {
    console.log("====promise start");
    await new Promise((resolve, reject) => {
        console.log(" promise await start");
        setTimeout(() => {
            console.log("====promise timeout");
            resolve('异步操作成功!'); // 成功后调用resolve函数  
        }, 4000);
    });
    console.log("====promise end");
    return 1;
};
调用函数:
(async () => {
    console.log("====执行start");
    result = promise();
    console.log("====执行end" + result);
})();
console.log("====外部");
输出:
====执行start
====promise start
 promise await start
====执行end[object Promise]
====外部
====promise timeout
====promise end
await 调用:
调用函数(await+await前的代码)-->被调用函数:await+await前的代码)--->调用函数外部的代码-->被调用函数(await后的代码)
--->调用函数(await后的代码)
被调用函数:
let promise = async function () {
    console.log("====promise start");
    await new Promise((resolve, reject) => {
        console.log(" promise await start");
        setTimeout(() => {
            console.log("====promise timeout");
            resolve('异步操作成功!'); // 成功后调用resolve函数  
        }, 4000);
    });
    console.log("====promise end");
    return 1;
};
调用函数:
(async () => {
    console.log("====执行start");
    result = promise();
    console.log("====执行end" + result);
})();
console.log("====外部");
输出:
await嵌套:
执行顺序:
调用函数(调用前+await行代码)-->
第一个await函数(await前+await行代码)-->
第二个await函数(await前+await行代码)-->
调用函数(外部代码)-->
第二个await函数(await后代码)-->
第一个await函数(await后代码)-->
调用函数(await后的代码)


代码:
第一个await
let promise = async function () {
    console.log("====promise start");
    await promise2();
    console.log("====promise end");
    return 1;
};
第二个await
let promise2 = async function () {
    console.log("====promise2 start");
    await new Promise((resolve, reject) => {
        console.log(" promise2 await start");
        setTimeout(() => {
            console.log("====promise2 timeout");
            resolve('异步操作成功!'); // 成功后调用resolve函数  
        }, 4000);
    });
    console.log("====promise2 end");
    return 1;
};
await调用
(async () => {
    console.log("====执行start");
    result = await promise();
    console.log("====执行end" + result);
})();
输出:
====执行start
====promise start
====promise2 start
promise2 await start
====外部
====promise2 timeout
====promise2 end
====promise end
====执行end1
1、promise代码
let promise2 = function () {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log("promise2" + (i++));
            resolve('异步操作成功!'); // 成功后调用resolve函数  
        }, 4000);
    })
};
输出:

2、使用then调用
promise2().then((successMessage) => {  
  console.log(successMessage); // 打印 "异步操作成功!"  
}).catch((errorMessage) => {  
  console.log(errorMessage); // 不打印,因为只有resolve被调用  
});
3、使用await调用
async function runawait() {
    result = await promise2();
    console.log("====4");
}
1、函数没有await,将不触发等待;
     如果函数async修饰,则返回promise,否则返回正常值;
let promise = function () {
    console.log("====promise start");
    setTimeout(() => {
        console.log("====promise timeout");
        // resolve('异步操作成功!'); // 成功后调用resolve函数  
    }, 4000);
    return 1;
};
(async () => {
    result = promise();
    console.log("====执行" + result);
})();
console.log("====外部");
输出:
====promise start
====执行1
====外部
====promise timeout

2、如果有await,将触发等待
let promise = async function () {
    await 1;
    console.log("====promise start");
    setTimeout(() => {
        console.log("====promise timeout");
        // resolve('异步操作成功!'); // 成功后调用resolve函数  
    }, 4000);
    return 1;
};
(async () => {
    result = promise();
    console.log("====执行" + result);
})();
console.log("====外部");
输出:
====执行[object Promise]
====外部
====promise start
====promise timeout

settimeout需要await+promise配合,完成函数内的顺序执行。
1、无await+promise配合
let promise = async function () {
    console.log("====promise start");
    setTimeout(() => {
        console.log("====promise timeout");
        // resolve('异步操作成功!'); // 成功后调用resolve函数  
    }, 4000);
    console.log("====promise end");
    return 1;
};
(async () => {
    result = await promise();
    console.log("====执行" + result);
})();
console.log("====外部");
输出:
====promise start
====promise end
====外部
====执行1
====promise timeout
2、有await+promise配合:
let promise = async function () {
    await 1;
    console.log("====promise start");
    await new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log("====promise timeout");
            resolve('异步操作成功!'); // 成功后调用resolve函数  
        }, 4000);
    });
    console.log("====promise end");
    return 1;
};
(async () => {
    result = promise();
    console.log("====执行" + result);
})();
console.log("====外部");

输出:
====执行[object Promise]
====外部
====promise start
====promise timeout
====promise end


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容