vue中Promise的用法介绍

promise是什么？ 1.promise是什么，它可以说是异步编程的一种解决方法，就拿传统的ajax发请求来说，单个还好，如果是一个请求回来的数据还要被其他请求调用，不断地嵌套，可想而知，代码看起来是很乱的，promise主要是为了解决这种情景而出现的。

2、主要用于异步计算

3、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果

4、可以在对象之间传递和操作promise，帮助我们处理队列

5、then和.catch都会返回一个Promise对象，我们可以使用Promise的方法，来传出一些数据，只要是调用了 resolve都是走then里面的代码块，只要是调用了reject，都会去找到catch的代码块，链式调用例子

6、链式调用简写，如果是Promise.resolve(data),可以直接返回数据，其默认会将数据封装到Promise对象并返回

为什么会有promise？

为了避免循环请求同一个接口，返回数据不按顺序返回问题；

/***
 * 同步请求接口
 */
 const PromiseForEach=(arr,cb)=>{
    let realResult = []
    let result = Promise.resolve()
    arr.forEach((a, index) => {
      result = result.then(() => {
        return cb(a).then((res) => {
          realResult.push(res)
        })
      })
    })
    return result.then(() => {
      return realResult
    })
  }  
  
export default function(Vue) {
    Vue.prototype.$GlobalFun = {        
        PromiseForEach
    }
}

main.js加入代码：
Vue.prototype.global = Global;

页面调用：

getSheet(id,time){
        this.tableData=[];
        let _self=this;
        let params={            
            id:parkid,
            time:time
          };          
          API.List(params).then(res => { 
            if (res.code == '200') {  
              this.waterData=res.data;   
              this.$GlobalFun.PromiseForEach(_self.waterData, (i) => {
                return new Promise((resolve, reject) => {                 
                  setTimeout(() => {
                    let attribute = {  
                      id:i.siteId,  
                      time: time
                    };  
                    API.Detail(attribute).then(result => { 
                    if(result.code == '200'){  
                        this.tableData.push({
                          siteName:i.siteName,
                          tabdata:result.data
                        });                                       
                    }else{
                      return false;
                    }            
                  })  
                   this.sum+=parseInt(i.polTracesouCount);   
                    return resolve(i);
                  }, 100);                 
                })
              }).then((data) => {
                console.log("成功");
              }).catch((err) => {
                console.log("失败");
              });              
            }else{
              console.log(res.code);
              return;
            }
          });          
      },