手写JS之可翻页banner的需求实现（二）Promise动态异步获取数据

需求开发中遇到需要用ajax异步获取success中data的数据。

关于异步

JS是单线程的执行环境，好处是实现简单，缺点是在某个任务耗时时间很长的时候会造成浏览器无响应。针对这种情况，JS出现了同步和异步的概念。“异步”的意思是后任务不等前任务结束就执行，而前一个任务结束后，不是执行后一个任务，而是执行回调函数。 程序执行顺序与任务排列顺序是异步的。

如果要在后面获取异步操作内的数据，需要使用Promise或者async wait。

比如：如果我们需要把异步请求获得的数据添加到已经声明的数组中，实现如下。

Promise处理数据

Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。并且获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的。

由于我们的需求需要多次请求接口获取数据，故而去要用到all方法去处理多个Promise实例。

if(this.info){
   var asyncPostData=this.info.filter((item,index)=>{
       item.currentIndex = index;
       return item.category==)&&item.id
   })
   if(asyncPostData){
      Promise.all(asyncPostData.map((item)=>this.getPost(item.id,item.currentIndex))).then((result)=>{
       this.info.forEach((fItem,fIndex)=>{
          result.forEach((cItem)=>{
             if(fIndex===cItem.index){
                Vue.set(fItem,'postTitle',cItem.postTitle)
              }
          })
       })
   }).catch(function(error){
      console.log(error)
      })
   } 
}
this.$nextTick(()=>{
   this.info&&this.getIndexBanner(); 
})

Promise获取数据

Promise的构造函数接收一个参数，是函数，并且传入两个参数：resolve，reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。按照标准来讲，resolve是将Promise的状态置为fullfiled，reject是将Promise的状态置为rejected。

getPost(id,index){
    return new Promise((resolve,reject)=>{
       $.get('.../post/' + id, null, function (res) {
            if ((res.returnCode === 0)) {
                 if(res.body && res.body.commentsList&& res.body.commentsList.length>0){
                     resolve({index,postTitle:res.body.title}) 
                  }else {
                     resolve({index,postTitle:''});
                  }
             }else{
                 resolve(index,postTitle:''})
             }
        }.bind(this))
     })            
}

View展示数据

在使用vue框架的代码中，就可以直接使用模板表达式进行获取已经处理过的数据。

<span class="topicTitle" v-if="item.title" v-text="item.title"></span>
<span class="topicTitle" v-else>{{item.postTitle}}</span>