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状态时执行),步骤如下:

实例化方法

var a = new Promise(function (resolve, reject) {
           var timer = setTimeout(function () {
                console.log('执行操作1');

resolve('这是数据1');

}, 1000);

});

用Promise的实例调用then方法

a.then(function (data) {
            console.log(data);
            console.log('这是成功操作');
});

简单的理解就是调用resolve方法,Promise变为操作成功状态(fulfilled),执行then方法里面onfulfilled里的操作。其实then里面的函数就是我们平时所说的回调函数,只不过在这里只是把它分离出来而已

调用reject方法后,Promise状态变为rejected,即操作失败状态,此时执行then方法里面onrejected操作,上面我们提到了then方法有两个参数,一种是Promise状态为fulfilled时执行(onfullfilled),一种是Promise状态为rejected时执行(onrejected)

p.then(function(data){//状态为fulfilled时执行
            console.log(data);
            console.log('这是成功操作');

},function(reason){ //状态为rejected时执行

console.log(reason);

console.log('这是失败的操作');

});

catch方法

除了then方法外,Promise原型上还有另外一个叫catch的方法,catch方法其实跟then方法中的第二个参数一样,就是在Promise状态为rejected时执行,then方法捕捉到Promise的状态为rejected,就执行catch方法里面的操作

p.then(function(data){
              console.log(data);
              console.log('这是成功操作');

}).catch(function(reason){

console.log(reason);

console.log('这是失败的操作');

});

promise主要是为了解决js中多个异步回调难以维护和控制的问题.

es6语法中promise的使用方法的更多相关文章

  1. vuex+Es6语法补充-Promise

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,采用 集中式存储管理 单页面的状态管理/多页面状态管理 使用步骤: // 1.导入 import Vuex from 'vuex' // ...

  2. ES6语法中的class、extends与super的原理

    class 首先, 在JavaScript中, class类是一种函数 class User {    constructor(name) { this.name = name; }    sayHi ...

  3. ES6中promise的使用方法

    先看看ES5中异步编程的使用. let ajax = function (callBlack) { setTimeout(function () { callBlack && call ...

  4. 理解 ES6 语法中 yield 关键字的返回值

    在 ES6 中新增了生成器函数的语法,本文解释了生成器函数内 yield 关键字的返回值. 描述 根据语法规范,yield 关键字用来暂停和继续执行一个生成器函数.当外部调用生成器的 next() 方 ...

  5. [js]es6语法: 字符串和数组的方法

    s的方法 根据index取value: 取首尾项,arr[0], arr[arr.length-1] 根据value取index(判断是否包含子字符串): s.indexOf 栗子: 'maotai' ...

  6. 理解 ES6 语法中 yield* 关键字的作用

    在 ES6 中新增了生成器函数的语法,本文解释了与生成器函数有关的 yield* 关键字,及其使用场景. 描述 根据语法规范,yield* 的作用是代理 yield 表达式,将需要函数本身产生(yie ...

  7. Razor语法中链接的一些方法

    在Razor中,有HTML.ActionLink和 Url.Action来呈现链接.它们有什么区别呢.能分清了,就知道在什么情况之下使用它们了. 首先来看html.ActionLink,这个方法重载挺 ...

  8. es6 语法 (Promise)

    { // 基本定义 let ajax = function(callback) { console.log('执行'); //先输出 1 执行 setTimeout(function() { call ...

  9. es6语法中的arrow function=>

    (x) => x + 相当于 function(x){ ; }; var ids = this.sels.map(item => item.id).join() var ids = thi ...

随机推荐

  1. oracle控制用户权限命令

    ORACLE控制用户权限: 首先使用系统中的拥有DBA权限的账号(system)登录: 一.创建用户: 1.DBA使用creater user语句创建用户: --创建登录用户名为:user01,密码为 ...

  2. 缩减Azure上Linux虚拟机系统盘容量

    [话在前头] 这么些年微软 Azure 创建虚拟机一直不能修改系统盘大小,但很多时候实际又用不了这么大的操作系统磁盘.微软自己甚至还针对 Windows 服务器镜像推出一个 smalldisk 的镜像 ...

  3. C++ //多态案例 -计算器类(普通写法 和 多态写法) //利用多态实现计算器 //多态好处: //1.组织结构清晰 //2.可读性强 //3.对于前期和后期扩展以及维护性高

    1 //多态案例 -计算器类(普通写法 和 多态写法) 2 3 #include <iostream> 4 #include <string> 5 using namespac ...

  4. Flutter 中的动画

    Flutter 中动画的创建有很多种, 需要根据具体的需求选择不同的动画.如果只是简单的布局等的动画直接使用最简单的隐式动画就可以了,因为隐式动画是由框架控制的,所以仅仅只需要更改变需要变化属性就可以 ...

  5. UNIX环境高级编程APUE练习3.2-不用fcntl实现dup2的功能

    1 题面 编写与dup2功能相同的函数,要求不调用fcntl函数,并且要有正确的出错处理. 2 基本思路 不能用fcntl,能够返回一个文件描述符的只有open和dup.而open会创建一个新的文件表 ...

  6. 【大咖直播】Elastic Security 安全管理实战工作坊

    本次实战课程,旨在用 Elastic Security 来武装每一位安全运维人员,从容预防.检测和应对网络威胁.这款免费开放的解决方案提供了 SIEM.端点安全.威胁狩猎.云监控.恶意软件保护等功能. ...

  7. 51单片机—LCD1602显示模块

    文章目录 - 什么是LCD1602 - 如何操作LCD1602 - 上代码 - 什么是LCD1602 LCD:Liquid Crystal Display-液晶显示器,简称LCD,其主要显示原理是以电 ...

  8. kvm虚拟化的qcow2磁盘格式的扩容方法

    第一种:增加一块磁盘而另磁盘空间增大 1).先进入kvm环境,创建一块硬盘:qemu-img create -f qcow2 /home/tianke/test.qcow2 40G 2).再给增加的硬 ...

  9. HBuilder mui 手机app开发 Android手机app开发 ios手机app开发

    经过一段时间的学习,做公司项目,对mui框架有了更加深入完整的了解,其实刚开始接触HBuilder中的mui框架只是简单的了解,并没有深入的研究,后来由于工作的需求,不得不深入研究,并运用的项目中去. ...

  10. 【转】new和malloc的区别

    1. 申请的内存所在位置 new操作符从自由存储区(free store)上为对象动态分配内存空间,而malloc函数从堆上动态分配内存. 自由存储区是C++基于new操作符的一个抽象概念,凡是通过n ...