vue-promise介绍和使用

 

 

 　　Promise能解决上面回调地狱引起的代码可读性特别差的问题，记住！promise并不会说有什么特别额外的功能，他就是把上面这种层层回调的代码变得结构清晰，可读性变高；

　　为什么promise能使用其可读性变高呢？平时进行ajax异步请求和回调函数时是耦合在一起的，因此有时候看起来特别不美观，而promise就把异步请求和回调函数中的代码进行了分离，看如下代码：

　　未使用promise前：

$.get("test.cgi", {
        name: "John",
        time: "2pm"
      },
      function (data) {
        alert("Data Loaded: " + data);
        alert("Data Loaded: " + data);
        alert("Data Loaded: " + data);
        alert("Data Loaded: " + data);
        alert("Data Loaded: " + data);
        alert("Data Loaded: " + data);
        alert("Data Loaded: " + data);
});     

　　使用promise后：

  new Promise((resolve, reject) => {
    //执行异步请求
    $.get("test.cgi", {
        name: "John",
        time: "2pm"
      },
      function (data) {
        resolve(data)
      });
  }).then(data => {
    alert("Data Loaded: " + data);
    alert("Data Loaded: " + data);
    alert("Data Loaded: " + data);
    alert("Data Loaded: " + data);
    alert("Data Loaded: " + data);
    alert("Data Loaded: " + data);
    alert("Data Loaded: " + data);
  })

　　稍微解析下，resolve和reject都是函数，当执行resolve函数时，相当调用后面的then方法，resolve传入什么参数，then就可接受什么参数；reject函数会调用catch方法，上面没有写，一般是请求成功就调用resolve进而then处理，失败调用reject进而catch处理。

　　我们发现，异步请求的代码放在了new Promise（），回调函数要处理的代码放在的then()，这就实现了异步请求和回调后的处理代码的分离。promise可以理解成是对 异步操作的一个封装，仅仅是封装，别想太多了，异步请求和回调该咋执行还咋执行。