一、什么是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. transition 滑动动画

    html: <!-- 组件会在 `currentTabComponent` 改变时改变 --> <transition name="slide" mode=&qu ...

  2. restful swagger api java go

    rest框架使用swagger api,接口越来越多后性能会很差,如何优化? - 知乎https://www.zhihu.com/question/59349319 golang restful 框架 ...

  3. SSH SCP 远程密钥登录配置和服务器间的文件传输

    目录 ssh ssh是什么 ssh安装 使用ssh登录远程主机 退出登录 使用ssh执行单条指令 密钥验证 详细操作 scp rsync sftp 进阶 ssh ssh是什么 ssh (Secure ...

  4. ISO/IEC 9899:2011 条款6.7.4——函数说明符

    6.7.4 函数说明符 语法 1.function-specifier: inline _Noreturn 约束 2.函数说明符应该只能被用在对一个函数标识符的声明中. 3.对一个含有外部连接函数的内 ...

  5. Python3基础 函数 参数为list可变类型时,使用append会影响到外部实参

             Python : 3.7.3          OS : Ubuntu 18.04.2 LTS         IDE : pycharm-community-2019.1.3    ...

  6. QML注意color小写

    1.用的时候大小写一样的 如: color="#3D3D3D" 和 color="#3d3d3d"都是同一个颜色 2.判断的时候,QML默认是小写 如:if(c ...

  7. Game and Application Protocol

    This privacy policy details the information collected by the team ("we" or "our" ...

  8. (转载)文献可视化--vosviewer入门

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/weixin_42613298/artic ...

  9. 【缺少kubernetes权限】 namespaces "xxx" is forbidden: User "xxx" cannot xxx resource "xxx" in API group "xxx" in the namespace "xxx"

    需要添加权限,添加权限方式: https://github.com/argoproj/argo/issues/1068

  10. 虚拟机VMWare的操作

    软件测试工程师需要搭建测试环境——虚拟机操作. VMWare Workstation虚拟机:模拟真实的环境进行各种试验和操作,启动之后,会占用一部分的系统资源. 官网安装:http://www.vmw ...