JavaScript 标准内置对象Promise使用学习总结
Javascript标准内置对象Promise使用学习总结
by:授客 QQ：1033553122
- 1. 基础用法
var condition = true;
let p = new Promise(function(resolve, reject){ // resolve, reject为两个回调函数，分别供使用者在函数执行成功和执行失败时调用
if (condition) { // 一些执行成功、失败的判断条件，暂且使用上述变量替代
// throw "exception"; // 如果此处代码代码未注释，即抛出异常,该异常值 exception将被传递给promiseObj.then函数参数列表中第二个参数--一个回调函数
resolve("执行成功"); // 如果resolve函数被调用，其函数实参将被传递给promiseObj.then函数参数列表中第一个参数--一个回调函数
} else {
// throw "exception"; // 如果此处代码代码未注释，即抛出异常,该异常值 exception将被传递给promiseObj.then函数参数列表中第二个参数--一个回调函数
reject("执行失败"); // 如果reject函数被调用，其函数实参将被传递给promiseObj.then函数参数列表中第二个参数--一个回调函数
}
})
p.then((data) => { // then函数接收两个参数--两个函数，分别在构造Promise对象定义的匿名函数（假设为func1）执行成功和执行失败时被调用(func1函数中，resolve被调用表示匿名函数执行成功，reject被调用、或者函数于resolve，reject被执行前，抛出了异常，表示匿名函数执行失败)，第一个函数的参数接收来自resolve函数的实参，第二个函数的参数接收来自reject函数的实参、或者是函数抛出的异常值(异常优先于reject、resolve被抛出)
console.log(data);
}, (err) => {
console.log(err);
}
)
运行结果，控制台输出：
执行成功
- 2. 链式调用之.then
function testFunc(condition){
new Promise(function(resolve, reject){
if (condition) {
resolve("执行成功");
} else {
reject("执行失败");
}
}).then((data) => {
console.log(data);
return "then执行成功";
}, (err) => {
console.log(err);
return "then执行失败";
}).then(data => {//此处then函数接收两个参数--两个函数，分别在前一个then函数执行成功和执行失败时被调用。(前一个then函数参数列表中任意一个函数被调用，并且执行没抛出异常，表示执行成功，否则表示执行失败)。第一个函数的参数接收来自前一个then函数执行成功时的函数返回值，如果没有返回值则为undefined，第二个函数的参数接收来自前一个then函数执行失败时的函数返回值，如果没有返回值则为undfined，或者是then函数执行时抛出的异常值。
console.log("error:" + data);
}, err => {
console.log(err);
})
}
testFunc(true)
运行结果，控制台输出：
"执行成功"
"then执行成功"
testFunc(false)
"执行失败"
"error:then执行失败"
- 3. 链式调用之.catch
.catch将在new Promise时定义的匿名函数执行失败、.then函数执行失败，并且位于其后的then函数没有显示提供第二个参数（供失败时调用的函数）时被调用。可以简单理解为用于捕获前面发生的，且没有被任何then函数处理的错误。
例1：
function testFunc(condition){
new Promise(function(resolve, reject){
if (condition) {
resolve("执行成功");
} else {
reject("执行失败");
}
}).then(data => {
console.log(data);
}, err => {
console.log(err);
}).catch(err => {
console.log("error:" + err)
})
}
testFunc(false);
运行结果，控制台输出：
"执行失败"
例2：
function testFunc(condition){
new Promise(function(resolve, reject){
if (condition) {
resolve("执行成功");
} else {
reject("执行失败");
}
}).then((data) => {
console.log(data);
return "then执行成功";
}).then(data => {
console.log(data);
}).catch(err => {
console.log("error:" + err)
})
}
testFunc(false);
运行结果，控制台输出：
"error:执行失败"
例3：
function testFunc(condition){
new Promise(function(resolve, reject){
if (condition) {
resolve("执行成功");
} else {
reject("执行失败");
}
}).catch(err => {
console.log("error:" + err)
})
}
testFunc(false)
运行结果，控制台输出：
"error:执行失败"
- 4. Promise.all
Promise.all(iterable) 方法返回一个 Promise 实例，此实例在 iterable 参数内所有的 promise 都“完成（resolved）”或参数中不包含 promise 时回调完成（resolve）；如果参数中 promise 有一个失败（rejected），此实例回调失败（reject），失败原因的是第一个失败 promise 的结果
例：
function testFunc1(condition){
return new Promise(function(resolve, reject){
if (condition) {
resolve("testFunc1执行成功");
} else {
reject("testFunc1执行失败");
}
});
}
function testFunc2(condition){
return new Promise(function(resolve, reject){
if (condition) {
resolve("testFunc2执行成功");
} else {
reject("testFunc2执行失败");
}
});
}
let result = Promise.all([testFunc2(true), testFunc1(true)]);
result.then((data) => {
console.log(data)
}).catch(err => {
console.log(err);
})
运行结果，控制台输出如下内容：
Array ["testFunc2执行成功", "testFunc1执行成功"]
let result = Promise.all([testFunc2(false), testFunc1(true)]);
result.then((data) => {
console.log(data)
}).catch(err => {
console.log(err);
})
运行结果，控制台输出如下内容：
"testFunc2执行失败"
说明：可以利用.all的特性，以并行执行多个异步操作，并且在一个回调中处理所有的返回数据（返回数据的顺序和传入参数数组的顺序对应）
参考链接：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
JavaScript 标准内置对象Promise使用学习总结的更多相关文章
- JavaScript 标准内置对象
JavaScript 标准内置对象或称全局的对象(global objects)不要和 全局对象(global object)混淆.这里说的全局的对象是说在全局作用域里的对象,全局作用域包含了全局对象 ...
- 第一百零八节，JavaScript，内置对象，Global对象字符串编码解码，Math对象数学公式
JavaScript,内置对象,Global对象字符串编码解码,Math对象数学公式 学习要点: 1.Global对象 2.Math对象 ECMA-262对内置对象的定义是:"由ECMASc ...
- 深入浅出ES6的标准内置对象Proxy
Proxy是ES6规范定义的标准内置对象,可以对目标对象的读取.函数调用等操作进行拦截.一般来说,通过Proxy可以让目标对象"可控",比如是否能调用对象的某个方法,能否往对象添加 ...
- 一、JavaScript概述 二、JavaScript的语法 三、JavaScript的内置对象
一.JavaScript的概述###<1>JavaScript的概念 又称ECMAScript,和java没有任何关系 嵌入在HTML元素中的 被浏览器解释运行的 一种脚本语言. ###& ...
- JavaScript常用内置对象（window、document、form对象）
由于刚开始学习B/S编程,下面对各种脚本语言有一个宏观的简单认识. 脚本语言(JavaScript,Vbscript,JScript等)介于HTML和C,C++,Java,C#等编程语言之间.它的优势 ...
- JavaScript的内置对象（Global对象）
内置对象的定义 由 javaScript 实现提供的.不用自己创建,这些对象在 ECMAScript 程序执行之前就已经存在了. 意思就是说,开发人员不必显示地实例化内置对象:因为它们已经实例化了. ...
- javaScript的内置对象以及一些常用的方法
前几天,我们学习了JavaScript的入门课程,但是要想做网站,仅仅学会入门是不够的,今后的几天,我将带领大家精通JavaScript,希望大家好好学习! JS内置对象 String对象:字符串对象 ...
- javaScript的内置对象
javaScript 有11种内置对象: Array . String .Date .Math . Boolean .Number . Function .Global .Error . RegExp ...
- 【JavaScript】内置对象Math
Math是具有用于数学常数和函数的属性和方法一内置对象.不是函数对象. 描述编辑 不像其他的全局对象,Math不是一个构造函数.所有属性和方法Math都是静态的.你指的是常数pi为Math.PI你调用 ...
随机推荐
- 如何使用modelarts训练海量数据
在modelarts上使用notebook上使用evs空间默认大小是5G,能满足大部分文本和图片训练模型的需求.如果训练数据稍微超过这个限额,可以适当的扩增下空间.但如果训练对象是视频,或是实际生成过 ...
- C++fread小解
std::fread ——C++ 输入/输出库 C 风格 I/O 定义于头文件 <cstdio> std::size_t fread( void* buffer, std::size_t ...
- 基于STM32F1 的BASIC解码实验 vb basic 液晶显示执行过程及结果
基于STM32F1 的BASIC解码实验 1.basic程序以文件形式存储 2.程序文件存储在sd卡 3.解释结果显示在液晶屏上 主函数部分 int main(void){ u16 i,j; dela ...
- Django 05
目录 配置测试脚本文件 单表操作 增加数据 查询数据 修改数据 删除数据 查询十三太保 双下划线查询 连表下的数据增删改 一对多/一对一 多对多 跨表查询 基本对象的跨表查询 (子查询) 基于双下划线 ...
- 解决div用了position: fixed后滚动条显示不完整的问题
由于div运用了position:fixed,内部通讯列表设置了height:100%,然而列表设置overflow:overlay 溢出部分显示不全,且无滚动条出现,最终找出原因在于顶部header ...
- 使用 yum 安装Docker（CentOS 7下）
使用 yum 安装(CentOS 7下) Docker 要求 CentOS 系统的内核版本高于 3.10 ,查看本页面的前提条件来验证你的CentOS 版本是否支持 Docker . 通过 uname ...
- 【MySql】使用学习
[MySql]使用学习 =================================================== 1.太多的连接 Too many connections ======= ...
- servlet的三大作用域对象和jsp的九大内置对象及其四大作用域对象
servlet的三大作用域对象: request(HttpServletRequest) session(HttpSession): application(ServletContext):tomca ...
- NodeJS2-4环境&调试----global变量
global全局对象,希望把全局访问到的对象,属性和方法等挂到global对象上,除了用户自定义的方法外,global本身默认带着一些常用的属性和方法的 CommonJS Buffer.process ...
- 天天动听API
本次分析的是天天动听API,天天动听有一点比较好,就是搜索返回直接有歌曲播放的地址了,并且有无损的音频 搜索歌曲API:http://so.ard.iyyin.com/s/song_with_out? ...