[学习笔记]浅析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原理和特性梳理清楚，文章不足之处还请谅解

[学习笔记]浅析Promise函数

猜你喜欢