Promise初体验
Posted Icy Hunter
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Promise初体验相关的知识，希望对你有一定的参考价值。
文章目录
Promise
Promise是什么
抽象表达“
1） promise是一门新技术
2） promise是js中进行异步编程的新解决方案
具体表达
1） 从语法上来说：promise是一个构造函数
2） 从功能上来说，promise对象用来封装一个异步操作并可以获取其成功失败的结果值
为什么要用promise？
- 旧的：必须在启动异步任务前指定
- Promise：启动异步任务 => 返回promise对象 => 给promise对象绑定回调函数（甚至可以在异步任务结束后指定/多个）
支持链式调用，可以解决回调地狱问题
什么是回调地狱？
回调函数嵌套调用，外部回调函数异步执行的结果是嵌套的回调执行的条件
回调地狱的缺点？
不便于阅读
不便于异常处理
异步编程：
Fs文件操作
数据库操作
AJAX
定时器
实例
点击抽奖按钮，会有中奖结果提示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<h2 class="page-header" >Promise 初体验</h2>
<button class="btn btn-primary" id="btn">点击抽奖</button>
</div>
<script>
function rand(m, n)
return Math.ceil(Math.random() * (n-m+1)) + m-1;
// 获取元素对象
const btn = document.querySelector("#btn");
// 绑定单击事件
btn.addEventListener("click", function()
const p = new Promise((resolve, reject) =>
// 定时器
setTimeout(() =>
let n = rand(1, 100);
if(n <= 30)
resolve(n);//将promise的状态设置为成功
else
reject(n);
, 1000);
);
// 调用then方法
//一个为成功的回调
p.then((value) =>
alert("成功中奖,中奖数字为"+value)
, (reason)=>
alert("再接再励,号码为"+reason)
);
);
</script>
</body>
</html>
运行结果：
点击抽奖
以上是关于Promise初体验的主要内容，如果未能解决你的问题，请参考以下文章