为什么需要在项目中引入promise?

项目起因:我们在页面中经常需要多次调用接口,而且接口必须是按顺序串联调用

(即A接口调用完毕,返回数据后,再调用B接口)

这样就会造成多次回调,代码长得丑,而且不好维护,这就是传说中的 回调地狱(Callback Hell)

官方起因:为了我们的代码更加具有可读性和可维护性,我们需要将数据请求与数据处理明确的区分开来

(几乎介绍promise的文章都有这么一句话,我就借用理解下)

1、promise

1.1、官方解释:

The Promise object is used for asynchronous computations. A Promise represents a single asynchronous operation that hasn't completed yet, but is expected in the future.

译文:Promise对象用于异步操作,它表示一个尚未完成且预计在未来完成的异步操作。

  1.2、基本语法

  1. //构建Promise
  2. var promise = new Promise(function (resolve, reject) {
  3. if (/* 异步操作成功 */) {
  4. resolve(data);
  5. } else {
  6. /* 异步操作失败 */
  7. reject(error);
  8. }
  9. });

类似构建对象,我们使用new来构建一个PromisePromise接受一个「函数」作为参数,该函数的两个参数分别是resolvereject。这两个函数就是就是「回调函数」,由JavaScript引擎提供。

resolve函数的作用:在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;

reject函数的作用:在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。

1.3、Promise对象代表一个未完成、但预计将来会完成的操作。

它有以下三种状态:

    •  pending :初始值,不是fulfilled,也不是rejected
    •  fulfilled  :代表操作成功
    •  rejected :代表操作失败

Promise有两种状态改变的方式,既可以从pending转变为fulfilled,也可以从pending转变为rejected

一旦状态改变,就「凝固」了,会一直保持这个状态,不会再发生变化。

即,执行完 resolve(data); 再执行reject(error), 状态仍然是成功,不会被重新改变

当状态发生变化,promise.then绑定的函数就会被调用。

注意:Promise一旦新建就会「立即执行」,无法取消。这也是它的缺点之一。

 1.4、基本API

.then()

  1. 语法:Promise.prototype.then(onFulfilled, onRejected)

对promise添加onFulfilledonRejected回调,并返回的是一个新的Promise实例(不是原来那个Promise实例),且返回值将作为参数传入这个新Promise的resolve函数。

因此,我们可以使用链式写法,如上文的例2.7。由于前一个回调函数,返回的还是一个Promise对象(即有异步操作),这时后一个回调函数,就会等待该Promise对象的状态发生变化,才会被调用。

【ES6】 Promise / await / async的使用的更多相关文章

  1. yield 异步 并行 Promise await async

    yield方式转移执行权的协程之间不是调用者与被调用者的关系,而是彼此对称.平等的 http://www.geeksforgeeks.org/use-yield-keyword-instead-ret ...

  2. Promise,Async,await简介

    Promise 对象 转载:http://wiki.jikexueyuan.com/project/es6/promise.html 基本用法 ES6 原生提供了 Promise 对象.所谓 Prom ...

  3. Promise, Generator, async/await的渐进理解

    作为前端开发者的伙伴们,肯定对Promise,Generator,async/await非常熟悉不过了.Promise绝对是烂记于心,而async/await却让使大伙们感觉到爽(原来异步可以这么简单 ...

  4. 异步操作之 Promise 和 Async await 用法进阶

    ES6 提供的 Promise 方法和 ES7 提供的 Async/Await 语法糖都可以更好解决多层回调问题, 详细用法可参考:https://www.cnblogs.com/cckui/p/99 ...

  5. Promise及Async/Await

      一.为什么有Async/Await? 我们都知道已经有了Promise的解决方案了,为什么还要ES7提出新的Async/Await标准呢? 答案其实也显而易见:Promise虽然跳出了异步嵌套的怪 ...

  6. 前端项目中常用es6知识总结 -- Async、Await让异步美如画

    项目开发中一些常用的es6知识,主要是为以后分享小程序开发.node+koa项目开发以及vueSSR(vue服务端渲染)做个前置铺垫. 项目开发常用es6介绍 1.块级作用域 let const 2. ...

  7. 异步Promise及Async/Await最完整入门攻略

    一.为什么有Async/Await? 我们都知道已经有了Promise的解决方案了,为什么还要ES7提出新的Async/Await标准呢? 答案其实也显而易见:Promise虽然跳出了异步嵌套的怪圈, ...

  8. promise 进阶 —— async / await 结合 bluebird

    一.背景 1.Node.js 异步控制 在之前写的 callback vs async.js vs promise vs async / await 里,我介绍了 ES6 的 promise 和 ES ...

  9. 异步Promise及Async/Await可能最完整入门攻略

    此文只介绍Async/Await与Promise基础知识与实际用到注意的问题,将通过很多代码实例进行说明,两个实例代码是setDelay和setDelaySecond. tips:本文系原创转自我的博 ...

随机推荐

  1. 进程映射、mmap(day05)

    一.内存管理(续) 每个进程都有自己独立的4G的虚拟地址空间. 冯.诺伊曼体系结构 哈佛体系结构 section 代码段 只读数据段 栈段 举例说明 数据所属的段. 代码参见 memory.c 如何获 ...

  2. 使用Selenium爬取网站表格类数据

    本文转载自一下网站:Python爬虫(5):Selenium 爬取东方财富网股票财务报表 https://www.makcyun.top/web_scraping_withpython5.html 需 ...

  3. mongodb集群搭建(分片+副本)

    原文地址:https://www.cnblogs.com/ityouknow/p/7344005.html 相关概念 先来看一张图: 从图中可以看到有四个组件:mongos.config server ...

  4. JSLinq 的使用

    在net 中经常使用Linq 语法或者lamada 表达式,在使用的过程中感觉很方便,但是在涉及到JS的时候,总要自己去写逻辑代码去查询相关数据,通过搜索发现 已经有关于JSLInq的扩展方法,可以像 ...

  5. Java 实现线程安全的三种方式

    一个程序在运行起来的时候会转换成进程,通常含有多个线程. 通常情况下,一个进程中的比较耗时的操作(如长循环.文件上传下载.网络资源获取等),往往会采用多线程来解决. 比如显示生活中,银行取钱问题.火车 ...

  6. Bootstrap关于表单控件(按扭)

    按钮也是表单重要控件之一,制作按钮通常使用下面代码来实现:   ☑  input[type=“submit”]   ☑  input[type=“button”]   ☑  input[type=“r ...

  7. 手写DAO框架(四)-SQL执行

    -------前篇:手写DAO框架(三)-数据库连接--------- 前言 通过上一篇写的方法,可以灵活的获取.释放数据库连接,拿到连接之后,我们就可以执行sql了!所以,本篇介绍的就是SQL执行器 ...

  8. redis-linux上安装redis

    单机版本 因为redis是c++写的,我们首先需要安装c++环境 1.在linux安装c++源码编译器 需要联网 linux输入yum -y install gcc gcc-c++ 2.官网下载red ...

  9. 关于Bubblesort算法

    Java中的经典算法之冒泡排序(Bubble Sort) 原理:比较两个相邻的元素,将值大的元素交换至右端. 思路:依次比较相邻的两个数,将小数放在前面,大数放在后面.即在第一趟:首先比较第1个和第2 ...

  10. “System.Runtime.InteropServices.COMException”类型的第一次机会异常在 ESRI.ArcGIS.Version.dll 中发生

    “System.Runtime.InteropServices.COMException”类型的第一次机会异常在 ESRI.ArcGIS.Version.dll 中发生 其他信息: The speci ...