【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 ...
随机推荐
- chrome 等浏览器不支持本地ajax请求,的问题
XMLHttpRequest cannot load file:///D:/WWW/angularlx/ui-router-test/template/content.html. Cross orig ...
- Vehicle routing with Optaplanner graph-theory
Vehicle routing with Optaplanner - Stack Overflow https://stackoverflow.com/questions/22285252/vehic ...
- Windows 操作系统 快捷键
窗口放大缩小: + ↑↓ 最小化窗口: ALT + Esc 关闭窗口: Alt + F4 搜索功能: + 直接输入搜索内容 打开文件管理器: + E 在文件管理器中切换: Tab
- ISO/IEC 9899:2011 条款6.6——常量表达式
6.6 常量表达式 语法 1.constant-expression conditional-expression 描述 2.一个常量表达式可以在翻译期间被计算,而不是在运行时,并且根据情况可以被用于 ...
- osg Error osgearth_viewerd fails with "Loaded scene graph does not contain a MapNode
void StateSet::setGlobalDefaults() ShaderPipeline disabled.void StateSet::setGlobalDefaults() Shader ...
- 【设备问题】罗技M590鼠标无法连接Macbook Pro问题解决
问题现象 罗技蓝牙鼠标连接的时候一直显示连接中,但是一直连接不上. 解决方法 长按那个切换模式的按钮,重置下,再点击连接,显示能够连接成功.
- linux中解决出现:^H^H^H^H
解决出现:^H^H^H^H 把stty erase ^H 添加到.bash_profile中 vim /etc/profile stty erase ^H su root source /etc/pr ...
- Java基础教程:垃圾回收
Java基础教程:垃圾回收 垃圾回收 垃圾回收(Garbage Collection,GC),顾名思义是释放垃圾占用的空间,防止内存泄漏.有效的使用可以使用的内存,对内存堆中已经死亡的或者长时间没有使 ...
- Redis概述与基本操作
redis教程 概述 redis是一种nosql数据库,他的数据是保存在内存中,同时redis可以定时把内存数据同步到磁盘,即可以将数据持久化,并且他比memcached支持更多的数据结构(strin ...
- VMware虚拟机及Linux安装
VMware虚拟机安装指南:http://bbs.luobotou.org/thread-5750-1-1.html Linux系统各发行版镜像下载地址:http://www.linuxidc.com ...