一、什么是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)
}) // 执行结果

// 我刚刚进来
// 我在函数的末尾
// 执行成功
// 我是成功

 
Promise的构造函数接收一个参数:函数,并且这个函数需要传入两个参数:
  • 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的更多相关文章

  1. 【ES6 】Promise

    Promise对象定义: 用来处理异步编程 Promise对象的特点 对象的状态不受外界影响 一旦状态改变,就不会再变,任何时候都可以得到这个结果 Promise对象的状态 pending(进行中) ...

  2. 【ES6】 Promise / await / async的使用

    为什么需要在项目中引入promise? 项目起因:我们在页面中经常需要多次调用接口,而且接口必须是按顺序串联调用 (即A接口调用完毕,返回数据后,再调用B接口) 这样就会造成多次回调,代码长得丑,而且 ...

  3. 【ES6】更易于继承的类语法

    和其它面向对象编程语言一样,ES6 正式定义了 class 类以及 extend 继承语法糖,并且支持静态.派生.抽象.迭代.单例等,而且根据 ES6 的新特性衍生出很多有趣的用法. 一.类的基本定义 ...

  4. 【ES6】改变 JS 内置行为的代理与反射

    代理(Proxy)可以拦截并改变 JS 引擎的底层操作,如数据读取.属性定义.函数构造等一系列操作.ES6 通过对这些底层内置对象的代理陷阱和反射函数,让开发者能进一步接近 JS 引擎的能力. 一.代 ...

  5. 【ES6】迭代器与可迭代对象

    ES6 新的数组方法.集合.for-of 循环.展开运算符(...)甚至异步编程都依赖于迭代器(Iterator )实现.本文会详解 ES6 的迭代器与生成器,并进一步挖掘可迭代对象的内部原理与使用方 ...

  6. 【javascript】Promise/A+ 规范简单实现 异步流程控制思想

    ——基于es6:Promise/A+ 规范简单实现 异步流程控制思想  前言: nodejs强大的异步处理能力使得它在服务器端大放异彩,基于它的应用不断的增加,但是异步随之带来的嵌套.难以理解的代码让 ...

  7. 【ES6】数组的扩展——扩展运算符

    1.扩展运算符[三个点(...)将一个数组转为用逗号分隔的参数序列] 作用:用于函数调用 function add(x, y) { return x + y; } const numbers = [2 ...

  8. 【ES6】Generator+Promise异步编程

    一.概念 首先我们要理解Generator和Promise的概念. Generator:意思是生成器,可以在函数内部通过yeild来控制语句的执行或暂停状态. *Foo(){ yeild consol ...

  9. 【es6】js原生的promise

    JavaScript 是单线程的,这意味着任何两句代码都不能同时运行,它们得一个接一个来.在浏览器中,JavaScript 和其他任务共享一个线程,不同的浏览器略有差异,但大体上这些和 JavaScr ...

随机推荐

  1. chrome 等浏览器不支持本地ajax请求,的问题

    XMLHttpRequest cannot load file:///D:/WWW/angularlx/ui-router-test/template/content.html. Cross orig ...

  2. Vehicle routing with Optaplanner graph-theory

    Vehicle routing with Optaplanner - Stack Overflow https://stackoverflow.com/questions/22285252/vehic ...

  3. Windows 操作系统 快捷键

    窗口放大缩小:  + ↑↓ 最小化窗口: ALT + Esc 关闭窗口: Alt + F4 搜索功能:  + 直接输入搜索内容 打开文件管理器:  + E 在文件管理器中切换: Tab

  4. ISO/IEC 9899:2011 条款6.6——常量表达式

    6.6 常量表达式 语法 1.constant-expression conditional-expression 描述 2.一个常量表达式可以在翻译期间被计算,而不是在运行时,并且根据情况可以被用于 ...

  5. osg Error osgearth_viewerd fails with "Loaded scene graph does not contain a MapNode

    void StateSet::setGlobalDefaults() ShaderPipeline disabled.void StateSet::setGlobalDefaults() Shader ...

  6. 【设备问题】罗技M590鼠标无法连接Macbook Pro问题解决

    问题现象 罗技蓝牙鼠标连接的时候一直显示连接中,但是一直连接不上. 解决方法 长按那个切换模式的按钮,重置下,再点击连接,显示能够连接成功.

  7. 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 ...

  8. Java基础教程:垃圾回收

    Java基础教程:垃圾回收 垃圾回收 垃圾回收(Garbage Collection,GC),顾名思义是释放垃圾占用的空间,防止内存泄漏.有效的使用可以使用的内存,对内存堆中已经死亡的或者长时间没有使 ...

  9. Redis概述与基本操作

    redis教程 概述 redis是一种nosql数据库,他的数据是保存在内存中,同时redis可以定时把内存数据同步到磁盘,即可以将数据持久化,并且他比memcached支持更多的数据结构(strin ...

  10. VMware虚拟机及Linux安装

    VMware虚拟机安装指南:http://bbs.luobotou.org/thread-5750-1-1.html Linux系统各发行版镜像下载地址:http://www.linuxidc.com ...