Promise 对象

认识Promise对象

语法

new Promise((resolve, reject)=>{resolve();// reject();
}).then(()=>{console.log("resolve!");
}).catch(()=>{console.log("reject!");
})

Promise 对象执行了 resolve 就不执行reject
也就是说，执行了 .then 就不执行 .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 结构 -->
<!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 三种状态

pending 刚进入promise状态

fulfilled 执行了resolve 后

rejected 执行了reject 后

Promise.all()

将所有的Promise对象中resolve 的参数内容合成数组
用于遍历所有的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);// 相当于returnPromise.resolve();
}).then((img)=>{console.log("bbb", img); // 返回的resolve 无参数，所以打印出bbb undefined
})

async await

语法 :

async function fn(){return "a";
}
var p = fn();
log(a) => 得到的一个结果是 Promise

await 只能等待 promise 执行 resolve 或者 reject 后的内容，并且 await 只能出现在 async 函数中

谢谢观看，如需帮助请留言，

一键三连支持一下作者

Promise详解，相信你看完我这篇文章简单的Promise使用方式基本上就全会了相关推荐

RabbitMQ详解，用心看完这一篇就够了【重点】
1.1 消息中间件消息中间件是基于队列与消息传递技术,在网络环境中为应用系统提供同步或异步.可靠的消息传输的支撑性软件系统--百度百科 1.1.1 应用场景 1.1.1.1 异步处理场景说明: 用 ...
JS 的 Promise详解
@[TOC](JS 的 Promise详解)欧诺个鱼 1.概念 ES 6 开始支持 Promise. Promise 对象用于一个异步操作的最终完成(包括成功和失败)及结果值的表示.简而言之,就是处理 ...
angular $q promise详解
前言通过本文,你大概能清楚angular promise是个啥,$q又是个啥,以及怎么用它.这里咱们先灌输下promise的思想. 下面写的全是废话,一些看着高逼格其实没什么大作用的概念,想知道$q ...
Web.config配置文件详解(新手必看)
Web.config配置文件详解(新手必看) 花了点时间整理了一下ASP.NET Web.config配置文件的基本使用方法.很适合新手参看,由于Web.config在使用很灵活,可以自定义一些节点. ...
荣耀智慧屏鸿蒙安装第三方软件的方法,华为荣耀智慧屏安装第三方软件的教程，图文详解，一看就会！...
华为荣耀智慧屏安装第三方软件的教程,图文详解,一看就会! 2020年12月09日 17:42作者:网络编辑:王动分享华为荣耀智慧屏安装第三方软件后,你的电视就可以享受无广告版视频.免费的影视资源. ...
CompletableFuture使用详解（全网看这一篇就行）
Java8 CompletableFuture 用法全解_孙大圣666的博客-CSDN博客_completablefuture CompletableFuture使用详解(全网看这一篇就行)_代 ...
hadoop作业初始化过程详解（源码分析第三篇）
(一)概述我们在上一篇blog已经详细的分析了一个作业从用户输入提交命令到到达JobTracker之前的各个过程.在作业到达JobTracker之后初始化之前,JobTracker会通过submit ...
详解Linux运维工程师打怪升级篇
详解 Linux 运维工程师打怪升级篇积累经验篇做运维也快4年多了,就像游戏打怪升级,升级后知识体系和运维体系也相对变化挺大,学习了很多新的知识点. 运维工程师是从一个呆逼进化为苦逼再成长为牛逼 ...
详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing
W3C规范一般来说,页面中的每一个元素都会形成一个矩形盒子,渲染引擎根据给定的样式确定这个盒子的呈现.通俗的来说,页面的布局就是一个个盒子的排列和摆放.掌握了盒子呈现的本质,布局也就轻而易举. 在 ...

Promise详解，相信你看完我这篇文章简单的Promise使用方式基本上就全会了

Promise 对象

认识Promise对象

async await

谢谢观看，如需帮助请留言，

一键三连支持一下作者

Promise详解，相信你看完我这篇文章简单的Promise使用方式基本上就全会了相关推荐

最新文章

热门文章

Promise详解，相信你看完我这篇文章简单的Promise使用方式基本上就全会了

Promise 对象

认识Promise对象

async await

谢谢观看，如需帮助请留言，

一键三连 支持一下作者

Promise详解，相信你看完我这篇文章简单的Promise使用方式基本上就全会了相关推荐

最新文章

热门文章

一键三连支持一下作者