js promise 的使用

promise

主要是处理异步函数的

浏览器端 异步函数有ajax，定时器，node服务器端的还有fs文件读写操作

举个例子

 $.ajax({
    url:"地址"，
    success:function（）｛
    console.log("数据下载完成")
｝
})

如果一个10个ajax这样的操作，要求：当10个请求所有请求都完成数据下载之后，触发console.log("所有的数据全部下载")这个事件，

第一种在回调函数里面写入下一个请求，最后一个请求success回调后触发console.log("数据下载完成")

 $.ajax({
    url:"地址1"，
    success:function（）｛
             $.ajax({
                url:"地址2"，
                success:function（）｛
                     $.ajax({
                        url:"地址3"，
                        success:function（）｛
                        ..................
                     ｝
                })
              ｝  
          })
    ｝
})

在每一个success成功回调函数里面写入下个请求，这样代码逐渐横向发展，并且请求一次时间平均为 1s的话，n次请求就是n秒，（因为是一个接一个的请求，不是同时发送请求）

，第二种方式是用定时器时刻判断 所有的数据是否下载完成

定时器太耗费性能，嵌套ajax请求的话，加长了请求时间，并且代码横向发展，不利于维护。

---

同时处理大量异步操作，promise 。

首先 我们来看看这个promise怎么用的

var promise  = new Promise((resolve,reject)=>{
        setTimeout(()=>{
              resolve("成功")
        },1000)
        setTimeout(()=>{
              reject("失败")
        },2000)
})

promise.then((data)=>{
    console.log(data)//输出成功，上面的resolve("成功")，这个resolve里面的数据传过来
 },(data)=>{
    console.log(data)//
})

t'hen(),里面有两个参数，两个参数都是函数，第一个函数里面的参数是resolve里面的数据，第二个函数里面的参数里面的数据是reject里面的数据。

new Promise(异步函数)来将异步函数封装成promise对象。

10个异步请求，所有的请求成功后执行console.log(“所有数据请求下载完成”)

1首先封装ajax请求为promise对象，

var promise1 = new Promise(function(resolve, reject){
    var client = new XMLHttpRequest();
    client.open("GET", url);
    client.onreadystatechange = handler;
    client.responseType = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send();
    function handler() {
        if (this.readyState !== 4) {
            return;
        }
        if (this.status === 200) {
            resolve(this.response);
        } else {=
            reject(new Error(this.statusText));
        }
    };
});

上面的代码就时一个ajax的promise对象，写上10个不同求请求的;

var promise1 = new Promise(....)
var promise2 = new Promise(....)
....

好，写完10个promise对象后，直接使用Promise.all这个方法，

Promise.all([promise1,promise2,promise3.......])
              .then((arr)=>{
                       console.log("所有数据已经下载完成")
                      console.log(arr)//这次参数是数组，数组的每一项都是上面promise每一个promise成功（调用resolve）是返回的数据，只要有个一个promise失败就调用then的第二个函数
                },(dd)=>{
                      console.log("有一个promise失败了(调用reject（）)")
                })

---

一个个创建promise1 promise2 这样的话还算什么程序员呢，来个工厂函数，

var getJSON = function(url) {
var promise = new Promise(function(resolve, reject){
    var client = new XMLHttpRequest();
    client.open("GET", url);
    client.onreadystatechange = handler;
    client.responseType = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send();
    function handler() {
        if (this.readyState !== 4) {
            return;
        }
        if (this.status === 200) {
            resolve(this.response);
        } else {
            reject(new Error(this.statusText));
        }
    };
});
return promise;
};
//直接创建n个请求promise。

var promises = ['地址1'，'地址2'，'地址3'，'地址4'，'地址5'，'地址6'，'地址7'].map((url)=>{
      return  getJSON(url)  
})
//然后这样搞定
Promise.all(promises)
              .then((res)=>{
                      console.log("所有的数据");
                      console.log(res)//res就是所有请求的数据)
              })

如果没记错promise应该就是设计模式里面的等待者模式