Promise详解，相信你看完我这篇文章简单的Promise使用方式基本上就全会了
生活随笔
收集整理的這篇文章主要介紹了
Promise详解，相信你看完我这篇文章简单的Promise使用方式基本上就全会了
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
Promise 對象
認(rèn)識Promise對象
語法
new Promise((resolve, reject)=>{resolve();// reject(); }).then(()=>{console.log("resolve!"); }).catch(()=>{console.log("reject!"); })Promise 對象執(zhí)行了 resolve 就不執(zhí)行reject
也就是說，執(zhí)行了 .then 就不執(zhí)行 .catch
resolve/reject 類型是 Function
案例1：打印 1-3 每隔500ms
function GetTime() {return new Promise((resolve, reject) => {setTimeout(() => {resolve();}, 500)});}var num = 1;GetTime().then(() => {console.log(num++);return GetTime(); }).then(() => {console.log(num++);return GetTime(); }).then(() => {console.log(num++);return GetTime(); });案例2 做一個簡易的紅綠燈 每個2秒切換燈
<!-- HTML 結(jié)構(gòu) --> <!doctype html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>簡易紅綠燈</title> </head> <body><div></div><div></div><div></div> <!--引入一下js--> </body> </html> /*css 樣式*/ *{margin: 0;padding: 0; } div{width: 50px;height: 50px;border: 1px solid #000000;box-shadow: 0px 0px 4px #cccccc inset;border-radius: 50%;margin-left: 20px; } // js var divs = document.querySelectorAll("div");function GetTime(){return new Promise((resolve, reject)=>{setTimeout(()=>{resolve();},2000) }); }GetTime().then(()=>{divs[0].style.backgroundColor = "red";return GetTime(); }).then(()=>{divs[1].style.backgroundColor = "green";divs[0].style.backgroundColor = "rgba(0,0,0,0)";return GetTime(); }).then(()=>{divs[2].style.backgroundColor = "yellow";divs[1].style.backgroundColor = "rgba(0,0,0,0)";return GetTime(); });Promise 三種狀態(tài)
pending 剛進(jìn)入promise狀態(tài)
fulfilled 執(zhí)行了resolve 后
rejected 執(zhí)行了reject 后
Promise.all()
將所有的Promise對象中resolve 的參數(shù)內(nèi)容合成數(shù)組 用于遍歷所有的promise對象Promise.race()
誰快誰先完成Promise.resolve().then(()+>{});
new promise((resolve, reject)=>{resolve(); }).then(()=>{});Promise.reject().catch(()=>{});
new promise((resolve, reject)=>{reject(); }).catch(()=>{});隱士返回一個promise對象
// 這是一個promise對象 loadImage("./img/5-.jpg") .then((img)=>{console.log("aaa", img);// 相當(dāng)于returnPromise.resolve(); }).then((img)=>{console.log("bbb", img); // 返回的resolve 無參數(shù)，所以打印出bbb undefined })async await
語法 :
async function fn(){return "a"; } var p = fn(); log(a) => 得到的一個結(jié)果是 Promiseawait 只能等待 promise 執(zhí)行 resolve 或者 reject 后的內(nèi)容，并且 await 只能出現(xiàn)在 async 函數(shù)中
謝謝觀看，如需幫助請留言，
一鍵三連 支持一下作者
總結(jié)
以上是生活随笔為你收集整理的Promise详解，相信你看完我这篇文章简单的Promise使用方式基本上就全会了的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 玩cf人物出现透明怎么解决
- 下一篇： 有道翻译官如何翻译手机网页(如何评价长沙