ES6中的Promise對(duì)象與async和await方法詳解
promise存在的意義:解決異步回調(diào)地獄問題
三種狀態(tài):pending(進(jìn)行中)、fulfilled(已成功)、reject(已失?。?/p>
Promise是es6引入的異步編程薪解決方案,語法上promise就是一個(gè)構(gòu)造函數(shù),用來封裝異步操作病可以獲取其成功或失敗的結(jié)果。
Promise構(gòu)建出來的實(shí)例存在以下方法: then() 是實(shí)例狀態(tài)發(fā)生改變時(shí)的回調(diào)函數(shù),第一個(gè)參數(shù)是resolved狀態(tài)的回調(diào)函數(shù),第二個(gè)參數(shù)是rejected狀態(tài)的回調(diào)函數(shù) catch() 用于指定發(fā)生錯(cuò)誤時(shí)的回調(diào)函數(shù) finally() 用于指定不管 Promise 對(duì)象最后狀態(tài)如何,都會(huì)執(zhí)行的操作
1)promise構(gòu)造函數(shù):promise(excutor){}
2)promise.protiotype.then方法
3)promise.prototype.catch方法
<script>
//如何接收回調(diào)地域
function aaa() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(1);
console.log("執(zhí)行了aaa");
}, 2000)
})
}
function bbb() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(2);
console.log("bbb");
}, 3000)
})
}
function ccc() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(3);
console.log("ccc");
}, 3000)
})
}
function fn1() {
var sum = 0;
aaa().then((res) => {//返回promise對(duì)象
sum = sum + res;
return bbb();
}).then((res) => {
sum = sum + res;
return ccc();
}).then((res) => {
sum = sum + res;
console.log("sum", sum);
// return sum
})
}
// fn1();
//promise對(duì)象,用于處理多個(gè)異步,(傳入的參數(shù)是一個(gè)數(shù)組),在所有異步都執(zhí)行完畢才會(huì)觸發(fā),都成功才觸發(fā)
//比如一個(gè)頁面上需要等待多個(gè)ajax請(qǐng)求,然后才正常顯示頁面
//只要有一個(gè)失敗則為失敗
let a = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(3);
console.log("a");
}, 3000)
})
let b = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(6);
console.log("b");
}, 3000)
})
// Promise.all([a, b]).then((result) => {
// console.log("result", result);
// }).catch((err) => {
// console.log("err", err);
// });
//Promise.race 執(zhí)行時(shí)間快執(zhí)行,那個(gè)promise執(zhí)行的快,就選哪個(gè)
//不管結(jié)果本身,是成功狀態(tài)還是失敗狀態(tài),只看執(zhí)行時(shí)間
Promise.race([a, b]).then((res) => {
console.log("成功了", res);
}).catch(err => {
console.log("err", err);
})
</script>
promise的兩個(gè)方法all和race見上述
Promise封裝的ajax
<script>
const p = new Promise((resolve, reject) => {
//1.創(chuàng)建對(duì)象
const xhr = new XMLHttpRequest();
//2.初始化
xhr.open("get", "");
//3.發(fā)送
xhr.send();
//4.綁定事件,處理響應(yīng)結(jié)果
xhr.onreadystatechange = function () {
//判斷
if (xhr.readyState == 4) {
//判斷響應(yīng)狀態(tài)碼200-299
if (xhr.status >= 200 && xhr.status < 300) {
//表示成功
resolve(XHR.response);
} else {
//如果失敗
reject(xhr.status)
}
}
}
})
//指定回調(diào)
p.then(function (value) {
console.log(value);
}, function (reason) {
console.log(reason);
})
</script>async和await方法
async 是es7才有的一個(gè)關(guān)鍵字,和promise對(duì)象有很大的關(guān)聯(lián)
async 標(biāo)識(shí)的函數(shù),必定返回promise對(duì)象
await 關(guān)鍵字 只能放在 async標(biāo)識(shí)的函數(shù)中
作用就是等待獲取promise返回的內(nèi)容,也就是resolve和reject的值
<script>
//async 返回的是一個(gè)promise對(duì)象
// async function fn() {
// // return "123"
// //如果返回的不是一個(gè)promise對(duì)象,則返回的就是一個(gè)成功的promise對(duì)象
// //拋出錯(cuò)誤 返回的是一個(gè)失敗的promise對(duì)象
// // throw new Error('出錯(cuò)了!')
// //返回的結(jié)果是一個(gè)promise對(duì)象
// return new Promise((resolve, reject) => {
// resolve('成功的數(shù)據(jù)');//返回的也是promise成功的值
// // reject("失敗的內(nèi)容");//返回的也是失敗的neirong
// })
// }
// const result = fn();
// result.then(value => {
// console.log(value);
// }, reason => {
// console.warn(reason)
// })
// console.log(result);
//await 表達(dá)式
//1.await必須寫在async函數(shù)中 2.await右側(cè)的表達(dá)式一般為promise對(duì)象
//3.await 返回的是promise成功的值 4.await的promise失敗了,就會(huì)拋出異常,需要通過try...catch捕獲處理
const p = new Promise((resolve, reject) => {
// resolve("成功的值!");
reject('失敗啦!');
})
//await要放在async函數(shù)中
async function main() {
try {
let result = await p;
console.log(result);
} catch (e) {
console.log(e);
}
}
//調(diào)用函數(shù)
main();
</script>
到此這篇關(guān)于ES6中的Promise對(duì)象與async和await方法詳解的文章就介紹到這了,更多相關(guān)Promise對(duì)象與async和await方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
基于html+css+js實(shí)現(xiàn)簡(jiǎn)易計(jì)算器代碼實(shí)例
這篇文章主要介紹了基于html+css+js實(shí)現(xiàn)簡(jiǎn)易計(jì)算器代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
JavaScript函數(shù)式編程實(shí)現(xiàn)介紹
函數(shù)式編程是一種編程范式,將整個(gè)程序都由函數(shù)調(diào)用以及函數(shù)組合構(gòu)成。 可以看成一條流水線,數(shù)據(jù)可以不斷地從一個(gè)函數(shù)的輸出流入另一個(gè)函數(shù)的輸入,最后輸出結(jié)果2022-09-09
Next.js應(yīng)用轉(zhuǎn)換為TypeScript方法demo
這篇文章主要為大家介紹了Next.js應(yīng)用轉(zhuǎn)換為TypeScript方法demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12
js實(shí)現(xiàn)多個(gè)標(biāo)題吸頂效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)多個(gè)標(biāo)題吸頂效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-01-01
JavaScript 實(shí)現(xiàn)鍋拍灰太狼小游戲
這篇文章主要介紹了JavaScript 實(shí)現(xiàn)鍋拍灰太狼小游戲,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-09-09
layer彈出層倒計(jì)時(shí)關(guān)閉的實(shí)現(xiàn)方法
今天小編就為大家分享一篇layer彈出層倒計(jì)時(shí)關(guān)閉的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09

