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)    //参数数组中执行最快的实例返回的失败数据信息
    });

原文地址:https://www.cnblogs.com/nzcblogs/p/11373856.html

时间: 2024-10-09 01:12:49

ES6 Promise对象(七)的相关文章

ES6 Promise 对象

es6 Promise 对象是异步编程的一种解决方案.(在javascript世界里,是单线程顺序执行的)从语法上说,Promise 是一个对象,从它可以获取异步操作的消息. Promise 异步操作有三种状态:pending(进行中).fulfilled(已成功)和 rejected(已失败).除了异步操作的结果,任何其他操作都无法改变这个状态.Promise 对象只有:从 pending 变为 fulfilled 和从 pending 变为 rejected 的状态改变.只要处于 fulfi

ES6 Promise对象

Promise  ,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果. Promise 对象有以下两个特点. (1)对象的状态不受外界影响. Promise 对象代表一个异步操作,有三种状态: Pending (进行中). Resolved (已完成,又称 Fulfilled )和 Rejected (已失败).只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态. (2)一旦状态改变,就不会再变,任何时候都可以得到这个结果. Promis

Promise 对象

es6 Promise 对象 定义参考 案例源码 戳这里 ps:每个案例都是基于上一个改造的 一.Promise 简介 Promise 是一个对象,从它可以获取异步操作的消息 案例1 新建项目 [demo] |-- src |-- index.html |-- index.js |-- webpack.config.js |-- package.json demo/package.json { "name": "webpack", "version&quo

ES6深入学习记录(二)promise对象相关

1.Promise的含义 Promise是异步编程的一种解决方案,比传统的解决方案--回调函数和事件更合理和强大.ES6将其写进了语言标准,统一了用法,原生提供了promise对象. 所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步的操作)的结果.从语法上说,Pormise是一个对象,从它可以获取异步操作的消息.Promise提供统一的API.各种异步操作都可以用同样的方法进行处理. Promise对象的两个特点: 1.对象的状态不受外界影响.Promis

ES6 - promise对象

Promise的设计初衷 我们使用ajax请求数据,得到数据后再对数据进行操作,可是有时候,对得到的数据进行操作的过程中,可能又要用到ajax请求,这时,我们的代码就变成了这样: $.ajax({ success:function(res1){ //...请求B开始,B依赖A返回的数据 $.ajax({ sucess:function(res2){ //...请求C开始,C依赖B返回的数据 $.ajax({ sucess:function(res3){ } }); } }); } }); 这种写

ES6的promise对象应该这样用

ES6修补了一位Js修真者诸多的遗憾. 曾几何时,我这个小白从js非阻塞特性的坑中爬出来,当我经历了一些回调丑陋的写法和优化的尝试之后,我深深觉得js对于多线程阻塞式的开发语言而言,可能有着其太明显的缺点,而又无法忽略的是也正因为这一点,node.js处理并行的能力被人看作优点,在我看来,这其实有着些讽刺的意味,就好像踢足球时有的人总夸你腿短,所以频率快下盘稳好控球...好在js从出生以来就有一种独特的特质,就是模仿,对,就是模仿,模仿别人的优点来补足自己,同时保持自己的长处. ES6就是通过P

es6中的promise对象

Promise是异步里面的一种解决方案,解决了回调嵌套的问题,es6将其进行了语言标准,同意了用法,提供了`promise`对象, promise对象有三种状态:pending(进行中) .Resolved(已经完成)和Rejected(已失败) ES6规定,Promise对象是一个构造函数,用来生成Promise实例. var promise=new Promise(function(resove,reject){ if (/* 异步操作成功 */){ resolve(value); } el

ES6学习笔记--promise对象

Promise是异步编程的一种解决方案,比传统的解决方案--回调函数和事件更合理和更强大.它由社区最早提出和实现,ES6将其写进了语言标准,统一了用法,原生提供了Promise对象. Promise对象有以下两个特点. (1)对象的状态不受外界影响.Promise对象代表一个异步操作,有三种状态:Pending(进行中).Resolved(已完成,又称 Fulfilled)和Rejected(已失败).只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态.这也是Promi

es6 之 promise 对象

异步编程 传统方案:事件 + 回调函数 ES6 的新方案:Promise 对象 Promise 异步操作有 3 种状态 pending: 进行中 resolved: 已完成 rejected: 已失败 Promise 异步操作的状态变化仅限下面两种方式 pending –> resolved pending –> rejected 创建一个 Promise 实例: promise 构造函数接收一个函数作为参数,并且这个函数有两个参数,这两个参数是也是两个函数,不过这两个函数由 JavaScri