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最后输出

  一般来说,调用resolvereject以后,Promise 的使命就完成了,后继操作应该放到then方法里面,而不应该直接写在resolvereject的后面。所以,最好在它们前面加上return语句,这样就不会有意外。

new Promise((resolve, reject) => {
return resolve(1);
// 后面的语句不会执行
console.log(2);
})

  

JavaScript:学习笔记(9)——Promise对象的更多相关文章

  1. JavaScript:学习笔记(10)——XMLHttpRequest对象

    JavaScript:学习笔记(10)——XMLHttpRequest对象 XHR对象 使用XMLHttpRequest (XHR)对象可以与服务器交互.您可以从URL获取数据,而无需让整个的页面刷新 ...

  2. Javascript学习笔记——操作浏览器对象

    Javascript学习笔记 目前尝试利用javascript去对于一个浏览器对象完成一系列的访问及修改, 浏览器是网页显示.运行的平台,常用的浏览器有IE.火狐(Firefox).谷歌(Chrome ...

  3. javascript学习笔记02--面向对象学习

    js面向对象编程 1.  javascript 是一种基于对象的编程    object-based(基于对象):遇到的所有对象都是对象2.javascript没有类class,但是有新的原型对象,习 ...

  4. JavaScript学习笔记之原型对象

    本文是学习<JavaScript高级程序设计>第六章的笔记. JS中,便于批量创建对象的三种模式: 1.工厂模式:用一个函数封装创建对象的细节,传入必要的参数,在函数内部new一个对象并返 ...

  5. JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  6. 1.4(JavaScript学习笔记) window对象的属性及方法

    一.window对象 window对象代表当前窗口,所有全局对象都是windows的属性, 例如document是window的属性,window.document.writer("&quo ...

  7. JavaScript学习笔记之BOM对象

    目录 1.Window 2.Window Screen 3.Window Location 4.Window History 5.Window Navigator 浏览器对象模型(Browser Ob ...

  8. JavaScript学习笔记之DOM对象

    目录 1.Document 2.Element 3.Attribute 4.Event 1.Document 每个载入浏览器的 HTML 文档都会成为 Document 对象,Document 对象允 ...

  9. JavaScript学习笔记-正则表达式(RegExp对象)

    正则表达式(RegExp对象)   1.正则表达式字面量,在脚本加载后编译.若你的正则表达式是常量,使用这种方式可以获得更好的性能,重复使用时不会重新编译: 2.使用构造函数创建的RegExp,提供了 ...

随机推荐

  1. MFC显示bmp图像

    有了bmp文件读写的基础,我们就能够開始用MFC显示BMP图片了. 在这里,事实上微软为我们提供了一个实现bmp文件显示的框架,名叫diblook,我们能够先下载下来看看. 以下上链接:DIBLOOK ...

  2. 阿里Java开发手冊之编程规约

    对于程序猿来说,编程规范能够养成良好的编程习惯,提高代码质量,减少沟通成本.就在2月9号,阿里出了一份Java开发手冊(正式版),分为编程规约.异常日志.MySQL规约,project规约.安全规约五 ...

  3. 编程之美 海量数据寻找 K 大数

    1. 使用最小堆, 设置最小堆的大小为K, 仅需遍历一遍即可 2. 寻找最大的 K 个数实质上是寻找第 K 大的数. 通过二分法在区间内不断校正 mid 的值来找到 pivot, 时间复杂度为 o(N ...

  4. golang中context包学习

    摘要 go语言中goroutine之间的关联关系,缺乏维护,在erlang中有专门的机制来保障新开仟程的生命周期, 在go语言中,只能通过channel + select来实现,但不够直观,感觉很绕. ...

  5. Jquery判断某个标签 Id是否存在

    query判断某个标签 Id是否存在, 如果是下面的 jQuery 代码判断一个对象是否存在,是不能用的 if($("#id")){}else{} 因为 $(“#id”) 不管对象 ...

  6. Windows 2012 Server评估版本安装问题处理

    由于工作需要,在微软官方网站下载了一个Windows2012评估版本,地址:http://technet.microsoft.com/zh-cn/evalcenter/hh670538.aspx 在通 ...

  7. Spring Security OAuth2 源码分析

    Spring Security OAuth2 主要两部分功能:1.生成token,2.验证token,最大概的流程进行了一次梳理 1.Server端生成token (post /oauth/token ...

  8. Ubuntu安装atom

    sudo add-apt-repository ppa:webupd8team/atom sudo apt-get update sudo apt-get install atom 安装的时如果报错, ...

  9. Windows MFC 打开文本

    MFC的CFileDialog自动封装了文件相关的对话框,提供一种简单的文件打开和文件存盘对话框功能. 要使用CFileDialog类,首先要构造一个对象, 项目实例: CFileDialog fil ...

  10. Javascript 香港身份证号校验

    <!DOCTYPE html> <html> <head> <title>香港身份证校验码计算</title> </head> ...