ES6-Promise异步请求解决方案

IT基础系列

前言

这是一门知识补充课

我们编写的JavaScript代码实际上是单线程的程序，那就决定了我们的代码是一行一行的顺序执行的，处理一些简短、快速的运算操作时主线程就够了，如果在同步程序中发送了网络请求，如果超时了，下面的代码依赖于网络请求，那么整个网页将会失去响应。

而异步的概念则与同步恰恰相反，一个异步过程的执行将不再与原有的序列有顺序关系，特别是对发送网络请求，不确保响应时间时候，异步是最优选择，网络请求无论多长时间，程序将不会在此等待，直接走下面的代码，等异步的请求有了响应，主线程几乎不用关心异步任务的状态了，自己完成回调后续的操作，程序间互不影响。

简单来理解：同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效率更高。

现在是前端常用的方式–异步

为什么使用Promise

“回调地狱”这个词，不知道大家听过没有，就是异步调用获取到结果后，为下一个异步函数提供参数，所以就会一层一层的出现回调里面嵌入回调，导致层次很深，代码维护起来特别的复杂

以一个uni 案例

getData(){
   
   
  //获取分类列表id
  uni.request({
   
   
    url:"https://ku.qingnian8.com/dataApi/news/navlist.php",
    success:res=>{
   
   
      let id=res.data[0].id
      // 根据分类id获取该分类下的所有文章
      uni.request({
   
   
        url:"https://ku.qingnian8.com/dataApi/news/newslist.php",
        data:{
   
   
          cid:id
        },
        success:res2=>{
   
   
          //获取到一篇文章的id，根据文章id找到该文章下的评论
          let id=res2.data[0].id;
          uni.request({
   
   
            url:"https://ku.qingnian8.com/dataApi/news/comment.php",
            data:{
   
   
              aid:id
            },
            success:res3=>{
   
   
              //找到该文章下所有的评论
              console.log(res3)
            }
          })
        }
      })

    }
  })
}

这个代码中出现了嵌套，俄罗斯套娃。后期维护麻烦

用函数封装的思想，封装请求

调用部分

//在onload初始化后调用相应的函数
onLoad() {