【es6】promise
一、什么是promise?我们用promise解决什么样的问题
promise是异步编程的一种解决方案:从语法上来说,Promise是一个对象,从他可以获取异步操作的信息;从本意上讲,它是承诺,它承诺过一段时间会给你一个答复。Promise有三种状态:pending(等待态)、fulfiled(成功态),rejected(失败态);状态一旦改变,就不会再变。创造promise实例后,它会立即执行。
Promise常常用来解决两个问题:
- 回调地狱,代码难以维护, 常常第一个的函数的输出是第二个函数的输入这种现象
- promise可以支持多个并发的请求,获取并发请求中的数据
- 这个promise可以解决异步的问题,本身不能说promise是异步的
二、Promise 用法大全
1、基础用法
let p = new Promise( (resolve, reject) => {
console.log('我刚刚进来')
setTimeout(() => {
console.log('执行成功');
resolve('我是成功');
reject('我是失败');
}, );
console.log('我在函数的末尾')
}); p.then( (data) => {
console.log(data)
}) // 执行结果
// 我刚刚进来
// 我在函数的末尾
// 执行成功
// 我是成功
- resolve :异步操作执行成功后的回调函数
- reject:异步操作执行失败后的回调函数
2、链式编程
p.then( (data) => {
console.log(data);
return '我是第一个then'
})
.then( (data) => {
console.log(data);
return () => {
console.log('我是第二个then的方法')
}
})
.then( (fun) => {
fun();
})
所以,从表面上看,Promise只是能够简化层层回调的写法,而实质上,Promise的精髓是“状态”,用维护状态、传递状态的方式来使得回调函数能够及时调用,它比传递callback函数要简单、灵活的多。所以使用Promise的正确场景是这样的:
3、reject的用法(失败状态)
let p2 = new Promise( (resolve, reject) => {
setTimeout(() => {
let num = Math.ceil(Math.random() * 10);
if (num > 5 ) {
resolve(`${num}大于5,成功了`)
} else {
reject(`${num}小于5,失败了`)
}
}, 2000)
}); p2.then((data) => {
console.log('resolve', data)
}, (err) => {
console.log('reject', err)
});
// 执行结果
// reject 1小于5,失败了
// resolve 8大于5,成功了
用来处理失败的情况
4、catch的用法
我们知道Promise对象除了then方法,还有一个catch方法,它是做什么用的呢?其实它和then的第二个参数一样,用来指定reject的回调。用法是这样:
p.then((data) => {
console.log('resolved',data);
console.log(err); //此处的err未定义
})
.catch((err) => {
console.log('rejected',err);
});
catch在Promise中的任何一步出现异常都不会卡死js的运行,而是会进入到这个catch中。catch类似于 try - catch;
5.all 的用法
let Promise1 = new Promise(function(resolve, reject){
setTimeout(() => {
let num = Math.ceil(Math.random() * 10);
if (1) {
resolve(`${num}大于5,Promise1成功了`)
} else {
reject(`${num}小于5,Promise1失败了`)
}
}, 2100)
})
let Promise2 = new Promise(function(resolve, reject){
setTimeout(() => {
let num = Math.ceil(Math.random() * 10);
if (1 ) {
resolve(`${num}大于5,Promise2成功了`)
} else {
reject(`${num}小于5,Promise2失败了`)
}
}, 2200)
})
let Promise3 = new Promise(function(resolve, reject){
setTimeout(() => {
let num = Math.ceil(Math.random() * 10);
if (1 ) {
resolve({'ccc': `${num}大于5,Promise3成功了`})
} else {
reject(`${num}小于5,Promise3失败了`)
}
}, 2300)
}) let pall = Promise.all([Promise1, Promise2, Promise3]) pall.then((data) => {
console.log(data, '成功')
}, (err) =>{
console.log(err, '失败')
})
// 执行结果
// [ '4大于5,Promise1成功了',
// '8大于5,Promise2成功了',
// { ccc: '9大于5,Promise3成功了' } ] '成功'
all方法: 谁跑的慢,就以谁为执行准执行回调。all接收一个数组参数,里面的值最终都返回到Promise对象中。
有了all方法,就可以一次执行多个异步操作,并且可以统一处理返回结果。例:在打开一个页面是可以统一加载一些配置信息,比如下拉框选项等资源。
6、race用法
let p2 = new Promise( (resolve, reject) => {
setTimeout(() => {
let num = Math.ceil(Math.random() * 10);
if (num > 5 ) {
resolve(`${num}大于5,成功了`)
} else {
reject(`${num}小于5,失败了`)
}
}, 5000)
});
let Promise3 = new Promise(function(resolve, reject){
setTimeout(() => {
let num = Math.ceil(Math.random() * 10);
if (1 ) {
resolve({'ccc': `我执行的快,就我了`})
} else {
reject(`${num}小于5,Promise3失败了`)
}
}, 2300)
})
Promise.race([p2, Promise3]).then((data) =>{
console.log(data);
}).catch((err) => {
console.log(err);
});
// { ccc: '我执行的快,就我了' }
reac用来处理加载超时的情况。
【es6】promise的更多相关文章
- 【ES6 】Promise
Promise对象定义: 用来处理异步编程 Promise对象的特点 对象的状态不受外界影响 一旦状态改变,就不会再变,任何时候都可以得到这个结果 Promise对象的状态 pending(进行中) ...
- 【ES6】 Promise / await / async的使用
为什么需要在项目中引入promise? 项目起因:我们在页面中经常需要多次调用接口,而且接口必须是按顺序串联调用 (即A接口调用完毕,返回数据后,再调用B接口) 这样就会造成多次回调,代码长得丑,而且 ...
- 【ES6】更易于继承的类语法
和其它面向对象编程语言一样,ES6 正式定义了 class 类以及 extend 继承语法糖,并且支持静态.派生.抽象.迭代.单例等,而且根据 ES6 的新特性衍生出很多有趣的用法. 一.类的基本定义 ...
- 【ES6】改变 JS 内置行为的代理与反射
代理(Proxy)可以拦截并改变 JS 引擎的底层操作,如数据读取.属性定义.函数构造等一系列操作.ES6 通过对这些底层内置对象的代理陷阱和反射函数,让开发者能进一步接近 JS 引擎的能力. 一.代 ...
- 【ES6】迭代器与可迭代对象
ES6 新的数组方法.集合.for-of 循环.展开运算符(...)甚至异步编程都依赖于迭代器(Iterator )实现.本文会详解 ES6 的迭代器与生成器,并进一步挖掘可迭代对象的内部原理与使用方 ...
- 【javascript】Promise/A+ 规范简单实现 异步流程控制思想
——基于es6:Promise/A+ 规范简单实现 异步流程控制思想 前言: nodejs强大的异步处理能力使得它在服务器端大放异彩,基于它的应用不断的增加,但是异步随之带来的嵌套.难以理解的代码让 ...
- 【ES6】数组的扩展——扩展运算符
1.扩展运算符[三个点(...)将一个数组转为用逗号分隔的参数序列] 作用:用于函数调用 function add(x, y) { return x + y; } const numbers = [2 ...
- 【ES6】Generator+Promise异步编程
一.概念 首先我们要理解Generator和Promise的概念. Generator:意思是生成器,可以在函数内部通过yeild来控制语句的执行或暂停状态. *Foo(){ yeild consol ...
- 【es6】js原生的promise
JavaScript 是单线程的,这意味着任何两句代码都不能同时运行,它们得一个接一个来.在浏览器中,JavaScript 和其他任务共享一个线程,不同的浏览器略有差异,但大体上这些和 JavaScr ...
随机推荐
- C++模板编程中只特化模板类的一个成员函数(花样特化一个成员函数)
转自:https://www.cnblogs.com/zhoug2020/p/6581477.html 模板编程中如果要特化或偏特化(局部特化)一个类模板,需要特化该类模板的所有成员函数.类模板中大多 ...
- IntelliJ IDEA悬停鼠标显示方法详细信息
1.如果View -> Toolbar勾选情况下, 直接点击按钮打开设置, 或是直接点击File -> Settings(或是快捷键)打开设置窗口. 2.搜索栏中输入Show quick ...
- h2的时间类型和函数
H2时间类型: (时间)TIME: 格式为 hh:mm:ss.对应到Java类型:java.sql.Time. (日期)DATE: 格式为 yyyy-MM-dd.对应到Java类型: java.sql ...
- 修改jar包内容并打包上传到私服
第一步:拉下git分支中代码,进行修改,修改后commit——>push 第二步:在IDEA中Terminal中执行命令进行打包到本地mvn clean package 第三步:上传到私服,方法 ...
- 查看Oracle中是否有锁表
转: 查看Oracle中是否有锁表 2018-04-23 17:59 alapha 阅读(19450) 评论(0) 编辑 收藏 一.用dba用户登录,或者将用户赋权为DBA用户 命令: su - or ...
- 全面系统Python3入门+进阶-1-2 Python的特性
结束
- Qt widget中使用QML自定义电池
1.效果 2.QML 在资源里新建Mybattery.qml: import QtQuick 2.0 import QtQuick 2.12 Item { id: root property colo ...
- 安卓 android studio 报错 Lint found fatal errors while assembling a release target
报错截图如下: 解决方法:在app的build.gradle中添加如下代码 android{ lintOptions { checkReleaseBuilds false abortOnError f ...
- 【429】关于ADT的访问权限
在看老师代码的时候,发现ADT中的 struct 有时候写到了 adt.c 里面,有时候写到了 adt.h 里面,其实有些困惑,经过仔细研究,发现写在 adt.h 中的 struct 可以在 test ...
- 123457123456#1#----com.tym.DishuGame78--前拼后广--宝宝打地鼠_tym
com.tym.DishuGame78--前拼后广--宝宝打地鼠_tym