【ES6】 Promise / await / async的使用
为什么需要在项目中引入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、基本语法
- //构建Promise
- var promise = new Promise(function (resolve, reject) {
- if (/* 异步操作成功 */) {
- resolve(data);
- } else {
- /* 异步操作失败 */
- reject(error);
- }
- });
类似构建对象,我们使用new
来构建一个Promise
。Promise
接受一个「函数」作为参数,该函数的两个参数分别是resolve
和reject
。这两个函数就是就是「回调函数」,由JavaScript引擎提供。
resolve
函数的作用:在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;
reject
函数的作用:在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。
1.3、Promise
对象代表一个未完成、但预计将来会完成的操作。
它有以下三种状态:
pending
:初始值,不是fulfilled,也不是rejectedfulfilled
:代表操作成功rejected
:代表操作失败
Promise
有两种状态改变的方式,既可以从pending
转变为fulfilled
,也可以从pending
转变为rejected
。
一旦状态改变,就「凝固」了,会一直保持这个状态,不会再发生变化。
即,执行完 resolve(data); 再执行reject(error), 状态仍然是成功,不会被重新改变
当状态发生变化,promise.then
绑定的函数就会被调用。
注意:Promise
一旦新建就会「立即执行」,无法取消。这也是它的缺点之一。
1.4、基本API
.then()
- 语法:Promise.prototype.then(onFulfilled, onRejected)
对promise添加onFulfilled
和onRejected
回调,并返回的是一个新的Promise实例(不是原来那个Promise实例),且返回值将作为参数传入这个新Promise的resolve
函数。
因此,我们可以使用链式写法,如上文的例2.7。由于前一个回调函数,返回的还是一个Promise对象(即有异步操作),这时后一个回调函数,就会等待该Promise对象的状态发生变化,才会被调用。
【ES6】 Promise / await / async的使用的更多相关文章
- yield 异步 并行 Promise await async
yield方式转移执行权的协程之间不是调用者与被调用者的关系,而是彼此对称.平等的 http://www.geeksforgeeks.org/use-yield-keyword-instead-ret ...
- Promise,Async,await简介
Promise 对象 转载:http://wiki.jikexueyuan.com/project/es6/promise.html 基本用法 ES6 原生提供了 Promise 对象.所谓 Prom ...
- Promise, Generator, async/await的渐进理解
作为前端开发者的伙伴们,肯定对Promise,Generator,async/await非常熟悉不过了.Promise绝对是烂记于心,而async/await却让使大伙们感觉到爽(原来异步可以这么简单 ...
- 异步操作之 Promise 和 Async await 用法进阶
ES6 提供的 Promise 方法和 ES7 提供的 Async/Await 语法糖都可以更好解决多层回调问题, 详细用法可参考:https://www.cnblogs.com/cckui/p/99 ...
- Promise及Async/Await
一.为什么有Async/Await? 我们都知道已经有了Promise的解决方案了,为什么还要ES7提出新的Async/Await标准呢? 答案其实也显而易见:Promise虽然跳出了异步嵌套的怪 ...
- 前端项目中常用es6知识总结 -- Async、Await让异步美如画
项目开发中一些常用的es6知识,主要是为以后分享小程序开发.node+koa项目开发以及vueSSR(vue服务端渲染)做个前置铺垫. 项目开发常用es6介绍 1.块级作用域 let const 2. ...
- 异步Promise及Async/Await最完整入门攻略
一.为什么有Async/Await? 我们都知道已经有了Promise的解决方案了,为什么还要ES7提出新的Async/Await标准呢? 答案其实也显而易见:Promise虽然跳出了异步嵌套的怪圈, ...
- promise 进阶 —— async / await 结合 bluebird
一.背景 1.Node.js 异步控制 在之前写的 callback vs async.js vs promise vs async / await 里,我介绍了 ES6 的 promise 和 ES ...
- 异步Promise及Async/Await可能最完整入门攻略
此文只介绍Async/Await与Promise基础知识与实际用到注意的问题,将通过很多代码实例进行说明,两个实例代码是setDelay和setDelaySecond. tips:本文系原创转自我的博 ...
随机推荐
- 进程映射、mmap(day05)
一.内存管理(续) 每个进程都有自己独立的4G的虚拟地址空间. 冯.诺伊曼体系结构 哈佛体系结构 section 代码段 只读数据段 栈段 举例说明 数据所属的段. 代码参见 memory.c 如何获 ...
- 使用Selenium爬取网站表格类数据
本文转载自一下网站:Python爬虫(5):Selenium 爬取东方财富网股票财务报表 https://www.makcyun.top/web_scraping_withpython5.html 需 ...
- mongodb集群搭建(分片+副本)
原文地址:https://www.cnblogs.com/ityouknow/p/7344005.html 相关概念 先来看一张图: 从图中可以看到有四个组件:mongos.config server ...
- JSLinq 的使用
在net 中经常使用Linq 语法或者lamada 表达式,在使用的过程中感觉很方便,但是在涉及到JS的时候,总要自己去写逻辑代码去查询相关数据,通过搜索发现 已经有关于JSLInq的扩展方法,可以像 ...
- Java 实现线程安全的三种方式
一个程序在运行起来的时候会转换成进程,通常含有多个线程. 通常情况下,一个进程中的比较耗时的操作(如长循环.文件上传下载.网络资源获取等),往往会采用多线程来解决. 比如显示生活中,银行取钱问题.火车 ...
- Bootstrap关于表单控件(按扭)
按钮也是表单重要控件之一,制作按钮通常使用下面代码来实现: ☑ input[type=“submit”] ☑ input[type=“button”] ☑ input[type=“r ...
- 手写DAO框架(四)-SQL执行
-------前篇:手写DAO框架(三)-数据库连接--------- 前言 通过上一篇写的方法,可以灵活的获取.释放数据库连接,拿到连接之后,我们就可以执行sql了!所以,本篇介绍的就是SQL执行器 ...
- redis-linux上安装redis
单机版本 因为redis是c++写的,我们首先需要安装c++环境 1.在linux安装c++源码编译器 需要联网 linux输入yum -y install gcc gcc-c++ 2.官网下载red ...
- 关于Bubblesort算法
Java中的经典算法之冒泡排序(Bubble Sort) 原理:比较两个相邻的元素,将值大的元素交换至右端. 思路:依次比较相邻的两个数,将小数放在前面,大数放在后面.即在第一趟:首先比较第1个和第2 ...
- “System.Runtime.InteropServices.COMException”类型的第一次机会异常在 ESRI.ArcGIS.Version.dll 中发生
“System.Runtime.InteropServices.COMException”类型的第一次机会异常在 ESRI.ArcGIS.Version.dll 中发生 其他信息: The speci ...