【学习笔记】浅析Promise函数
一、Promise是什么?
在JavaScript中,所有的代码都是单线程执行,所以javaScript的所有网络操作(“GET”/"POST"/"PUT"/"DELETE")以及浏览器事件("onload"/"onclick"/...)都是异步执行,异步执行的函数可以通过回调函数实现。
关于回调函数在知乎看到过一个很有意思的回答:
你到一个商店买东西,刚好你要的东西没有货,于是你在店员那里留下了你的电话,过了几天店里有货了,店员就打了你的电话,然后你接到电话后就到店里去取了货。在这个例子里,你的电话号码就叫回调函数,你把电话留给店员就叫登记回调函数,店里后来有货了叫做触发了回调关联的事件,店员给你打电话叫做调用回调函数,你到店里去取货叫做响应回调事件。
用setTimeout来实现异步操作
function callback (){ console.log("I'm a callback") } console.log("before setTimeout"); setTimeout (callback,2000); //两秒钟后执行callback console.log("after setTimeout") //观察Chrome 控制台输出 //before setTimeout //after setTimeout //2秒钟后 //I'm a callback
我们知道,AJAX是典型的异步操作引擎,但是代码量大也不利于复用,最好能写成链式操作,比如:
var ajax = ajaxGet('http://...'); ajax.ifSuccess(success).ifFail(fail);
不管处理结果如何,先执行AJAX逻辑,然后根据结果成功与否,在将来的某个时刻调用ifSuccess()或者ifFail()函数。
我们就把这种“承诺”在将来执行的对象,称为Promise对象。Promise对象有两大特点:
- 对象的状态不受外界影响。
Promise
对象代表一个异步操作,有三种状态:
pending
(进行中)fulfilled
(已成功)rejected
(已失败)
只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。
2. 一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise
对象的状态改变,只有两种可能:从pending
变为fulfilled
和从pending
变为rejected
。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果,这时就称为 resolved(已定型)。如果改变已经发生了,你再对Promise
对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。
二、Promise的基本用法
const promise = new Promise(function(resolve,reject){
if(/*异步操作成功*/){ resolve(value) }else{ reject(error) } })
上面的代码创建了一个promise实例,Promise构造函数接受一个函数作为参数,该函数又有两个JavaScript引擎部署的两个参数——resolve和reject,resolve会把promise从pending编程resolved,reject会把pending变为rejected。
promise指定了then()和catch()方法,then()方法第一个参数是resolved状态的回调函数,第二个参数(一般不使用)是rejected状态的回调函数。catch()方法是then(null,rejection)或者then(undefined,rejection)的别名,用于指定发生错误时的回调函数。
三、用promise对象实现AJAX操作
前面我们提到了,AJAX操作可以用promise对象进行简化,如下:
const getJSON = function(url) { //封装XMLHttpRequest
const promise = new Promise(function(resolve, reject){ const handler = function() { if (this.readyState !== 4) { return; } if (this.status === 200) { resolve(this.response); } else { reject(new Error(this.statusText)); } }; const client = new XMLHttpRequest(); client.open("GET", url); client.onreadystatechange = handler; client.responseType = "json"; client.setRequestHeader("Accept", "application/json"); client.send(); }); return promise; //返回promise对象 }; getJSON("/posts.json")
.then(function(json) { console.log('Contents: ' + json); }).catch(function(error) {
console.error('Contents: ' + error);
});
参考文献:廖雪峰的官方网站https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014345008539155e93fc16046d4bb7854943814c4f9dc2000
阮一峰:http://es6.ruanyifeng.com/#docs/promise
PS:最近一直在学vue框架,涉及到promise和AJAX以及node.js操作比较多,特别回顾了一下,把promise原理和特性梳理清楚,文章不足之处还请谅解