es6中的Promise

2019-10-11 admin

**Promise**是异步编程的一种解决方案,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。

promise的语法细节

ES6 规定,Promise对象是一个构造函数,用来生成Promise实例

  • Promise接收的是一个函数(回调函数)
  • 回调函数由两个参数,这个参数(reslove,reject)分别都是函数
  • new Promise生成的是一个promise实例,该实例拥有then方法
  • then方法接收两个函数,第一个函数跟reslove相关,第二个函数和reject相关,reslove执行就会触发then里的第一个函数执行,并且会把reslove接收的参数传递给then里的第一个函数
  • reslove和reject只有一个会执行
  • Promise有三种状态 pending(执行中)/resloved(异步代码成功执行)/rejected(异步代码执行失败)
let p = new Promise((reslove, reject) => {
    setTimeout(() => {
        reject('hello');
    }, 2000);
});
p.then((data) => {
    console.log(data);
}, (data) => {
    console.log('data', data);
})

如何应用promise:

  • 在promise的回调里,书写异步代码,在异步成功的时候去调用reslove,在异步失败的时候去调用reject;

promise主要用来解决异步的问题

链式调用

// Promise 回调嵌套
// move(200,0).then(()=>{
//     move(200,200).then(()=>{
//         move(0,0)
//     })
// })

Promise链式调用
move(200,0).then(()=>{
    return move(200,200);
}).then(()=>{
    return move(0,0)
})

Promise类的静态方法 all() race()

  • Promise.all接受的参数是数组,数组中的promise对象都resloved,Promise.all返回的新promise才会是resloved状态的,只要数组中有一个promise对象是rejected状态,
  • Promise.all 适用的场景是多个异步条件需要同时满足才执行后续操作的情况。
  • Promise.race()接受的参数也是个数组,数组中的promise对象存在竞争关系,比如同时向两个不同接口拿相同数据,哪个接口先返回数据,就先使用该数据做后续操作

[转载]原文链接:https://segmentfault.com/a/1190000020653660

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-77161.html

文章标题:es6中的Promise

相关文章
VuePress 快速踩坑
最近有个开源项目非常火,那就是尤小右开发的 VuePress,VuePress 可以让您非常方便的在 Markdown 文档中编写 Vue 代码,并且 VuePress 对编译后的 HTML 文件做了一些针对搜索引擎的优化。另外 VuePr...
2018-04-27
Node.js v0.11.16 开发版发布
Node.js v0.11.16 开发版发布了,改进记录包括: openssl: Upgrade to 1.0.1l npm: Upgrade to 2.3.0 url: revert support of path for url.fo...
2015-11-12
Ant design pro 开发笔记 - 表单和数据绑定
antd支持表单双向绑定,开发过程中无需通过onChange()回调函数去获取组件的值,通过 getFieldDecorator() 可以自动完成数据绑定的功能。 { getFieldDecorator('email&#x...
2018-05-25
Angular 6 正式发布,新功能详解
作者|Stephen Fluin编译|覃云今天,Angular 6.0.0 正式发布,新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。 这次更新还包括框架包(@angular/core、@angular/common、@...
2018-05-05
javascript中的switch语句
switch语句:该语句对表达求值结果和case的值进行比较。如果找到匹配,则程序执行的与该case关联的语句。break为可选参数,通常使用break阻止代码向下一个case执行。switch语句如下: switch (expressio...
2015-11-12
RxJS 6有哪些新变化?
RxJs 6于2018年4月24日正式发布,为开发人员带来了一些令人兴奋的增补和改进。Ben Lesh, rxJS核心开发成员,强调: RxJS 6在拥有更小API的同时,带来了更整洁的引入方式 提供一个npm包,该package可以处理...
2018-05-22
express不是内部或外部命令
最新express4.0版本中将命令工具分家出来了(项目地址:https://github.com/expressjs/generator) 安装一个命令工具,命令如下: npm install -g express-generator ...
2015-11-12
Javascript实现数组中的元素上下移动
交换数组可以实现元素上下移动了,这个效果我们在表格或以前排序算法中都会用到,下面来看一个JavaScript下实现交换数组元素上下移动例子 在写项目的时候,要实现一个数组记录上下移动的示例。写起来也没有没麻烦,无非是交换数组元素。最终实现代...
2017-05-02
JavaScript中的call方法和apply方法使用对比
方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象。 说明: call 方法可以用来代替另一个对象调用一个方法。c...
2017-03-29
举例详解JavaScript中Promise的使用
摘录 – Parse JavaScript SDK现在提供了支持大多数异步方法的兼容jquery的Promises模式,那么这意味着什么呢,读完下文你就了解了。 “Promises” 代表着在javascript程序里下一个伟大的范式,但是...
2017-03-25
回到顶部