Promise,async,await筆記
Promise
創(chuàng)建promise對(duì)象
- Promise對(duì)象構(gòu)造方法傳入一個(gè)帶有resolve和reject兩個(gè)參數(shù)的函數(shù)function
var promise = new Promise(function (resolve, reject) {
//方法體內(nèi)執(zhí)行異步操作如:文件讀寫ajax之類
setTimeout(function () {
console.log('異步操作');
}, 2000)
});
promise中resolve僵闯，reject
- Promise對(duì)象構(gòu)造方法傳入的function中的resolve尽狠，reject參數(shù)是用來處理成功或失敗
- Promise對(duì)象總共有3中狀態(tài)：
- pending: 初始狀態(tài)钧舌，不是成功或失敗狀態(tài)述雾。
- fulfilled: 意味著操作成功完成疯淫。（執(zhí)行resolve狀態(tài)會(huì)變?yōu)閒ulfilled）
- rejected: 意味著操作失敗。（執(zhí)行reject狀態(tài)會(huì)變?yōu)閞ejected）
var promise = new Promise(function (resolve, reject) {
//方法體內(nèi)執(zhí)行異步操作如:文件讀寫ajax之類
setTimeout(function () {
let success = true;
if (success) {
console.log('成功');
resolve('成功');//fulfilled
} else {
console.log('失敗');
reject('失敗');//rejected
}
}, 2000)
});
promise中then者疤，catch
- Promise實(shí)例通過then接受成功（可以連點(diǎn)）互订，catch接收失敗
- promise一次resolve執(zhí)行會(huì)順序觸發(fā)promise實(shí)例下的所有then方法
- promise中reject,throw Erroe都會(huì)promise實(shí)例下的所有catch方法
var promise = new Promise(function (resolve, reject) {
//方法體內(nèi)執(zhí)行異步操作如:文件讀寫ajax之類
setTimeout(function () {
let success = true;
if (success) {
resolve('執(zhí)行成功');
} else {
reject('失敗');
}
}, 2000)
});
//promise實(shí)例接受成功和失敗
promise.then(function (data) {
console.log(1);
console.log(data);
}).then(function (data) {
console.log(2);
console.log(data);
}).catch(function (err) {
console.log(err);
});
// 上述代碼會(huì)打印:
// 1
// 執(zhí)行成功
// 2
// 執(zhí)行成功
兩個(gè)promise依賴執(zhí)行
- promise的then方法默認(rèn)返回的是自身promise實(shí)例（從而實(shí)現(xiàn)then的連點(diǎn)）,當(dāng)在then方法中添加return時(shí),return就會(huì)根據(jù)return來變化
現(xiàn)有一個(gè)這樣的業(yè)務(wù)場景需要先調(diào)接口A獲取用戶信息,再根據(jù)接口A返回的數(shù)據(jù)調(diào)用接口B,兩個(gè)接口存在依賴
var promise1 = new Promise(function (resolve, reject) {
//方法體內(nèi)執(zhí)行異步操作如:文件讀寫ajax之類
setTimeout(function () {
let success = true;
if (success) {
resolve('接口A');
} else {
reject('失敗');
}
}, 2000)
});
//promise實(shí)例接受成功和失敗
promise1.then(function (data) {
console.log('接口A執(zhí)行');
console.log(data);
var promise2 = new Promise(function (resolve, reject) {
//方法體內(nèi)執(zhí)行異步操作如:文件讀寫ajax之類
setTimeout(function () {
let success = true;
if (success) {
resolve('接口B');
} else {
reject('失敗');
}
}, 1500)
});
return promise2;
}).then(function (data) {
console.log('接口B執(zhí)行');
console.log(data);
}).catch(function (err) {
console.log(err);
});
// 上述代碼會(huì)打印:
// 接口A執(zhí)行
// 接口A
// 接口B執(zhí)行
// 接口B
兩個(gè)promise順序執(zhí)行
- promise的then方法默認(rèn)返回的是自身promise實(shí)例（從而實(shí)現(xiàn)then的連點(diǎn)）,當(dāng)在then方法中添加return時(shí),return就會(huì)根據(jù)return來變化
現(xiàn)有一個(gè)這樣的業(yè)務(wù)場景需要先調(diào)接口A和接口B獲取數(shù)據(jù),根據(jù)結(jié)果A返回?cái)?shù)據(jù)取處理結(jié)果B返回的數(shù)據(jù),兩個(gè)接口不存在依賴，但是存在順序
- 以下demo雖然接口B會(huì)比接口A早返回?cái)?shù)據(jù)但是promise可以實(shí)現(xiàn)異步順序處理
var promise1 = new Promise(function (resolve, reject) {
//方法體內(nèi)執(zhí)行異步操作如:文件讀寫ajax之類
setTimeout(function () {
let success = true;
if (success) {
resolve('接口A執(zhí)行成功');
} else {
reject('失敗');
}
}, 2000)
});
var promise2 = new Promise(function (resolve, reject) {
//方法體內(nèi)執(zhí)行異步操作如:文件讀寫ajax之類
setTimeout(function () {
let success = true;
if (success) {
resolve('接口B執(zhí)行成功');
} else {
reject('失敗');
}
}, 1500)
});
//promise實(shí)例接受成功和失敗
promise1.then(function (data) {
console.log(1);
console.log(data);
return promise2;
}).then(function (data) {
console.log(2);
console.log(data);
}).catch(function (err) {
console.log(err);
});
// 上述代碼會(huì)打印:
// 1
// 接口A執(zhí)行成功
// 2
// 接口B執(zhí)行成功
Promise.all方法
- all方法是Promise類下的靜態(tài)方法,用于處理多個(gè)promise執(zhí)行合并
現(xiàn)有一個(gè)這樣的業(yè)務(wù)場景渲染需要接口A和接口B數(shù)據(jù)，兩個(gè)接口不存在依賴卷拘，也不存在順序
var promise1 = new Promise(function (resolve, reject) {
//方法體內(nèi)執(zhí)行異步操作如:文件讀寫ajax之類
setTimeout(function () {
let success = true;
if (success) {
resolve('promise1執(zhí)行成功');
} else {
reject('失敗');
}
}, 1500)
});
var promise2 = new Promise(function (resolve, reject) {
//方法體內(nèi)執(zhí)行異步操作如:文件讀寫ajax之類
setTimeout(function () {
let success = true;
if (success) {
resolve('promise2執(zhí)行成功');
} else {
reject('失敗');
}
}, 2000)
});
Promise.all([promise1,promise2]).then(function (datas) {
console.log(datas[0]);
console.log(datas[1]);
}).catch(function (err) {
console.log(err);
});
// 上述代碼會(huì)打印:
// promise1執(zhí)行成功
// promise2執(zhí)行成功
Promise.race方法
- race方法是Promise類下的靜態(tài)方法,用于處理多個(gè)promise競速
現(xiàn)有一個(gè)這樣的業(yè)務(wù)場景需要接口A或者接口B的數(shù)據(jù)喊废，兩個(gè)接口不存在依賴，也不存在順序恭金，誰先返回我就用誰的數(shù)據(jù)
var promise1 = new Promise(function (resolve, reject) {
//方法體內(nèi)執(zhí)行異步操作如:文件讀寫ajax之類
setTimeout(function () {
let success = true;
if (success) {
resolve('promise1執(zhí)行成功');
} else {
reject('失敗');
}
}, 1500)
});
var promise2 = new Promise(function (resolve, reject) {
//方法體內(nèi)執(zhí)行異步操作如:文件讀寫ajax之類
setTimeout(function () {
let success = true;
if (success) {
resolve('promise2執(zhí)行成功');
} else {
reject('失敗');
}
}, 2000)
});
Promise.race([promise1,promise2]).then(function (data) {
console.log(data);
}).catch(function (err) {
console.log(err);
});
// 上述代碼會(huì)打印:
// promise1執(zhí)行成功
async/await
- async關(guān)鍵字申明的該方法是一個(gè)異步方法,申明方法中的await申明的promise對(duì)象都會(huì)轉(zhuǎn)換為同步
- await關(guān)鍵字阻塞promise對(duì)象使promise變?yōu)橥?/li>
- await只能在async關(guān)鍵字申明的異步方法中使用
- await等待的雖然是promise對(duì)象操禀，但不必寫.then()，直接可以得到resolve的返回值横腿。
- 捕獲錯(cuò)誤用try catch
function asyncfun(time) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
let success = true;
if (success) {
resolve('成功');
} else {
reject('失敗');
}
}, time);
});
}
/**
* 使用async颓屑，await
*/
let load = async function() {
console.log('開始');
try {
//直接可以得到resolve的返回值。
let succ = await asyncfun(2000);
console.log('2000'+succ);
let succ1 = await asyncfun(1500);
console.log('1500'+succ1);
} catch (err) {
//直接可以得到reject的返回值耿焊。
console.log(err);
}
console.log('結(jié)束');
};
load();
