前沿: 

  Promise在处理异步操作非常有用。项目中,与后端进行数据请求的时候经常要用到Promise。我们可以用promise + xhr进行ajax的封装。也可以使用基于promise封装的请求方法(fetch)或者类库(axios)去跟服务器进行交互。当使用fethch或者axios的时候,常常需要对数据请求方法进行二次封装。这就要求我们能够理解并掌握promise的用法。

Promise知识要点:

1、首先区分Promise构造函数和promise对象的概念。

  通过Promise构造函数创建promise对象。promise对象是Promise构造函数的一个实例。

var promise1 = new Promise(function(resolve, reject) {
setTimeout(resolve, 100, 'foo');
}); console.log(promise1);
// output: [object Promise]

2、promise对象

  概念(有点生硬):promise 对象是一个代理对象(代理一个值),被代理的值在promise对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法(handlers)。 这让异步方法可以像同步方法那样返回值,但并不是立即返回最终执行结果,而是一个能代表未来出现的结果的promise对象。换句话说,promise对象表示一个异步操作的最终状态(完成或失败),以及其返回的值。

2-1、promise的状态类型

a.  一个 promise对象的状态类型:

  • pending: 初始状态,既不是成功,也不是失败状态。
  • fulfilled: 意味着操作成功完成。
  • rejected: 意味着操作失败。

b. promise对象状态改变时,调用的方法。

  要点:pending 状态的 promise 对象可能触发fulfilled 状态并传递一个值给相应的状态处理方法,也可能触发失败状态(rejected)并传递失败信息给相应的状态处理方法。当其中任一种情况出现时,promise 对象的 then 方法绑定的处理方法(handlers )就会被调用。then方法包含两个参数:onfulfilled 和 onrejected,它们都是 Function 类型。

  当promise状态为fulfilled时,调用 then 的 onfulfilled 方法,当promise状态为rejected时,调用 then 的 onrejected 方法或者catch方法。

  特别提示:

  1、then方法 的 onrejected 处理方法和catch方法只是语法糖不同。其实是一个东西。

2-2. 如何进行链式操作

  要点:Promise.prototype.then 和  Promise.prototype.catch 方法返回promise 对象, 并且将以回调的返回值来resolve。

  1、即然then和catch方法调用后,返回一个新的promise对象(则可以进行链式调用了)。

  2、新的promise对象初始状态为pedding,以回调函数的返回值来resolve(不是reject),则状态变为fulfilled。所以,再进行链式调用的时候是调用 then 的 onfulfilled 方法。(返回值为error或者回调抛出错误,状态会变为rejected???有待考究下。在不发生意外情况,暂且理解为状态只能变为fulfilled)

3、Promise 构造函数

  要点:构造函数主要是用来包装还未支持promises的函数。promise构造函数传入一个带有 resolve 和 reject 两个参数的executor函数。executor函数。Promise构造函数执行时立即调用executor 函数, resolve 和 reject 两个函数作为参数传递给executor(executor 函数在Promise构造函数返回新建对象前被调用)。resolve 和 reject 函数被调用时,分别将promise的状态改为fulfilled(完成)或rejected(失败)。executor 内部通常会执行一些异步操作,一旦完成,可以调用resolve函数来将promise状态改成fulfilled,或者在发生错误时将它的状态改为rejected。如果在executor函数中抛出一个错误,那么该promise 状态为rejected。executor函数的返回值被忽略。

4、promise对象的状态改变时机和值的传递

  我的理解是,只要准确的把握promise的状态变化情况,就能运用好promise。

  1、由Promise构造函数创建的promise对象,状态由Promise构造函数的executor函数去控制promise的状态。调用executor函数的resolve或reject方法,把值传递下去。

  2、当进行链式操作的时候,新的promise对象的状态由上一个then或catch的回调函数去控制promise的状态。用回调函数返回值的形式,把值传递下去。

理解并掌握Promise的用法的更多相关文章

  1. 整理一下Promise 的用法

    Promise 的定义 Pormise是JS的异步编程的一种解决方案,在ES6将其写进了语言标准,提供了原生的Promise对象. Promise简单来理解就是一个容器,里面存放着某个未来才会结束的事 ...

  2. 全面理解Javascript中Promise

    全面理解Javascript中Promise 最近在学习Promise的时候,在网上收集了一些资料,发现很多的知识点不够系统,所以小编特意为大家整理了一些自认为 比较好的文章,供大家更好地学习js中非 ...

  3. 简单谈谈js中Promise的用法

    首先先推荐一篇博文:http://blog.csdn.net/jasonzds/article/details/53717501 这篇博文很清晰的说明了Promise的用法,这里来简单总结一下: Pr ...

  4. JavaScript异步与Promise基本用法(resolve与reject)

    Promise解决的问题相信每个前端都遇到过这样一个问题,当一个异步任务的执行需要依赖另一个异步任务的结果时,我们一般会将两个异步任务嵌套起来,这种情况发生一两次还可以忍,但是发生很多次之后,就形成了 ...

  5. [js高手之路] es6系列教程 - promise常见用法详解(resolve,reject,catch,then,all,race)

    关于promise我在之前的文章已经应用过好几次,如[js高手之路]Node.js+jade+express+mongodb+mongoose+promise实现todolist,本文就来讲解下pro ...

  6. Promise的用法

    promise.then().promise.catch().Promise.all()... Promise 构造函数接受一个函数作为参数,该函数的2个参数分别是 resolve 和 reject. ...

  7. 通过回调函数的理解来进一步理解ajax及其注意的用法

    一,再一次理解回调函数 (function($){ $.fn.shadow = function(opts){ //定义的默认的参数 var defaults = { copies: 5, opaci ...

  8. ES6关于Promise的用法

    Promise 对象用于一个异步操作的最终完成(或失败)及其结果值的表示.简单点说,它就是用于处理异步操作的,异步处理成功了就执行成功的操作,异步处理失败了就捕获错误或者停止后续操作. 它的一般表示形 ...

  9. 理解和使用Promise.all和Promise.race

    一.Pomise.all的使用 Promise.all可以将多个Promise实例包装成一个新的Promise实例.同时,成功和失败的返回值是不同的,成功的时候返回的是一个结果数组,而失败的时候则返回 ...

随机推荐

  1. ES6中的变量结构赋值

    小编的上一篇文章更新了es6中关于变量定义的问题,这篇文章继续来一些实用的干货,关于数组.对象的赋值问题.特别是在前后端合作项目的时候,对后端数据的拆分,还有就是对于函数的默认值的惰性赋值问题.看完下 ...

  2. 剑指 Offer 06. 从尾到头打印链表

    链接:https://leetcode-cn.com/problems/cong-wei-dao-tou-da-yin-lian-biao-lcof/ 标签:链表 题目 输入一个链表的头节点,从尾到头 ...

  3. 二、特殊DNS解析

    一.DNS轮询 1.为站点 www.tedu.cn 提供DNS轮询解析,三台Web服务器节点的IP地址分别为: 192.168.4.10.192.168.4.20.192.168,4.30 步骤: 虚 ...

  4. 【逆向&编程实战】Metasploit安卓载荷运行流程分析_复现meterpreter模块接管shell

    /QQ:3496925334 作者:MG193.7 CNBLOG博客号:ALDYS4 未经许可,禁止转载/ 关于metasploit的安卓模块,前几次的博客我已经写了相应的分析和工具 [Android ...

  5. JAVA并行程序基础二

    JAVA并行程序基础二 线程组 当一个系统中,如果线程较多并且功能分配比较明确,可以将相同功能的线程放入同一个线程组里. activeCount()可获得活动线程的总数,由于线程是动态的只能获取一个估 ...

  6. Vue(1)Vue安装与使用

    前言 Vue(读音/vjuː/,类似于view) 是一套用于构建前后端分离的框架.刚开始是由国内优秀选手尤雨溪开发出来的,目前是全球"最"流行的前端框架.使用vue开发网页很简单, ...

  7. 痛并快乐的YOLO初体验

    1.前言 最近因为需要研究视频的物体识别和行为识别,上网了解了一下,YOLO是目前实时视频物体识别的应用最广泛的算法. 因此,作为小白的我,也准备体验一下YOLO算法的效果. 先上网了解了一下YOLO ...

  8. 动态路由及RIP协议

    动态路由及 RIP协议 目录 一.动态路由协议 1.1.定义 1.2.特点 1.3.动态路由协议概述 1.4.度量值 1.5.收敛 1.6.静态路由和动态路由的比较 二.动态路由协议的分类 2.1.距 ...

  9. 《手把手教你》系列基础篇之(四)-java+ selenium自动化测试- 启动三大浏览器(下)基于Maven(详细教程)

    1.简介 上一篇文章,宏哥已经在搭建的java项目环境中实践了,今天就在基于maven项目的环境中给小伙伴们 或者童鞋们演示一下. 2.eclipse中新建maven项目 1.依次点击eclipse的 ...

  10. C++中运算符的重载

    运算符重载相当于运算符的函数重载,用于对已有的运算符进行重新定义,赋予其另一种功能,以适应不同的数据类型.我们之前提到过C++中的函数重载,可以根据形参的不同调用不同的函数,那么运算符重载跟函数重载的 ...