当前位置：首页 > article >正文

ES6 Promise的用法

article 2024/12/25 14:30:37

学习链接：ES6 Promise的用法，ES7 async/await异步处理同步化，异步处理进化史_哔哩哔哩_bilibili

一、同步与异步区别

1.JavaScript代码是单线程的程序，即通过一行一行代码顺序执行，即同步概念。

2.若处理一些简短、快速的运算操作时主线程就够了；若在同步程序出现了网络请求，当网络请求超时时，下面的代码依赖于网络请求，整个网页会失去响应。

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

4.如果涉及到网络请求没有依赖关系的话，异步请求是效率最高的，但是下一个的方法依赖于上一个网络请求的结果，那么就必须使用await命令，将异步结果等待返回之后再执行后面的代码。

二、使用Promise的原因

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

例：通过分类id获取该分类id下的文章，再通过文章的id获取该文章id下的评论

promise是解决异步的方法，本质上是一个构造函数，可以用它实例化一个对象。对象身上有resolve、reject、all，原型上有then、catch方法。promise对象有三种状态：pending（初识状态/进行中）、resolved或fulfilled（成功）、rejected（失败)，能够有效解决“回调函数”。

pending： "待定的，将发生的"，相当于是一个初始状态。创建Promise对象时，且没有调用resolve或者是reject方法，相当于是初始状态。这个初始状态会随着你调用resolve，或者是reject函数而切换到另一种状态。
resolved：“解决了”。要实现从pending到resolved的转变，需要在创建Promise对象时，在函数体中调用了resolve方法
rejected：“拒绝，失败”。要实现从pending到rejected的转换，只需要在创建Promise对象时，调用reject函数

三、将回调函数修改为promise方案

函数返回promise对象

methods: {
    //先获取导航分类接口，将结果进行返回，到调用函数的地方获取
    getNav(callback){
      return new Promise((resolve,reject)=>{
        uni.request({
          url:"https://ku.qingnian8.com/dataApi/news/navlist.php",
          success:res=>{
            resolve(res)
          },
          fail:err=>{
            reject(err)
          }
        })
      })
    },


    //获取文章数据，将文章列表进行返回
    getArticle(id){
      return new Promise((resolve,reject)=>{
        uni.request({
          url:"https://ku.qingnian8.com/dataApi/news/newslist.php",
          data:{
            cid:id
          },
          success:res=>{
            resolve(res)
          },
          fail:err=>{
            reject(err)
          }
        })
      })
    },

      //获取文章下的所有评论
      getComment(id){
        return new Promise((resolve,reject)=>{
          uni.request({
            url:"https://ku.qingnian8.com/dataApi/news/comment.php",
            data:{
              aid:id
            },
            success:res=>{
              resolve(res)
            },
            fail:err=>{
              reject(err)
            }
          })
        })

}

.then的链式调用函数


this.getNav().then(res=>{
  let id=res.data[0].id;
  return this.getArticle(id);
}).then(res=>{
  let id=res.data[0].id;
  return this.getComment(id)
}).then(res=>{
  console.log(res)
}) 作者：咸虾米_ https://www.bilibili.com/read/cv18799030/?spm_id_from=333.999.0.0 出处：bilibili

Promise.all封装多个对象统一，可在页面开始前设置loading，当三个请求全部完毕后再进行关闭loading，异步函数同步化

let p1 = this.getNav()

let p2 = this.getList(51)

let p3 = this.getComment(51)

Promise.all([p1,p2,p3]).then(res=>{
    console.log(res)
}

四、await / async ES7的新规范，异步处理同步化

这两个命令是成对出现的，如果使用await没有在函数中使用async命令，那就会报错，如果直接使用async没有使用await不会报错，只是返回的函数是个promise，可以，但是没有意义，所以这两个一起使用才会发挥出它们本身重要的作用。

用await+异步请求时，会等待异步请求结束后再进行后续操作，即异步请求同步化

async onLoad() {
  let id,res;
  res=await this.getNav();
  id=res.data[0].id;
  res=await this.getArticle(id);
  id=res.data[0].id;
  res=await this.getComment(id);
  console.log(res)
} 作者：咸虾米_ https://www.bilibili.com/read/cv18799030/?spm_id_from=333.999.0.0 出处：bilibili

查看全文

http://www.kler.cn/a/355103.html