【学习笔记】浅析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对象有两大特点：

1. 对象的状态不受外界影响。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原理和特性梳理清楚，文章不足之处还请谅解