一、什么是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. C++模板编程中只特化模板类的一个成员函数(花样特化一个成员函数)

    转自:https://www.cnblogs.com/zhoug2020/p/6581477.html 模板编程中如果要特化或偏特化(局部特化)一个类模板,需要特化该类模板的所有成员函数.类模板中大多 ...

  2. IntelliJ IDEA悬停鼠标显示方法详细信息

    1.如果View -> Toolbar勾选情况下, 直接点击按钮打开设置, 或是直接点击File -> Settings(或是快捷键)打开设置窗口. 2.搜索栏中输入Show quick ...

  3. h2的时间类型和函数

    H2时间类型: (时间)TIME: 格式为 hh:mm:ss.对应到Java类型:java.sql.Time. (日期)DATE: 格式为 yyyy-MM-dd.对应到Java类型: java.sql ...

  4. 修改jar包内容并打包上传到私服

    第一步:拉下git分支中代码,进行修改,修改后commit——>push 第二步:在IDEA中Terminal中执行命令进行打包到本地mvn clean package 第三步:上传到私服,方法 ...

  5. 查看Oracle中是否有锁表

    转: 查看Oracle中是否有锁表 2018-04-23 17:59 alapha 阅读(19450) 评论(0) 编辑 收藏 一.用dba用户登录,或者将用户赋权为DBA用户 命令: su - or ...

  6. 全面系统Python3入门+进阶-1-2 Python的特性

    结束

  7. Qt widget中使用QML自定义电池

    1.效果 2.QML 在资源里新建Mybattery.qml: import QtQuick 2.0 import QtQuick 2.12 Item { id: root property colo ...

  8. 安卓 android studio 报错 Lint found fatal errors while assembling a release target

    报错截图如下: 解决方法:在app的build.gradle中添加如下代码 android{ lintOptions { checkReleaseBuilds false abortOnError f ...

  9. 【429】关于ADT的访问权限

    在看老师代码的时候,发现ADT中的 struct 有时候写到了 adt.c 里面,有时候写到了 adt.h 里面,其实有些困惑,经过仔细研究,发现写在 adt.h 中的 struct 可以在 test ...

  10. 123457123456#1#----com.tym.DishuGame78--前拼后广--宝宝打地鼠_tym

    com.tym.DishuGame78--前拼后广--宝宝打地鼠_tym