場景1
//場景1: 兩個異步方法 獨立的
var asyncFn1 = (x) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(x);
}, 3000)
})
}
var asyncFn2 = (y) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(y);
}, 1000)
})
}
async function asyncTest() {
console.log("async 開始");
let x = await asyncFn1("asyncFn1");
console.log(x);
let y = await asyncFn2("asyncFn2");
console.log(y)
console.log("async 結(jié)束")
}
console.log("外層 開始");
asyncTest();
console.log("外層 結(jié)束");
//打印結(jié)果
/**
*
* 外層 開始
async 開始
外層 結(jié)束
asyncFn1
asyncFn2
async 結(jié)束
*
*/
場景2
let map = new Map();
let mapValue = "";
//場景2: 兩個異步方法 先后順序
var asyncFn1 = (x) => {
return new Promise((resolve) => {
setTimeout(() => {
map = x;
resolve(map);
}, 3000)
})
}
var asyncFn2 = (y) => {
return new Promise((resolve) => {
setTimeout(() => {
mapValue = map.get(y);
resolve(mapValue);
}, 1000)
})
}
async function asyncTest() {
console.log("async 開始");
let m = new Map();
m.set("key", "value");
let x = await asyncFn1(m);
console.log(x);
let y = await asyncFn2("key");
console.log(y)
console.log("async 結(jié)束")
}
console.log("外層 開始");
asyncTest();
console.log("外層 結(jié)束");
//打印結(jié)果
/**
*
* 外層 開始
async 開始
外層 結(jié)束
map對象
value
async 結(jié)束
*
*/
場景3
let map = new Map();
let mapValue = "";
//場景3: 一個同步方法一個異步方法 先后順序(同步方法依賴異步方法值拯啦, 就是說期望的 異步方法先執(zhí)行,同步然后再執(zhí)行)
var asyncFn = (x) => { //異步方法唁情,生成map對象
return new Promise((resolve) => {
setTimeout(() => {
map = x;
resolve(map);
}, 3000)
})
}
var syncFn = (y) => { //同步方法甫匹,通過map對象獲取vaule
mapValue = map.get(y);
return mapValue;
}
async function asyncAndsyncTest() {
console.log("asyncAndsync 開始");
let m = new Map();
m.set("key", "value");
let x = await asyncFn(m);
console.log(x);
let y = syncFn("key");
console.log(y)
console.log("asyncAndsync 結(jié)束")
}
console.log("外層 開始");
asyncAndsyncTest();
console.log("外層 結(jié)束");
//打印結(jié)果
/**
*
* 外層 開始
asyncAndsync 開始
外層 結(jié)束
map對象
value
asyncAndsync 結(jié)束
*
*/
場景4
let map = new Map();
let mapValue = "";
//場景4: 一個同步方法一個異步方法 先后順序(同步方法依賴異步方法值, 就是說期望的 異步方法先執(zhí)行哀墓,同步然后再執(zhí)行)(原始方法解決)
var asyncFn = (x) => { //異步方法喷兼,生成map對象
setTimeout(() => {
map = x;
}, 1000)
}
var syncFn = (y) => { //同步方法,通過map對象獲取vaule
mapValue = map.get(y);
return mapValue;
}
function asyncAndsyncTest() {
console.log("asyncAndsync 開始");
let m = new Map();
m.set("key", "value");
asyncFn(m);
setTimeout(() => {
console.log(map);
let y = syncFn("key");
console.log(y)
}, 2000)
console.log("asyncAndsync 結(jié)束")
}
console.log("外層 開始");
asyncAndsyncTest();
console.log("外層 結(jié)束");
//打印結(jié)果
/**
*
* 外層 開始
asyncAndsync 開始
外層 結(jié)束
map對象
value
asyncAndsync 結(jié)束
*
*/
總結(jié)
async是ES7
async語法使得代碼簡潔清晰季惯,不需要寫那么多的箭頭函數(shù),避免了代碼嵌套
async在接收上一個返回值為參數(shù)時贾漏,比較方便
async/await與Promise一樣藕筋,是非阻塞的。
async函數(shù)是Generator 函數(shù)的語法糖 隐圾,async函數(shù)就是將 Generator 函數(shù)的星號(*)替換成async,將yield替換成await暇藏;進一步說就是async函數(shù)完全可以看作多個異步操作,包裝成的一個 Promise 對象把兔,而await命令就是內(nèi)部then命令的語法糖瓮顽。