es6中,promise使用过程的小总结
参考资料传送门:戳一戳
1、是什么
Promise是异步编程的一种解决方案,有三种状态:pending
(进行中)、fulfilled
(已成功)和rejected
(已失败);
一般成功了状态用resolved表示,失败用rejected表示。
Promise的返回值也是一个promise,会携带状态函数和函数带的参数,可进行链式操作new Promise(()=>{}).then(()=>{}).catch(()=>{});
注意:then()的返回值是新的promise,如果then执行了,catch是不会执行的,因此then可以由很多个,catch只有一个,中间有什么错误都会在catch抛出
2、为什么
为了让代码按照自己想要的执行过程进行渲染,比较多的是考虑到用ajax加载页面内容时dom元素未渲染完毕,javascript就加载完毕的,效果挂不到页面上的情况。
3、怎么做
(1)新建:2种方式
<script>
console.log(1);
const p1 = new Promise(function (resolve, reject) {
console.log(2);
}) p1.then(()=>{console.log(3);}) </script> <script>
console.log(4);
</script>
<script>
function p(){
return new Promise((resolved,rejected)=>{
if(true){
console.log(2);
resolved(6);
}else rejected(5);
});
n.then((val)=>{
//所有的都执行后再执行?!
console.log(3);
console.log(6);
})
console.log(4);
}
//p();
</script>
注意 第一个script片段的输出是1243,在then里面是输出3,这个代表浏览器会在当前脚本所有同步任务执行完才会执行then里面的回调函数,当前脚本是指同一个js文件或者同一个script标签内部。
(2)关于resolve,reject,then的使用
总结:resolve和reject的返回决定then调用哪个函数,然后可以带参数到then中
function timeout(ms) {
//new 一个promise对象,两个形参es6自动创建的,当里面的匿名函数执行成功,再调用resolve(),会执行then后面成功回调函数,失败的话是执行then后面的失败函数
return new Promise((resolve, reject) => {
setTimeout(resolve, ms, 'done');
//代码执行成功则会调用resolve()
//失败调用reject()
});
}
//调用resolve
函数和reject
函数时带有参数,那么它们的参数会被传递给回调函数。reject
函数的参数通常是Error
对象的实例,表示抛出的错误
//reject(new Error(this.statusText));
timeout(100).then(("成功后执行的回调函数") => { console.log(value);
},("失败后执行的回调函数")=>{"我是执行失败的回调函数"}});
<script>
console.log(1);
const n=new Promise((resolved,rejected)=>{
if(true){
console.log(2);
resolved(6);
}else rejected(new Error(5));
});
n.then((val)=>{
//所有的都执行后再执行?!
console.log(3);
console.log(val)
})
console.log(4);
/*结果是12436*/
</script>
(3)then与catch
总结:如果then里面有写reject,则有错误会在then阶段抛出,如果没有写,就会把错误都统一用catch抛出
//第一种
const p1=new Promise((resolve,reject)=>{
//resolve(1);
reject(0);
})
p1.then((result)=>{console.log("then_"+result)},
(result)=>{console.log("then_"+result)}) //第二种
const p1=new Promise((resolve,reject)=>{
//resolve(1);
reject(0);
})
p1.then((result)=>{console.log(result)})
.catch((result)=>{console.log("cathc_"+result)})
下面代码执行过程
***程序执行流程是
p1是第一个新建的promise对象,会立马执行,然后在3s后抛出一reject,在这个等待的过程中,p2会执行,然后在1s后抛出resolve(p1),由于p2值是另外一个p1,在2s后p2的指向是p1,p1的回调函数reject,所以执行catch的error函数,promise的返回值是一个promise对象
<script>
const p1 = new Promise(function (resolve, reject) {
setTimeout(() => reject(new Error('222')), 3000)
}) const p2 = new Promise(function (resolve, reject) {
setTimeout(() => resolve(p1), 1000)
})
//所以最终p2返回的内容promise对象是p1
p2
.then(result => console.log(result))
.catch(error => console.log("111")) </script>
(4)注意,调用resolve
或reject
并不会终结 Promise 的参数函数的执行。即使代码resolve写在最前面,也不会终止里面代码的执行,如果需要执行resolve后不执行后面的语句需要利用return来打断代码执行
(5)Promise.prototype.finally()
finally
方法用于指定不管 Promise 对象最后状态如何,都会执行的操作。
(6)promise.all()
里面可以写一个数组,如果是promise对象的数组,则如果对象全市完成all才会返回完成,只要有一个失败就会转回失败
4.小缺点
首先,无法取消Promise
,一旦新建它就会立即执行,无法中途取消。其次,如果不设置回调函数,Promise
内部抛出的错误,不会反应到外部。第三,当处于pending
状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。
es6中,promise使用过程的小总结的更多相关文章
- ES6中Promise对象个人理解
Promise是ES6原生提供的一个用来传递异步消息的对象.它减少了传统ajax金字塔回调,可以将异步操作以同步操作的流程表达出来使得代码维护和可读性方面好很多. Promise的状态: 既然是用来传 ...
- 对于ES6中Promise的个人见解
1.js中常见的异步 JavaScript可以响应用户的一些异步交互,比如单击鼠标和按键盘等操作. let button = document.getElementById("btn&quo ...
- ES6中promise的使用方法
先看看ES5中异步编程的使用. let ajax = function (callBlack) { setTimeout(function () { callBlack && call ...
- ES6中promise总结
一.什么是ES6的Promise 讲太多也没有.直接在打印出来就好,console.dir(Promise) Promise 是一个构造函数,自身有all, reject, resolve 这几个眼熟 ...
- ES6中Promise的入门(结合例子)
一.Promise的前言 解决回调地狱 //以往回调方式 函数1(function(){ //代码执行...(ajax1) 函数2(function(){ //代码执行...(ajax2) 函数3(f ...
- ES6 中 Promise
在说Promise之前我们先简单说一下什么是同步异步? 同步(Sync):所谓同步,就是发出一个功能调用时,在没有得到结果之前,该调用就不返回或继续执行后续操作. 异步(Async):异步与同步相对, ...
- ES6 中 Promise 详解
Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果.从语法上说,Promise 是一个对象,从它可以获取异步操作的消息.Promise 提供统一的 API ...
- ES6中Promise详解
Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果.从语法上说,Promise 是一个对象,从它可以获取异步操作的消息. Promise 提供统一的 AP ...
- 阿里前端测试题--关于ES6中Promise函数的理解与应用
今天做了阿里前端的笔试题目,原题目是这样的 //实现mergePromise函数,把传进去的数组顺序先后执行,//并且把返回的数据先后放到数组data中 const timeout = ms => ...
随机推荐
- Python—基本数据类型
核心数据类型: 数字(int整型.float浮点型.complex复数.bool布尔型) 字符串 str 列表(List) 元组(Tuple) 字典(Dictionary) 集合() 数字 整数,浮点 ...
- JDOJ1100: Fix
题目大意 给你n个点,其中一些点是固定的,然后还有一些没有固定的,然后问你固定所有点所用的线段的最小长度是多少. 所谓固定,就是形如三角形的情况,就是两个固定的点向一个未固定的点连两条边,就能把未固定 ...
- C++中的异常处理(上)
C++内置了异常处理的语法元素try... catch ...-try语句处理正常代码逻辑-catch语句处理异常情况-try语句中的异常由对应的catch语句处理 try { ,); } catch ...
- template might not exist or might not be accessible by any of the configured Template Resolvers at org.thymeleaf.engine.TemplateManager.resolveTemplate(TemplateManager.java:869)
org.thymeleaf.exceptions.TemplateInputException: Error resolving template [code/leading], template m ...
- SpringCloud学习笔记(三、SpringCloud Netflix Eureka)
目录: 服务发现简介 SpringCloud Netflix Eureka应用 Eureka高可用 Eureka源码分析 >>> Eureka Client初始化(客户端定时获取服务 ...
- Html学习之十九(表格与表单学习--邮箱注册页面设计)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 全网最新方法:win10下如何安装和配置64位JDK-13
1.下载JDK-13 下载链接:https://www.oracle.com/technetwork/java/javase/downloads/index.html 2.安装JDK-13 双击下图的 ...
- 第十 构建Web内容的技术
第十章 构建Web内容的技术 一.HTML HTML(HyperText Markup Language,超文本标记语言)是为了发送Web 上的超文本(Hypertext)而开发的标记语言.超文本是一 ...
- 为了Runtime Broke 关了一堆东西
可是,好像还是不行啊?CPU还是用了 10-20% 还得写这个随笔,怕自己关东西关多了,以后还得回复. https://www.drivereasy.com/knowledge/runtime-bro ...
- Vue v-if,v-else-if,v-else的使用
v-else-if 要紧跟 v-if v-else要紧跟v-else-if 或 v-if 代码: <!doctype html> <html lang="en"& ...