ES6 Promise对象

Posted nzcblogs

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ES6 Promise对象相关的知识，希望对你有一定的参考价值。

一、Promise介绍
1、Promise简单说就是一个容器，里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果
2、Promise可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易

二、基本用法【使用时注意环境及异步操作相关包安装】
在node环境中使用ajax时需要安装jsdom、jqury包
配置常量：

    //创建window环境
    const JSDOM = require(‘jsdom‘);
    const window = new JSDOM(‘<!DOCTYPE html>‘);
    //获取jQuery函数
    const $ = require(‘jquery‘)(window);

1、Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve函数和reject函数【参数函数由javascript引擎提供,不用自己部署】
eg: 

    let promise = new Promise((resolve,reject)=>);

a、resolve函数的作用：
将Promise对象的状态从“未完成”变为“成功”【从Pending 变为 Resolved】,在异步操作成功时调用,并将异步操作的结果,作为参数传递出去

b、reject函数的作用：
将Promise对象的状态从“未完成”变为“失败”【从 Pending 变为 Rejected】,在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去

Promise实例生成以后,可以使用实例then方法分别指定Resolved状态和Rejected状态的回调函数【一般建议使用then和catch分开指定回调函数】

then(fun1,fun2)
方法参数：
a、fun1：Promise对象的Resolved状态回调函数
b、fun2：Promise对象的Rejected状态回调函数

catch(fun)   【该方法为then(null,fun2)方法的别名】
方法参数：
fun：Promise对象的Rejected状态回调函数

注：
一般使用then来执行Resolved状态回调函数,使用catch来执行Rejected状态回调函数,而不直接使用then调用两种状态下的回调函数

finally(fun)    【不管Promise对象状态如何,都会执行该方法】(一般用于回收资源)
eg：

    let promise = new Promise((resolve,reject)=>
        //参数函数内部一般执行异步操作
        $.ajax(
            url:‘‘,
            method:‘‘,
            data:[],
            success(res)
                resolve(res);
            ,
            error(error)
                reject(error);
            
        );
    );
    //执行Promise构造函数中异步执行成功resolve()方法的回调函数
    promise.then((res)=>);
    //执行Promise构造函数中异步执行失败reject()方法的回调函数
    promise.catch((error)=>);
    //不管Promise对象状态如何,都会执行该方法
    promise.finally(()=>);
    //上面方法也可以使用下面形式调用
    //promise.then((res)=>).catch((error)=>).finally(()=>);

   
三、Promise函数相关方法
1、Promise. resolve()
参数类型：
a、参数是一个Promise实例    【返回这个Promise实例】
eg：

    //传递的是Promise对象,不做任何操作,原样返回这个Promise实例promise
    let p = Promise.resolve(promise);

    p.then((res)=>
        console.log(res);
    ).catch((error)=>
        console.log(error,‘-------‘);
    ).finally(()=>
        //无论异步操作成功或失败都会执行finally函数
        console.log(‘finally‘);
    );


b、参数是一个thenable对象【thenable对象指的是具有then方法的对象】
Promise.resolve方法会将这个thenable对象转为Promise对象,然后就立即执行这个thenable对象的then方法
eg:

    let obj = 
        name:‘zhangsan‘,
        then()
            console.log(‘obj中的then方法‘);
        
    ;

    let p = Promise.resolve(obj);    //直接执行obj对象中的then方法,不会执行实例对象p中的then方法
    p.then(()=>        //该方法不会执行
        console.log(‘p3的then方法‘);  
    );


c、参数不是一个thenable的对象或根本就不是对象    【返回一个新的Promise对象,状态为Resolved,执行then中的回调函数】
eg：

    //执行了resolve函数,即执行then中的回调函数【执行了resolve函数,Promise对象才由pending状态转化为resolve状态】
    let p = Promise.resolve(‘hello‘);  //返回resolve状态的Promise对象【内部执行了resolve函数】 打印resolve字符串
    p.then(()=>
        console.log(‘resolve‘);
    ).catch(()=>
        console.log(‘reject‘);
    );


d、不带有任何参数    【返回一个Resolved状态的Promise对象】

2、Promise.all()    【返回多个Promise实例包装成的一个新Promise实例】
方法参数：
参数为多个Promise实例组成的数组
方法说明：
a、将多个Promise实例,包装成一个新的Promise实例,并返回该新包装的Promise实例
b、若参数数组中的所有Promise实例状态为resolved时,新包装的实例状态才为resolve状态,
新包装的实例then方法中的resolve的回调函数时数据参数为所有实例返回的成功请求数据
c、若参数数组中碰到有Promise实例状态为rejected时,新包装的实例状态即为rejected状态,无需再看后面的实例状态,
新包装的实例catch方法中的reject的回调函数参数数据信息为该rejected状态实例参数的失败请求数据
eg：

    //p1,p2,p3为Promise的实例对象
    var p = Promise.all([p1, p2, p3]);
    
    //新实例p的状态为数组参数中返回信息结果最快的实例状态【即参数数组获取信息最快的实例对象】
    p.then((res)=>
        console.log(res);    //p1,p2,p3中resolved状态返回的信息集合
    ).catch((error)=>
        console.log(error)    //参数最先配到的实例rejected状态的返回信息
    );


3、Promise.race()    【返回多个Promise实例包装成的一个新Promise实例】
方法参数：
参数为多个Promise实例组成的数组
方法说明：
a、新包装的Promise实例状态为参数数组中返回信息结果最快的实例状态
b、新包装的Promise实例相应方法中的数据信息即为改变该实例的参数数组中的实例相关返回信息
eg：

    //p1,p2,p3为Promise的实例对象
    var p = Promise.race([p1, p2, p3]);
    
    //新实例p的状态为数组参数中返回信息结果最快的实例状态【即参数数组获取信息最快的实例对象】
    p.then((res)=>
        console.log(res);    //参数数组中执行最快的实例返回的成功数据信息
    ).catch((error)=>
        console.log(error)    //参数数组中执行最快的实例返回的失败数据信息
    );


 

以上是关于ES6 Promise对象的主要内容，如果未能解决你的问题，请参考以下文章

ES6 Promise对象

es6学习笔记--promise对象

ES6之Promise对象

ES6 Promise 对象

ES6 promise对象

ES6中的Promise对象的理解