es6语法中promise的使用方法
Promise是一个构造函数,它有resolve,reject,race等静态方法;它的原型(prototype)上有then,catch方法,因此只要作为Promise的实例,都可以共享并调用Promise.prototype上面的方法(then,catch)
Promise的使用语法:
new Promise(
function(resolve,reject){}
//或
(resolve, reject) => {} //es6箭头函数
);
在实例化Promise时需要传入一个函数方法作为参数,并且在Promise构造函数执行时同步执行。 //后面后称这个函数方法为fuc
var a = new Promise(function(resolve,reject){
var timeOut = setTimeout(function(){
console.log('执行操作1');
},1000);
});
1s后在控制台输出相应的结果,说明在实例化过程中,作为fuc也会执行。
函数还有两个参数resolve和reject,这两个参数也是函数方法,在fuc执行时被调用
首先我们来看看Promise的几种状态:
- pending: 初始状态,成功或失败状态。
- fulfilled: 意味着操作成功完成。
- rejected: 意味着操作失败。
当我们在fuc中调用resolve方法时,Promise的状态就变成fulfilled,即操作成功状态,当Promise状态为fullfilled状态时执行then方法里的操作,then方法里面有两个参数onfulfilled(Promise为fulfilled状态时执行) 和onrejected(Promise为rejected状态时执行),步骤如下:
实例化方法
resolve('这是数据1');
}, 1000);
});
用Promise的实例调用then方法
简单的理解就是调用resolve方法,Promise变为操作成功状态(fulfilled),执行then方法里面onfulfilled里的操作。其实then里面的函数就是我们平时所说的回调函数,只不过在这里只是把它分离出来而已
调用reject方法后,Promise状态变为rejected,即操作失败状态,此时执行then方法里面onrejected操作,上面我们提到了then方法有两个参数,一种是Promise状态为fulfilled时执行(onfullfilled),一种是Promise状态为rejected时执行(onrejected)
},function(reason){ //状态为rejected时执行
console.log(reason);
console.log('这是失败的操作');
});
catch方法
除了then方法外,Promise原型上还有另外一个叫catch的方法,catch方法其实跟then方法中的第二个参数一样,就是在Promise状态为rejected时执行,then方法捕捉到Promise的状态为rejected,就执行catch方法里面的操作
}).catch(function(reason){
console.log(reason);
console.log('这是失败的操作');
});
promise主要是为了解决js中多个异步回调难以维护和控制的问题.
es6语法中promise的使用方法的更多相关文章
- vuex+Es6语法补充-Promise
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,采用 集中式存储管理 单页面的状态管理/多页面状态管理 使用步骤: // 1.导入 import Vuex from 'vuex' // ...
- ES6语法中的class、extends与super的原理
class 首先, 在JavaScript中, class类是一种函数 class User { constructor(name) { this.name = name; } sayHi ...
- ES6中promise的使用方法
先看看ES5中异步编程的使用. let ajax = function (callBlack) { setTimeout(function () { callBlack && call ...
- 理解 ES6 语法中 yield 关键字的返回值
在 ES6 中新增了生成器函数的语法,本文解释了生成器函数内 yield 关键字的返回值. 描述 根据语法规范,yield 关键字用来暂停和继续执行一个生成器函数.当外部调用生成器的 next() 方 ...
- [js]es6语法: 字符串和数组的方法
s的方法 根据index取value: 取首尾项,arr[0], arr[arr.length-1] 根据value取index(判断是否包含子字符串): s.indexOf 栗子: 'maotai' ...
- 理解 ES6 语法中 yield* 关键字的作用
在 ES6 中新增了生成器函数的语法,本文解释了与生成器函数有关的 yield* 关键字,及其使用场景. 描述 根据语法规范,yield* 的作用是代理 yield 表达式,将需要函数本身产生(yie ...
- Razor语法中链接的一些方法
在Razor中,有HTML.ActionLink和 Url.Action来呈现链接.它们有什么区别呢.能分清了,就知道在什么情况之下使用它们了. 首先来看html.ActionLink,这个方法重载挺 ...
- es6 语法 (Promise)
{ // 基本定义 let ajax = function(callback) { console.log('执行'); //先输出 1 执行 setTimeout(function() { call ...
- es6语法中的arrow function=>
(x) => x + 相当于 function(x){ ; }; var ids = this.sels.map(item => item.id).join() var ids = thi ...
随机推荐
- 计算机网络模型和5G知识
目录 一.网络布线及信号传输 1.信号 2.传输介质 2.1双绞线 2.2光纤 2.3常见性问题 三.无线传播介质 四.综合布线系统 五.计算机的数制度以及运算 一.网络布线及信号传输 1.信号 频率 ...
- Vue-Router 详细解析学习
首先还是先创项目 然后选择vue-router 再创建 再敲代码学习前,我们先了解什么是路由? 路由有一个非常重要的概念就是路由表: 本质就是一个映射表,决定数据的指向. 我们生活中常常听到的路由器, ...
- 十进制转十六进制 BASIC-10
十进制转十六进制 import java.util.Scanner; public class 十进制转十六进制 { /* 十六进制数是在程序设计时经常要使用到的一种整数的表示方式. * 它有0,1, ...
- 用Ultraedit调试tk程序
tk没有自己的编译环境,Ultraedit中仅3步就可以打造一个tk调试环境: 1. 为UE添加tcl/tk语法高亮支持:从UE的网站上下载tcl/tk的wordfile: 2. 添加编译命令到菜单中 ...
- Block循环引用详解
前言 在项目中经常用到block,使用不当就很容易因为循环引用而造成内存泄漏.本文分析了block循环引用形成原因以及处理办法,如果有什么不对或者疑问请留言. 什么情况下block会造成循环引用 bl ...
- 深入理解HTTP请求流程
以前写过一篇博客,叫做HTTP的报文分析:https://blog.csdn.net/ZripenYe/article/details/119593269但是感觉还是不太深入.不够全面,顶多了解个大概 ...
- Java之JSTL标签与JavaBean
Java之JSTL标签与JavaBean JSP.JSTL标签及 EL表达式 <!-- jstl表达式--> <dependency> <groupId>javax ...
- Linux 并发服务器编程(多进程)
文章目录 说明 注意事项 server.c client.c 运行截图 说明 在Linux中通过流式套接字编程(TCP),实现一个并发服务器的访问回显,适合刚学完Linux套接字编程的朋友进行巩固训练 ...
- S3C2440—10.代码重定位
文章目录 一.启动方式 1.1 NAND FLASH 启动 1.2 NOR FLASH 启动 二. 段的概念 2.1 重定位数据段 2.2 加载地址的引出 三.链接脚本 3.1 链接脚本的引入 3.2 ...
- 【原创】JavaFx程序解决Jupyter Notebook导出PDF不显示中文
0.ATTENTION!!! JavaFx里是通过Java调用控制台执行的的jupyter和xelatex指令, 这些个指令需要在本地安装Jupyter和MikTeX之后才能正常在电脑上运行 1.[问 ...