JavaScript:学习笔记(9)——Promise对象
JavaScript:学习笔记(9)——Promise对象
引入Promise
Primose是异步编程的一种解决方案,比传统的解决方案回调函数和事件更加合理和强大。如下面为基于回调函数的Ajax操作:
request.onreadystatechange = function () {
if (request.readyState === 4) {
if (request.status === 200) {
return success(request.responseText);
} else {
return fail(request.status);
}
}
}
通过分析,我们发现回调一个很大的问题,就是层层嵌套的回调函数,当代码量较大的时候,将难以维护。
所谓Promise,提供了另外一种链式的异步方案。
var ajax = ajaxGet('http://...');
ajax.ifSuccess(success)
.ifFail(fail);
先统一执行AJAX逻辑,不关心如何处理结果,然后,根据结果是成功还是失败,在将来的某个时候调用success函数或fail函数。古人云:“君子一诺千金”,这种“承诺将来会执行”的对象在JavaScript中称为Promise对象。
异步操作完成后,将可以设置Promise的状态,他有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败),一旦设置好后任何操作都无法改变这个状态,并且任何时候都可以得到这个状态。
基本用法
基本语法如下:
const promise = new Promise(function (resolve, reject) {
//....some code
if(/*异步操作成功*/ )
resolve(value)
else
reject(error)
});
Promise构造函数接收一个函数作为参数,该函数的两个参数分别是resolve、reject(由JS提供,不需要自己提供)
- resolve函数将Promise对象的状态从“未完成”变为“成功”,在异步操作成功时调用,并将异步操作的结果,作为参数传递出去。
- reject函数将Promise对象的状态从“未完成”变为“失败”,在异步操作失败是调用,并将异步操作的错误,作为参数传递出去。
Promise实例生成以后,可以用then方法分别指定reolved状态和rejected状态的回调函数。
promise.then(function(value) {
// success
}, function(error) {
// failure
});
then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用,第二个回调函数是Promise对象的状态变为rejected时调用。其中,第二个函数是可选的,不一定要提供。这两个函数都接受Promise对象传出的值作为参数。
实例
const promise = new Promise((resolve, reject) => {
console.log("Promise")
resolve();
});
promise.then(()=>{
console.log("Resolve")
})
console.log("Hi")
上面代码中,Promise新建后立即运行,所以首先输出的是Promise。然后,then方法指定的回调函数,将在当前脚本所有同步任务执行完才会执行,所以resolved最后输出。
一般来说,调用resolve或reject以后,Promise 的使命就完成了,后继操作应该放到then方法里面,而不应该直接写在resolve或reject的后面。所以,最好在它们前面加上return语句,这样就不会有意外。
new Promise((resolve, reject) => {
return resolve(1);
// 后面的语句不会执行
console.log(2);
})
JavaScript:学习笔记(9)——Promise对象的更多相关文章
- JavaScript:学习笔记(10)——XMLHttpRequest对象
JavaScript:学习笔记(10)——XMLHttpRequest对象 XHR对象 使用XMLHttpRequest (XHR)对象可以与服务器交互.您可以从URL获取数据,而无需让整个的页面刷新 ...
- Javascript学习笔记——操作浏览器对象
Javascript学习笔记 目前尝试利用javascript去对于一个浏览器对象完成一系列的访问及修改, 浏览器是网页显示.运行的平台,常用的浏览器有IE.火狐(Firefox).谷歌(Chrome ...
- javascript学习笔记02--面向对象学习
js面向对象编程 1. javascript 是一种基于对象的编程 object-based(基于对象):遇到的所有对象都是对象2.javascript没有类class,但是有新的原型对象,习 ...
- JavaScript学习笔记之原型对象
本文是学习<JavaScript高级程序设计>第六章的笔记. JS中,便于批量创建对象的三种模式: 1.工厂模式:用一个函数封装创建对象的细节,传入必要的参数,在函数内部new一个对象并返 ...
- JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...
- 1.4(JavaScript学习笔记) window对象的属性及方法
一.window对象 window对象代表当前窗口,所有全局对象都是windows的属性, 例如document是window的属性,window.document.writer("&quo ...
- JavaScript学习笔记之BOM对象
目录 1.Window 2.Window Screen 3.Window Location 4.Window History 5.Window Navigator 浏览器对象模型(Browser Ob ...
- JavaScript学习笔记之DOM对象
目录 1.Document 2.Element 3.Attribute 4.Event 1.Document 每个载入浏览器的 HTML 文档都会成为 Document 对象,Document 对象允 ...
- JavaScript学习笔记-正则表达式(RegExp对象)
正则表达式(RegExp对象) 1.正则表达式字面量,在脚本加载后编译.若你的正则表达式是常量,使用这种方式可以获得更好的性能,重复使用时不会重新编译: 2.使用构造函数创建的RegExp,提供了 ...
随机推荐
- MFC显示bmp图像
有了bmp文件读写的基础,我们就能够開始用MFC显示BMP图片了. 在这里,事实上微软为我们提供了一个实现bmp文件显示的框架,名叫diblook,我们能够先下载下来看看. 以下上链接:DIBLOOK ...
- 阿里Java开发手冊之编程规约
对于程序猿来说,编程规范能够养成良好的编程习惯,提高代码质量,减少沟通成本.就在2月9号,阿里出了一份Java开发手冊(正式版),分为编程规约.异常日志.MySQL规约,project规约.安全规约五 ...
- 编程之美 海量数据寻找 K 大数
1. 使用最小堆, 设置最小堆的大小为K, 仅需遍历一遍即可 2. 寻找最大的 K 个数实质上是寻找第 K 大的数. 通过二分法在区间内不断校正 mid 的值来找到 pivot, 时间复杂度为 o(N ...
- golang中context包学习
摘要 go语言中goroutine之间的关联关系,缺乏维护,在erlang中有专门的机制来保障新开仟程的生命周期, 在go语言中,只能通过channel + select来实现,但不够直观,感觉很绕. ...
- Jquery判断某个标签 Id是否存在
query判断某个标签 Id是否存在, 如果是下面的 jQuery 代码判断一个对象是否存在,是不能用的 if($("#id")){}else{} 因为 $(“#id”) 不管对象 ...
- Windows 2012 Server评估版本安装问题处理
由于工作需要,在微软官方网站下载了一个Windows2012评估版本,地址:http://technet.microsoft.com/zh-cn/evalcenter/hh670538.aspx 在通 ...
- Spring Security OAuth2 源码分析
Spring Security OAuth2 主要两部分功能:1.生成token,2.验证token,最大概的流程进行了一次梳理 1.Server端生成token (post /oauth/token ...
- Ubuntu安装atom
sudo add-apt-repository ppa:webupd8team/atom sudo apt-get update sudo apt-get install atom 安装的时如果报错, ...
- Windows MFC 打开文本
MFC的CFileDialog自动封装了文件相关的对话框,提供一种简单的文件打开和文件存盘对话框功能. 要使用CFileDialog类,首先要构造一个对象, 项目实例: CFileDialog fil ...
- Javascript 香港身份证号校验
<!DOCTYPE html> <html> <head> <title>香港身份证校验码计算</title> </head> ...