学习链接: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