前端,es6中的promise异步方法,及用的场景
网上看了些资料,总结以下几种方法
1,数据管道方法,这个方法用的场景:URL1请求返回的数据1,请求URL2的传参是数据1,返回数据2,请求URL3的参数是数据2.
new Promise(function(resolve, reject) {
resolve(1);
})
.then(function(res) {//1
return new Promise(function(resolve, reject) {
resolve(res+1);//2
});
})
.then(function(res) {
return new Promise(function(resolve, reject) {
resolve(res+1);//3
});
})
.then(function(res) {
console.log(res,"结果");//返回3
})
2.用promise请求url,return一个promise对象,解决异步方法嵌套问题
ajax(参数){
return new Promise((resolve, reject)=>{
ajax(参数,res=>{
if(res.status == '200'){
try{
resolve (JSON.parse(返回成功的结果))//返回成功的结果
} catch (e){
reject(e)//失败的结果
}
}
})
})
}
ajax(url).then(
res =>{
console.log(res))/返回成功的结果
}
)
.catch(err =>{
console.log(err)
})
3.promise.all, 使用场景请求多个ajax,放在一个变量里面,等到结果全部请求成功后供其他方法使用。
let list=(time)=>{
return new Promise((resolve, reject)=>{
setTimeout(()=>{
resolve(`${time/1000}秒后出来`)
},time)
})
}
let p1=list(3000)
let p2=list(2000)
Promise.all([p1,p2])
.then((res)=>{
//就算p1请求的时间长,也要等他数据出来后,才打印出[p1,p2]。这个谁放在前边,先请求谁。可以加载loading室使用这个方法
console.log(res)// ["3秒后出来", "2秒后出来"]
})
.catch((err)=>{
console.log(err)
})