ES6中promise的使用

ES6中promise的使用

本文目录

    • ES6中promise的使用
      • 基础介绍
        • 箭头函数
        • function函数
        • 状态
      • 原型方法
        • Promise.prototype.then()
        • Promise.prototype.catch()
      • 静态方法
        • Promise.all()
        • Promise.race()
        • Promise.any()
      • 链式回调

基础介绍

官网：https://promisesaplus.com/

window.Promise

箭头函数

let p1 = new Promise((resolved, rejected) => {console.log("p1 Promise");
})
console.log(p1);

function函数

let p2 = new Promise(function (resolve, reject) {console.log("p2 Promise");
});
console.log(p2);

new Promise函数是同步函数，是立即执行的

状态

promise共有三种状态：pending / fulfilled / rejected

状态转换

  • pending -> fulfilled：成功状态
  • pending -> rejected：失败状态
let p = new Promise((resolved, rejected) => {console.log("p Promise");// resolved()// rejected()
})
console.log(p);

  • 竞争

原型方法

Promise.prototype.then()

  • then方法接收两个参数，一个是成功时的回调函数，一个是失败时的回调函数

    let p = new Promise(function (resolve, reject) {// 将状态修改为成功resolve("BNTang");// 将状态修改为失败// reject("BNTang");
});

    指针函数

    p.then((val) => {console.log("val = " + val);},(err) => {console.log("err = " + err);}
)

    function函数

    p.then(function(val){console.log("val = " + val);},function(err){console.log("err = " + err);}
)

    function函数2

    function success(data) {console.log("成功", data);
}function error(data) {console.log("失败", data);
}promise.then(success, error);

  • Promise需要有返回值，在PromiseResult中可以查看

  • 如果new Promise中没有回调；则then里的函数不会执行

    let p = new Promise((res,rej)=>{
})p.then(val=>{console.log(11); // 11不输出
})

  • then获取返回值，成功则进入第一个函数，失败进入第二个函数

    function f() {return "ghn"
}let p = new Promise((resolved, rejected) => {// resolved(f())rejected(f())
})p.then((val) => {console.log("val = " + val);},(err) => {console.log("err = " + err);}
)
console.log(p）

  • then也会返回一个新的Promise对象，这个新Promise的状态取决于回调函数的执行情况，默认是undefined

    let p = new Promise((res, rej) => {res(11)
})let p1 = p.then((val) => {console.log("val1= " + val);return { name: 'ghn' }}, (err) => {console.log("err1 = " + err);}
)p1.then(value => {console.log("p1-then = " + JSON.stringify(value));
})console.log(p);
console.log(p1);

  • then中抛出异常或返回失败，第二个then的promise实例状态是根据p.then的返回值决定的

    let p = new Promise((res, rej) => {res(11)
})let p1 = p.then((val) => {console.log("val1= " + val);// return { name: 'ghn' }return new Promise((resolved,   rejected) => {rejected(2)})// throw new Error("my error")}, (err) => {console.log("err1 = " + err);}
)p1.then((val) => {console.log("p1-then = " + JSON.stringify(val));
},(err) => {console.log("p1-then-err = " + JSON.stringify(err));
})
console.log(p);
console.log(p1);

Promise.prototype.catch()

  • 基础使用

    p.then((data) => {console.log('resolved',data);},(err) => {console.log('rejected',err);}
); p.then((data) => {console.log('resolved',data);
}).catch((err) => {console.log('rejected',err);
});

  • 使用catch捕获异常

    let p = new Promise((res, rej) => {res(11)
})let p1 = p.then((val) => {console.log("val1= " + val);// return { name: 'ghn' }// return new Promise((resolved, rejected) => {//   rejected(2)// })throw new Error("my error")}, (err) => {console.log("err1 = " + err);}
).catch(err => {console.log("catch = " + err.message);// 根据错误类型判断是否继续抛出if (err instanceof Error) {// 如果错误是使用 new Error() 创建的，则不再继续传递return;}// 如果错误是其他类型，如Promise的reject方法传递的值，则继续抛出throw err;
})p1.then((val) => {console.log("p1-then = " + JSON.stringify(val));
},(err) => {console.log("p1-then-err = " + JSON.stringify(err));
})
console.log(p);
console.log(p1);

静态方法

Promise.all()

Promise.all() 方法是 && 的关系；Promise.any() 方法是 || 的关系； Promise.race()方法是 赛跑机制

var p = Promise.all([p1, p2, p3]);
  • 只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数
let p1 =new Promise(function(resolve,reject){resolve(1);
});
let p2 = new Promise(function(resolve,reject){resolve(2);
});
let p3 = new Promise(function(resolve,reject){resolve(3);
});Promise.all([p1, p2, p3]).then(function (results) {console.log('success:'+results);
}).catch(function(r){console.log("error");console.log(r);
});
  • 只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数
let p1 =new Promise(function(resolve,reject){resolve(1);
});
let p2 = new Promise(function(resolve,reject){resolve(2);
});
let p3 = new Promise(function(resolve,reject){reject(3);
});Promise.all([p1, p2, p3]).then(function (results) {console.log('success:'+results);
}).catch(function(r){console.log("error");console.log(r);
});
  • Promise.all() 方法提供了并行执行异步操作的能力，在 all 中所有异步操作结束后才执行回调
function p1() {var promise1 = new Promise(function (resolve, reject) {console.log("p1的第一条输出语句");resolve("p1完成");});return promise1;
}function p2() {var promise2 = new Promise(function (resolve, reject) {console.log("p2的第一条输出语句");setTimeout(() => {console.log("p2的第二条输出语句");resolve("p2完成");}, 2000);});return promise2;
}function p3() {var promise3 = new Promise(function (resolve, reject) {console.log("p3的第一条输出语句");resolve("p3完成");});return promise3;
}Promise.all([p1(), p2(), p3()]).then(function (data) {console.log(data);
});
  • Promise.all()获得的成功结果的数组里面的数据顺序和接收到的数组顺序是一致的，即p1的结果在前，即便p1的结果获取的比p2要晚
// 在前端开发请求数据的过程中，会遇到发送多个请求并根据请求顺序获取和使用数据的场景
let wake = (time) => {return new Promise((resolve, reject) => {setTimeout(() => {resolve(`${time / 1000}秒后醒来`)}, time)})
}let p1 = wake(3000)
let p2 = wake(2000)Promise.all([p1, p2]).then((result) => {console.log(result)       // [ '3秒后醒来', '2秒后醒来' ]
}).catch((error) => {console.log(error)
})

Promise.race()

  • Promise.race([p1, p2, p3])里面的结果哪个获取的快，就返回哪个结果，不管结果本身是成功还是失败
let p1 =new Promise(function(resolve,reject){resolve(1);
});
let p2 = new Promise(function(resolve,reject){resolve(2);
});
let p3 = new Promise(function(resolve,reject){resolve(3);
});Promise.race([p1, p2, p3]).then(function (results) {console.log('success:'+results);
}).catch(function(r){console.log("error");console.log(r);
});
  • 使用场景：几个服务器的好几个接口都提供同样的服务，不知道哪个接口更快，可以使用Promise.race
let p1 = new Promise(function(resolve,reject){setTimeout(() => {resolve(1);}, 1000);
});
let p2 = new Promise(function(resolve,reject){reject(2);
});
let p3 = new Promise(function(resolve,reject){resolve(3);
});Promise.race([p1, p2, p3]).then(function (results) {console.log('success:'+results);
}).catch(function(r){console.log("error");console.log(r);
});

Promise.any()

  • 只要p1，p2状态有一个变为fulfilled，该实例的状态为fulfilled
const pErr = new Promise((resolve, reject) => {reject("总是失败");
});const pSlow = new Promise((resolve, reject) => {setTimeout(resolve, 500, "最终完成");
});const pFast = new Promise((resolve, reject) => {setTimeout(resolve, 100, "很快完成");
});Promise.any([pErr, pSlow, pFast]).then((value) => {console.log(value);
},(err) => {console.log(err);
}).catch((aggregateError) => {console.log("error");console.log(aggregateError);
});
// expected output: "很快完成"
  • 如果所有的 Promises 都失败，该实例的状态将失败（rejected），结果值是包含所有失败状态的 AggregateError 的实例的结果集
const pErr = new Promise((resolve, reject) => {reject("总是失败");
});const pSlow = new Promise((resolve, reject) => {setTimeout(reject, 500, "最终失败");
});const pFast = new Promise((resolve, reject) => {setTimeout(reject, 100, "很快失败");
});Promise.any([pErr, pSlow, pFast]).then((value) => {console.log(value);
}).catch((aggregateError) => {console.log(aggregateError.errors);
});

链式回调

https://segmentfault.com/a/1190000010420744

then回调：then方法提供一个供自定义的回调函数

  1. 若传入非函数，则会忽略当前then方法
  2. 回调函数中会把上一个then中返回的值当做参数值供当前then方法调用
  3. then方法执行完毕后需要返回一个新的值给下一个then调用（没有返回值默认使用undefined）
  4. 每个then只可能使用前一个then的返回值
  • val接收到的是上一个then或者Promise的结果
  • res是被返回并传递给下一个then作为它的参数
let p = new Promise((resolved, rejected) => {resolved(1)
})let p1 = p.then((val) => {console.log(val)let res = "child";return res;}
)p1.then((val) => {console.log(val)}
)// 1
// child

具体使用1：then是否是函数

let func = function() {return new Promise((resolve, reject) => {resolve('返回值');});
};let cb = function() {return '新的值';
}

// 有返回值
func().then(function () {return cb();
}).then(resp => {console.warn(resp);console.warn('1 =========<');
});

// 无返回值
func().then(function () {cb();
}).then(resp => {console.warn(resp);console.warn('2 =========<');
});

// cb()执行后返回的并不是一个函数
// 在Promise规范中会自动忽略调当前then
// 会把func中的返回值供下一个then使用
func().then(cb()).then(resp => {console.warn(resp);console.warn('3 =========<');
});

// 第一个方法在回调内部返回cb执行后的值
// 第四个方法则直接把cb当做回调
func().then(cb).then(resp => {console.warn(resp);console.warn('4 =========<');
});

具体使用2：reject和catch

  • reject后的东西，一定会进入then中的第二个回调，如果then中没有写第二个回调，则进入catch
  • resolve的东西，一定会进入then的第一个回调，肯定不会进入catch
  • 仅仅返回一个Error对象并不会使Promise变为rejected状态
  • 为了真正拒绝一个Promise，需要throw一个错误或调用reject()函数
new Promise((resolve, reject) => {resolve('请求成功了');
})
.then((value) => {console.log(value);return new Error('错误');
})
.catch(() => {console.log('错误'); //未打印，发生穿透
})
.then((value) => {console.log(111);
})
.then((value) => {console.log(222);
})
  • 除非catch()再次抛出错误，否则链中之后的任何then()块都将按正常顺序执行，因为catch()会把Promise的状态从rejected转变为fulfilled
new Promise((resolve, reject) => {resolve('请求成功了');
})
.then((value) => {console.log(value);throw new Error('错误');
})
.catch(() => {console.log('错误');
})
.then((value) => {console.log(111);
})
.then((value) => {console.log(222);
})

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/54081.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

最新docker多系统安装技术

最新docker多系统安装技术

在Ubuntu操作系统中安装Docker 在Ubuntu操作系统中安装Docker的步骤如下。 1&#xff0e;卸载旧版本Docker 卸载旧版本Docker的命令如下&#xff1a; $ sudo apt-get remove docker docker-engine docker.io 2&#xff0e;使用脚本自动安装 在测试或开发环境中&#xff0…
阅读更多...
STM32 进不了main 函数

STM32 进不了main 函数

1. 我用的是STM32L151C8T6 的芯片&#xff0c;在github 上找了个别人的例程&#xff0c;拿来当模板改&#xff0c;由于他用的是HSE 外部晶振&#xff0c;我用的是内部晶振HSI&#xff0c;所以需要改系统时钟&#xff0c;改完后debug&#xff0c; 一直进不了main 函数&#xff0…
阅读更多...
PHP“牵手”拼多多商品详情数据获取方法，拼多多API接口批量获取拼多多商品详情数据说明

PHP“牵手”拼多多商品详情数据获取方法，拼多多API接口批量获取拼多多商品详情数据说明

拼多多商品详情接口 API 是开放平台提供的一种 API 接口&#xff0c;它可以帮助开发者获取拼多多商品的详细信息&#xff0c;包括商品的标题、描述、图片等信息。在拼多多电商平台的开发中&#xff0c;拼多多详情接口 API 是非常常用的 API&#xff0c;因此本文将详细介绍拼多多…
阅读更多...
【C++】C++ 引用详解 ⑤ ( 函数 “ 引用类型返回值 “ 当左值被赋值 )

【C++】C++ 引用详解 ⑤ ( 函数 “ 引用类型返回值 “ 当左值被赋值 )

文章目录 一、函数返回值不能是 " 局部变量 " 的引用或指针1、函数返回值常用用法2、分析函数 " 普通返回值 " 做左值的情况3、分析函数 " 引用返回值 " 做左值的情况 函数返回值 能作为 左值 , 是很重要的概念 , 这是实现 " 链式编程 &quo…
阅读更多...
淘宝API技术解析，实现关键词搜索淘宝商品（商品详情接口等）

淘宝API技术解析，实现关键词搜索淘宝商品（商品详情接口等）

淘宝提供了开放平台接口&#xff08;API&#xff09;来实现按图搜索淘宝商品的功能。您可以通过以下步骤来实现&#xff1a; 获取开放平台的访问权限&#xff1a;首先&#xff0c;您需要在淘宝开放平台创建一个应用&#xff0c;获取访问淘宝API的权限。具体的申请步骤和要求可以…
阅读更多...
LabVIEW开发灭火器机器人

LabVIEW开发灭火器机器人

LabVIEW开发灭火器机器人 如今&#xff0c;自主机器人在行业中有着巨大的需求。这是因为它们根据不同情况的适应性。由于消防员很难进入高风险区域&#xff0c;自主机器人出现了。该机器人具有自行检测火灾的能力&#xff0c;并通过自己的决定穿越路径。 由于消防安全是主要问…
阅读更多...
java八股文面试[java基础]——如何实现不可变的类

java八股文面试[java基础]——如何实现不可变的类

知识来源&#xff1a; 【23版面试突击】如何实现不可变的类&#xff1f;_哔哩哔哩_bilibili 【2023年面试】怎样声明一个类不会被继承&#xff0c;什么场景下会用_哔哩哔哩_bilibili
阅读更多...
JVM 之字节码（.class）文件

JVM 之字节码（.class）文件

本文中的内容参考B站尚硅谷宋红康JVM全套教程 你将获得&#xff1a; 1、掌握字节码文件的结构 2、掌握Java源代码如何在JVM中执行 3、掌握一些虚拟机指令 4、回答一些面试题 课程介绍 通过几个面试题初始字节码文件为什么学习class字节码文件什么是class字节码文件分析c…
阅读更多...
2022年03月 C/C++（四级）真题解析#中国电子学会#全国青少年软件编程等级考试

2022年03月 C/C++（四级）真题解析#中国电子学会#全国青少年软件编程等级考试

第1题&#xff1a;拦截导弹 某国为了防御敌国的导弹袭击&#xff0c; 发展出一种导弹拦截系统。 但是这种导弹拦截系统有一个缺陷&#xff1a; 虽然它的第一发炮弹能够到达任意的高度&#xff0c;但是以后每一发炮弹都不能高于前一发的高度。 某天&#xff0c; 雷达捕捉到敌国的…
阅读更多...
Vue3.0极速入门- 目录和文件说明

Vue3.0极速入门- 目录和文件说明

目录结构 以下文件均为npm create helloworld自动生成的文件目录结构 目录截图 目录说明 目录/文件说明node_modulesnpm 加载的项目依赖模块src这里是我们要开发的目录&#xff0c;基本上要做的事情都在这个目录里assets放置一些图片&#xff0c;如logo等。componentsvue组件…
阅读更多...
SFM structure from motion

SFM structure from motion

struction就是空间三维点的位置 motion 就是相机每帧的位移 https://www.youtube.com/watch?vUhkb8Zq-dnM&listPL2zRqk16wsdoYzrWStffqBAoUY8XdvatV&index9
阅读更多...
西部AI小镇-构建自主虚拟世界

西部AI小镇-构建自主虚拟世界

背景 未来曜文有接入市场上所有面向chatGPT开发的应用&#xff0c;例如开源聊天组件&#xff0c;西部小镇等 内容介绍 生成代理起床&#xff0c;做早餐&#xff0c;然后去上班&#xff1b;艺术家作画&#xff0c;作家写作&#xff1b;他们形成意见、互相关注并发起对话&…
阅读更多...
Linux线程 --- 生产者消费者模型（C语言）

Linux线程 --- 生产者消费者模型（C语言）

在学习完线程相关的概念之后&#xff0c;本节来认识一下Linux多线程相关的一个重要模型----“ 生产者消费者模型” 本文参考&#xff1a; Linux多线程生产者与消费者_红娃子的博客-CSDN博客 Linux多线程——生产者消费者模型_linux多线程生产者与消费者_两片空白的博客-CSDN博客…
阅读更多...
基于Java+SpringBoot+Vue前后端分离党员教育和管理系统设计和实现

基于Java+SpringBoot+Vue前后端分离党员教育和管理系统设计和实现

博主介绍&#xff1a;✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…
阅读更多...
ServiceManager接收APP的跨进程Binder通信流程分析

ServiceManager接收APP的跨进程Binder通信流程分析

现在一起来分析Server端接收&#xff08;来自APP端&#xff09;Binder数据的整个过程&#xff0c;还是以ServiceManager这个Server为例进行分析,这是一个至下而上的分析过程。 在分析之前先思考ServiceManager是什么&#xff1f;它其实是一个独立的进程&#xff0c;由init解析i…
阅读更多...
银河麒麟服务器、centos7服务器一键卸载mysql脚本

银河麒麟服务器、centos7服务器一键卸载mysql脚本

脚本 # 查看mysql相关的rpm包写到rmsql.sh文件中 rpm -aq | grep -i mysql >rmsql.sh # 修改文件为卸载mysql的脚本文件 sed -i -e s/^/yum remove -y / rmsql.sh # 修改文本权限 chmod 777 rmsql.sh # 全盘查找mysql相关文件&#xff0c;写到my.sh脚本中 find / -name mysq…
阅读更多...
git及GitHub的使用

git及GitHub的使用

文章目录 git在本地仓库的使用github使用创建仓库https协议连接(不推荐&#xff0c;现在用起来比较麻烦)ssh连接&#xff08;推荐&#xff09;git分支操作冲突处理忽略文件 git在本地仓库的使用 1.在目标目录下右键打开git bash here 2.创建用户名和邮箱(注&#xff1a; 下载完…
阅读更多...
框架(Git基础详解及Git在idea中集成步骤)

框架(Git基础详解及Git在idea中集成步骤)

目录 基础&#xff1a; idea集成Git并添加项目到git仓库 1.idea集成git&#xff0c;集成.git.exe文件 2.初始化本地Git仓库项目 3. 将工作区代码添加到暂存区 4.将暂存区代码添加到本地仓库 5.Git本地库操作 Idea集成Gitee并提交代码到第三方库 1.setting里搜索gitee 2.添…
阅读更多...
ASEMI快恢复二极管APT80DQ60BG特点应用

ASEMI快恢复二极管APT80DQ60BG特点应用

编辑-Z APT80DQ60BG参数描述&#xff1a; 型号&#xff1a;APT80DQ60BG 最大峰值反向电压(VRRM)&#xff1a;600V 最大直流阻断电压VR(DC)&#xff1a;600V 平均整流正向电流(IF)&#xff1a;80A 非重复峰值浪涌电流(IFSM)&#xff1a;600A 工作接点温度和储存温度(TJ, …
阅读更多...
设计模式（11）观察者模式

设计模式（11）观察者模式

一、概述&#xff1a; 1、定义&#xff1a;观察者模式定义了一种一对多的依赖关系&#xff0c;让多个观察者对象同时监听某一个主题对象。这个主题对象在状态发生变化时,会通知所有观察者对象&#xff0c;使它们能够自动更新自己。 2、结构图&#xff1a; public interface S…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023