1: 何为Promise

Promise是抽象异步处理对象以及对其对象进行各种操作的组件,是基于并列/并行处理设计的一种编程语言。

说到基于JavaScript的异步处理,大多数都会想到利用回调函数。Node.js等则规定在JavaScript的回调函数的第一个参数为error对象,这也是他的一个惯例。

而Promise则是把类似的异步处理对象和处理规则进行规范化, 并按照采用统一的接口来编写,而采取规定方法之外的写法都会出错。

如:

    var promise = getAsyncPromise("fileA.txt"); //返回promise对象

    promise.then(function(result){    // 获取文件内容成功时的处理}).catch(function(error){    // 获取文件内容失败时的处理});         //通过promise对象调用then(成功的回调),catch(失败的回调)

也就是说,除promise对象规定的方法(这里的then 或catch)以外的方法都是不可以使用的,而不会像回调函数方式那样可以自己自由的定义回调函数的参数,而必须严格遵守固定、统一的编程方式来编写代码。

所以,promise的功能是可以将复杂的异步处理轻松地进行模式化, 这也可以说得上是使用promise的理由之一。

2:构造Constructor

要想创建一个promise对象、可以使用new来调用Promise的构造器来进行实例化。

var promise = new Promise(function(resolve, reject) {

  // 异步处理 done()

  // 处理结束后、成功调用resolve ,失败调用 reject

});

对通过new生成的promise对象为了设置其值在 resolve(成功) / reject(失败)时调用的回调函数 可以使用promise.then() 实例方法。
promise.then(onFulfilled, onRejected)

resolve(成功)时onFulfilled 会被调用            reject(失败)时,onRejected 会被调用

onFulfilled、onRejected 两个都为可选参数。

promise.then 成功和失败时都可以使用。 另外在只想对异常进行处理时可以采用promise.then(undefined, onRejected) 这种方式,只指定reject时的回调函数即可

不过这种情况下promise.catch(onRejected) 应该是个更好的选择。

其实可以理解为 .catch只是 promise.then(undefined, onRejected) 的别名而已。

一般说来,使用.catch来将resolve和reject处理分开来写是比较推荐的做法。

创建promise对象的流程如下所示:

(1):new Pormise(fn)    返回一个promise对象。

(2):在fn中指定异步等处理

    • 处理结果正常的话,调用resolve(处理结果值)

    • 处理结果错误的话,调用reject(Error对象)

3:静态方法

像 Promise 这样的全局对象还拥有一些静态方法

包括 Promise.all() 还有 Promise.resolve() 等在内,主要都是一些对Promise进行操作的辅助方法

4:Promise的工作流程

function asyncFunction() {

  return new Promise(function (resolve, reject) {        //通过new Promise返回一个promise对象

    setTimeout(function () {

      resolve('Async Hello world');  }, 16);

  });

}   (1)

asyncFunction().then(function (value) {      //通过promise对象来调用then,catch方法

  console.log(value);    // => 'Async Hello world'

}).catch(function (error) {

  console.log(error);

});   (2)

(1)new Promise构造器之后会返回一个promise对象。

(2)为promise对象用设置.then 调用返回值时的回调函数。

  asyncFunction 这个函数会返回promise对象, 对于这个promise对象,我们调用它的then 方法来设置resolve后的回调函数,catch 方法来设置发生错误时的回调函数。该promise对象会在setTimeout之后的16ms时被resolve, 这时then的回调函数会被调用,并输出'Async Hello world'.

在这种情况下,catch的回调函数并不会被执行, 因为promise返回了resolve ,不过如果运行环境没有提供setTimeout 函数的话,那么上面代码在执行中就会产生异常,在catch 中设置的回调函数就会被执行.

当然,像promise.then(onFulfilled, onRejected) 的方法声明一样, 如果不使用catch方法只使用then方法的话,如下所示的代码也能完成相同的工作。

asyncFunction().then(function (value) {  console.log(value);}, function (error) {  console.log(error);});    //  then(onFullfilled, onRejected)

5:Promise的状态

用new Promise实例化的promise对象有以下三个状态。

  "has-resolution" - Fulfilledresolve(成功)时。此时会调 OnFullfilled

  "has-rejection" - Rejectedreject(失败)时。此时会调 OnRejected

  "unresolved" - Pending既不是resolve也不是reject的状态。也就是promise对象刚被创建后的初始化状态等。

以上术语,基本会基于 Promises/A+13中 Pending 、 Fulfilled 、 Rejected 的状态名称进行讲诉。

promise对象的状态,从Pending转换为Fulfilled或Rejected之后,这个promise对象的状态就不会再发生任何变化。

js的Promise学习笔记(1)的更多相关文章

  1. 浏览器中js执行机制学习笔记

    浏览器中js执行机制学习笔记 RiverSouthMan关注 0.0772019.05.15 20:56:37字数 872阅读 291 同步任务 当一个脚本第一次执行的时候,js引擎会解析这段代码,并 ...

  2. 【09-23】js原型继承学习笔记

    js原型继承学习笔记 function funcA(){ this.a="prototype a"; } var b=new funcA(); b.a="object a ...

  3. Underscore.js 源码学习笔记(下)

    上接 Underscore.js 源码学习笔记(上) === 756 行开始 函数部分. var executeBound = function(sourceFunc, boundFunc, cont ...

  4. Underscore.js 源码学习笔记(上)

    版本 Underscore.js 1.9.1 一共 1693 行.注释我就删了,太长了… 整体是一个 (function() {...}());  这样的东西,我们应该知道这是一个 IIFE(立即执行 ...

  5. 纯JS实现KeyboardNav(学习笔记)一

    纯JS实现KeyboardNav(学习笔记)一 这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写 GitHub项目源码 预览地址 最终效果 KeyboardNav使用指南 ...

  6. 纯JS实现KeyboardNav(学习笔记)二

    纯JS实现KeyboardNav(学习笔记)二 这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写 这篇主要是添加css,优化js编写逻辑和代码排版 GitHub项目源码 ...

  7. [360前端星计划]BlackJack(21点)(纯JS,附总部学习笔记)

    [360前端星计划]总部学习笔记(6/6) [360前端星计划]详情跳转 游戏界面预览 目录 一.游戏介绍 1.起源 2.规则 3.技巧 二.游戏设计 1.整体UI构思 2.素材采集 3.游戏总规划 ...

  8. Javascript - Promise学习笔记

    最近工作轻松了点,想起了以前总是看到的一个单词promise,于是耐心下来学习了一下.   一:Promise是什么?为什么会有这个东西? 首先说明,Promise是为了解决javascript异步编 ...

  9. JavaScript之Promise学习笔记

    一直想知道Promise到底是怎么实现的,网上一搜几十篇文章,看的一脸蒙蔽.最后算是找到几个讲的真心很详细明了的.看了一份源码看了很久很久……最后找大佬问了几处看不懂的地方,大佬只看了十几分钟就看懂了 ...

随机推荐

  1. 《机器学习实战》学习笔记一K邻近算法

     一. K邻近算法思想:存在一个样本数据集合,称为训练样本集,并且每个数据都存在标签,即我们知道样本集中每一数据(这里的数据是一组数据,可以是n维向量)与所属分类的对应关系.输入没有标签的新数据后,将 ...

  2. 第1章 Sass简介

    什么是 CSS 预处理器? 定义: CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言 ...

  3. Codeforces Round #389 (Div. 2, Rated, Based on Technocup 2017 - Elimination Round 3) C

    Description Santa Claus has Robot which lives on the infinite grid and can move along its lines. He ...

  4. wcf 同时支持webhttp 和 引用方式

    wcf 实现参考 http://www.cnblogs.com/mingmingruyuedlut/p/4223116.html 兼容两种方式 1.修改服务端webconfig <system. ...

  5. 【转】CSS:table-cell详解

    table-cell这个家伙在国外的网站中偶有露头,天朝由于IE6.7这两个货泛滥成灾,难有发挥,那么,这个家伙到底能干些什么呢?先让我们来研究下table,那些年曾经使用的table布局为何如此辉煌 ...

  6. miniprofiler的对数据库的监测使用。以nancy,petapoco为例

    miniprofiler的使用 miniprofiler的详细介绍请看这里http://miniprofiler.com/.(可以对数据库和页面等监控如 ado ef mvc mongodb) 本文以 ...

  7. Google-GLog编译以及使用

    心血来潮要去看开源代码,看到公司的日志库是在google-glog开源库上二次封装的,那就先撸glog吧. 1. 下载源码  一条命令取源码:git clone github.com/google/g ...

  8. Latex引用插图格式制定问题(1)

    自定义新命令\reffig如下:\newcommand{\reffig}[1]{Figure \ref{#1}}在需要引用图片的时候,用\reffig代替\ref,就可以自动在图号前面输出" ...

  9. Eclipse 快捷键 (应用中自己总结)

    调试快捷键: 1: resume(F8) 调试中用来直接跳到下一个断点 2:  用来结束JVM 3:step into (F5)跳入函数 4: step over (F6)单步执行 5:step re ...

  10. U盘修复

    方法一: 1.点开始-运行-输入cmd-format f: /fs: FAT32 (这里f:是指U盘所在盘符) 2.打开控制面板-管理工具-计算机管理-磁盘管理-找到U盘的所在的盘符--点右键--删除 ...