日期:2021年9月15日
作者:Commas
签名:(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释:如果您觉得有所帮助
,帮忙点个赞
,也可以关注我,我们一起成长;如果有不对的地方,还望各位大佬不吝赐教,谢谢^ - ^
1.01365 = 37.7834;0.99365 = 0.0255
1.02365 = 1377.4083;0.98365 = 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