位置: IT常识 - 正文
推荐整理分享ES6 - Promise详解及用法(es6promise的理解),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:es6 promise await,es6介绍,es6 promise作用,es6 promise.all,es6 promise作用,es6 promise.all,es6 promise then,es6 promise then,内容如对您有帮助,希望把文章链接给更多的朋友!
Promise是ES6异步编程的一种解决方案(目前最先进的解决方案是async和await的搭配(ES8),但是它们是基于promise的),从语法上讲,Promise是一个对象或者说是构造函数,用来封装异步操作并可以获取其成功或失败的结果。
二、为什么要使用promise最重要也是最主要的一个场景就是ajax和axios请求。通俗来说,由于网速的不同,可能你得到返回值的时间也是不同的,但是我们下一步要执行的代码依赖于上一次请求返回值,这个时候我们就需要等待,结果出来了之后才知道怎么样继续下去。
三、promise的好处防止出现回调地狱;
提高代码的可读性;
像同步操作那样去执行异步操作
四、promise的三种状态1.pending: 等待中,或者进行中,表示还没有得到结果 2.resolved(Fulfilled): 已经完成,表示得到了我们想要的结果,可以继续往下执行 3.rejected: 也表示得到结果,但是由于结果并非我们所愿,因此拒绝执行
<script> function fn(flag) { //构造函数 return new Promise(function(resolve, reject) { if (flag === true) { resolve('promise状态为成功!') }; if (flag === false) { reject('promise状态失败!') }; }) } console.log(fn(true)); </script>五、promise的用法1.promise的实例方法
①then() 得到异步任务的正确结果
②catch() 获取异常信息 ③finally() 成功与否都会执行(尚且不是正式标准) 注意:then方法可以接受两个函数,第一个函数为promise状态为成功的回调函数,第二个函数为promise状态为失败的回调函数(可以不写,一般用catch方法捕获promise状态为失败的异常信息)
<script> let pro = new Promise((resolve, reject) => { if (Math.random() > 0.5) { resolve("i'm resolve"); } else { reject("i'm reject"); } }) pro.then((res) => { console.log(res); }).catch((err) => { console.log(err); })</script>案例
目标:拿到关于 狙击手 电影的描述
过程:
1.先登录
2.请求 导演信息 找到张导的id
3.请求 电影信息 找到描述
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script><script> // 1.登录 // let myLogin = () => new Promise() function myLogin() { return new Promise((resolve, reject) => { $.ajax({ type: 'get', url: '../json/login.json', success(res) { resolve(res); }, error(err) { reject(err); } }) }) } // 2.导演列表 function myDirector() { return new Promise((resolve, reject) => { $.ajax({ type: 'get', url: '../json/director.json', success(res) { resolve(res); }, error(err) { reject(err); } }) }) } // 3.电影信息 function myFilm(id) { return new Promise((resolve, reject) => { $.ajax({ type: 'get', url: '../json/' + id + '.json', success(res) { resolve(res); }, error(err) { reject(err); } }) }) } myLogin().then(res => { return myDirector(); }).then(res => { return myFilm(3); }).then(res => { console.log(res); }).catch(err => { console.log(err); })</script> 2.promise的对象方法(p1,p2,p3为promise的实例对象)①Promise.all() 并发处理多个异步任务,所有任务都执行完成才能得到结果
Promise.all( [p1,p2,p3] ) .then ( (result) => { consoleog (result)})②Promise.race() 并发处理多个异步任务,只要有一个任务完成就能得到结果
Promise.race ( [p1,p2,p3] ).then ( (result)=>{ console. log (result)})六、总结1.promise其实就是一个对象或者说是构造函数 2.promise的出现(es6) 就是解决异步编程和回调地狱等问题,async和await的出现(ES8)就是基于promise的一种解决异步编程的终极解决方案(简化代码等等) 3.在前端中,ajax和axios都会用到异步编程,axios更是基于promise的,所以一定要掌握 promise以及用async和await搭配promise的使用
上一篇:PyTorch学习系列教程:何为Tensor?(pytorch如何学)
友情链接: 武汉网站建设