Promise的介绍及初体验

Promise的介绍及初体验

文章目录

​​Promise是什么​​​​为什么要用Promise​​​​Promise的初体验​​

​​案例一​​​​案例二：Promise对Ajax操作的封装​​

​​Promise的基本流程​​

Promise是什么

抽象表达:Promise 是一门新的技术(ES6 规范)Promise 是 JS 中进行异步编程的新解决方案备注：旧方案是单纯使用回调函数具体表达:从语法上来说: Promise 是一个构造函数从功能上来说: promise 对象用来封装一个异步操作并可以获取其成功/失败的结果值

为什么要用Promise

①指定回调函数的方式更加灵活

旧的: 必须在启动异步任务前指定promise: 启动异步任务 => 返回promie对象 => 给promise对象绑定回调函数(甚至可以在异步任务结束后指定/多个)

②支持链式调用, 可以解决回调地狱问题

什么是回调地狱?回调函数嵌套调用, 外部回调函数异步执行的结果是嵌套的回调执行的条件回调地狱的缺点?不便于阅读不便于异常处理解决方案?promise 链式调用终极解决方案?async/await

Promise的初体验

案例一

如果用原来的方式：

//生成随机数 function rand(m,n){ return Math.ceil(Math.random() * (n-m+1)) + m-1; } //获取元素对象 const btn = document.querySelector('#btn'); //绑定单击事件 btn.addEventListener('click', function(){ 定时器 setTimeout(() => { //30% 1-100 1 2 30 //获取从1 - 100的一个随机数 let n = rand(1, 100); //判断 if(n <= 30){ alert('恭喜恭喜, 奖品为 10万 RMB 劳斯莱斯优惠券'); }else{ alert('再接再厉'); } }, 1000);

如果用Promise方法来做：

//Promise 形式实现 // resolve 解决 函数类型的数据 // reject 拒绝 函数类型的数据 const p = new Promise((resolve,) => { setTimeout(() => { //30% 1-100 1 2 30 //获取从1 - 100的一个随机数 let n = rand(1, 100); //判断 if(n <= 30){ resolve(n); // 将 promise 对象的状态设置为 『成功』 }else{ reject(n); // 将 promise 对象的状态设置为 『失败』 } }, 1000); }); console.log(p); //调用 then 方法 // value 值 // reason 理由 p.then((value) => { alert('恭喜恭喜, 奖品为 10万 RMB 劳斯莱斯优惠券, 您的中奖数字为 ' + value); }, (reason) => { alert('再接再厉, 您的号码为 ' + reason); }); });

代码解释： ①promise 对象用来封装一个异步操作，所以我们把etTimeout()方法放在了其中。

②Promise实例化要接收一个函数类型的值，而且这个函数有两个形参(最好是命名为resolve,和reject)，并且resolve,和reject这两个形参也是函数类型，并且

在异步任务成功的时候调用resolve()在异步任务失败的时候调用reject()

而这两个函数的作用就是：

resolve()将Promise对象的状态变为成功reject()将Promise对象的状态变为失败

这种状态的改变，是为了去影响后面then中相应方法的回调。

③Promise对象的then方法接受两个参数，且两个参数都是函数类型的值。其中：

第一个函数是对象成功时的回调第二个函数是对象失败时的回调

④前面我们提到过promise 对象用来封装一个异步操作并可以获取其成功/失败的结果值。

我们可以将要返回的值，传给resolve()和 reject()中，然后将then方法中的两个方法传入形参(一般第一个函数的形参为value，第二个函数的形参为reason)，通过这两个形参就可以拿到结果值了。

案例二：Promise对Ajax操作的封装

Promise的基本流程

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。