【JS017】asycn和await浅谈

日期：2021年9月15日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 0.0006
如果您想了解更多有关javascript的知识，那么请点《javascript学习的奇妙之旅》

---

---

一、asycn和await的初识

说明：ES2017 标准引入了 async 函数，使得异步操作变得更加方便，它就是 Generator 函数的语法糖。async 和 await 两种语法结合可以让异步代码像同步代码一样。

• async 函数返回值： promise 对象；
• async 函数执行结果返回值决定 promise 对象的结果；

//（1）定义
async function fn(){
    //do something
	//let a = await p1;
	//let b = await p2;
};

//（2）调用
const p = fn();

二、async函数与普通函数的比较

比较	async 函数	普通函数
函数声明	asycn function fn(){}	function fn(){}
函数调用	fn()	fn()
执行结果	promise 对象	return 后面的值 或 undefined

//（0）return　undefined
async function asyncMain_undefined(){
    
};
console.log(asyncMain_undefined());
//控制台输出：
//Promise {<fulfilled>: undefined}
// [[Prototype]]: Promise
// [[PromiseState]]: "fulfilled"
// [[PromiseResult]]: undefined

//（1）return　字符串
async function asyncMain_String(){
    return "Hello async";
};
console.log(asyncMain_String());
//控制台输出：
//Promise {<fulfilled>: 'Hello async'}
// [[Prototype]]: Promise
// [[PromiseState]]: "fulfilled"
// [[PromiseResult]]: "Hello async"

//（2）return　数值
async function asyncMain_Num(){
    return 996;
};
console.log(asyncMain_Num());
//控制台输出：
//Promise {<fulfilled>: 996}
// [[Prototype]]: Promise
// [[PromiseState]]: "fulfilled"
// [[PromiseResult]]: 996

//（3）return　boolean
async function asyncMain_Boolean(){
    return false;
};
console.log(asyncMain_Boolean());
//控制台输出：
//Promise {<fulfilled>: false}
// [[Prototype]]: Promise
// [[PromiseState]]: "fulfilled"
// [[PromiseResult]]: false


//（4）return　普通对象
async function asyncMain_object(){
    return {name:"张三"};
};
console.log(asyncMain_object());
//控制台输出：
//Promise {<fulfilled>: {…}}
// [[Prototype]]: Promise
// [[PromiseState]]: "fulfilled"
// [[PromiseResult]]: Object

//（5）return　数组
async function asyncMain_Array(){
    return [0,0,7];
};
console.log(asyncMain_Array());
//控制台输出：
//Promise {<fulfilled>: Array(3)}
// [[Prototype]]: Promise
// [[PromiseState]]: "fulfilled"
// [[PromiseResult]]: Array(3)

//（6）return　Promise对象
async function asyncMain_Promise(){
    let p = new Promise((resolve,reject)=>{
        resolve("Promise-resolve");
        // reject("Promise-reject");
    })
    console.log(p);
    //控制台输出：
    //Promise {<fulfilled>: 'Promise-resolve'}
    // [[Prototype]]: Promise
    // [[PromiseState]]: "fulfilled"
    // [[PromiseResult]]: "Promise-resolve"
    return p;
};
console.log(asyncMain_Promise());
//控制台输出：
//Promise {<pending>}
// [[Prototype]]: Promise
// [[PromiseState]]: "fulfilled"
// [[PromiseResult]]: "Promise-resolve"

三、await的使用

• await 必须写在 async 函数中，如果在async函数体之外使用它，就会抛出语法错误 SyntaxError；
• await 右侧表达式一般为 promise 对象；
• await 返回的是 promise 成功的值；
• await 的 promise 失败，就会抛出异常，可以通过 try...catch 捕获处理

（1）同步执行的示例：

function promiseOne(){
    return new Promise((resolve,reject)=>{
        setTimeout(() => {
            resolve(111);
        }, 1000);
    });
};

function promiseTwo(){
    return new Promise((resolve,reject)=>{
        setTimeout(() => {
            resolve(222);
        }, 1000);
    });
};

async function asyncFunc(){
    let result1 = await promiseOne();
    console.log("result1 = " + result1);
    let result2 = await promiseTwo();
    console.log("result2 = " + result2);
    let result3 = 1 + 1;
    console.log("result3 = " + result3);
    return [result1,result2];
};

//返回的是 Promise 对象
const p = asyncFunc();
console.log(p);
//控制台输出：
//Promise {<pending>}
//result1 = 111
//result2 = 222
//result3 = 2

p.then(value=>{
    console.log(value);
},reason=>{
    console.log(reason);
});
//控制台输出：(2) [111, 222]

（2）try...catch 错误捕获示例

function promiseOne(){
    return new Promise((resolve,reject)=>{
        setTimeout(() => {
            reject("当错误来敲门");
        }, 1000);
    });
};

//（1）声明 async 函数
async function main(){
    try {    
        let result1 = await promiseOne();
        console.log("result1 = " + result1);
    } catch (e) {
        console.log("e = " + e);
    }
};

//（2）执行 async 函数
main();
//控制台输出
//e = 当错误来敲门

四、asycn和await来封装AJAX

function sendAJAX(url){
    return new Promise((resolve,reject)=>{
        //CSDN官网：
        //let url = "https://blog.csdn.net";

        //（1）创建对象
        const xhr = new XMLHttpRequest();
        // console.log(xhr);

        //（2）初始化
        xhr.open("GET",url);

        //（3）发送
        xhr.send();

        //（4）绑定事件，处理响应结果
        xhr.onreadystatechange = function(){
            //判断
            if(xhr.readyState===4){
                if(xhr.status>=200 && xhr.status<300){
                    //成功
                    // console.log(xhr.response);
                    resolve(xhr.response);
                }else{
                    //失败
                    // console.error(xhr.status);
                    reject(xhr.status);
                };
            }
        };
    });
};

//（1）声明async函数
async function main(){
    let a = await sendAJAX("https://blog.csdn.net");
    console.log(a);
}

//（2）执行async函数
main();

---

参考文章：
1、《Web 开发技术》之 async 函数
2、《ECMAScript 6 入门》之 async 函数

---

版权声明：本文为博主原创文章，如需转载，请给出：
原文链接：https://blog.csdn.net/qq_35844043/article/details/120326769