【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:本文系原创转自我的博 ...
随机推荐
- 天翼云 RDS数据库操作
1.RDS数据库创建好之后点击RDS实例管理找到已下信息 官方文档 -1:http://www.ctyun.cn/help/qslist/567 官方文档 -2:http://www.ctyun.cn ...
- win安装配置Java8环境
这里就不重复造轮子,搜索一下. 一堆就出来 这里就引用一个百度知道的经验 https://jingyan.baidu.com/article/48b558e3f135687f38c09a03.html ...
- 1.VMware虚拟机的安装
1.找到安装软件 2.使用如下操作安装 3.选择接受协议 4.修改安装目录 5.如果上一步有修改,此步骤不用改路径 7.安装后创建桌面快捷方式 8.安装成功可以看到桌面上有快捷方式图标 安装结束 声明 ...
- 6.在idea中链接数据库
1.打开数据库配置的窗口 File - view - Tool Windows - Database 2.打开mysql的数据库链接模板 Database - + - Data Source - M ...
- Html5最简单的游戏Demo——Canvas绘图的骰子
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- Adaptively handling remote atomic execution based upon contention prediction
In one embodiment, a method includes receiving an instruction for decoding in a processor core and d ...
- MEAN框架学习笔记
MEAN框架学习笔记 MEAN开发框架的资料非常少.基本的资料还是来自于learn.mean.io站点上的介绍. 于是抱着一种零基础学习的心态,在了解的过程中,通过翻译加上理解将MEAN框架一点点消化 ...
- HDU 3537
翻硬币游戏,纯.. 注意要判重 #include <iostream> #include <cstdio> #include <cstring> #include ...
- uva 704
自己之前的不见了.. 这题是双向广搜即可过.. // Colour Hash (色彩缤纷游戏) // PC/UVa IDs: 110807/704, Popularity: B, Success ra ...
- Android中验证输入是否为汉字及手机号,邮箱验证,IP地址可用port号验证
1,验证是否为汉字 // 验证昵称 private boolean verifyNickname() { String nickname = edt_username.getText().toStri ...