利用Promise的then链解决获取数据时候的异步
一、概述产生问题原因
我们在调用接口数据的时候有时候需要涉及到顺序的问题,或者这边的接口赋值完全之后再去执行什么方法,如果我们获取数据的方式是异步的,那这时候就需要我们进行处理使之同步执行,即挨个执行。怎么使本来是异步执行的变成按照顺序的同步执行呢?
二、解决方式 :Promise的then链
1、Promise的简介
我们知道,promise是es6提供的一个对象,不受外界的影响。Promise对象代表一个异步操作,有三种状态:
- pending: 初始状态,不是成功或失败状态
- fulfilled: 意味着操作成功完成。
- rejected: 意味着操作失败
特点:状态一旦确定就不再改变了。
作用:解决回调地狱问题;解决异步
1.1、Promise对象的创建方式
var promise = new Promise((resolve,reject)=>{
// 异步处理
// 处理结束后、调用resolve回调函数 或 reject回调函数
})
1.2、封装promise对象函数
function myPromise(){
return new Promise((resolve,reject)=>{
// 异步处理
// 处理结束后、调用resolve回调函数 或 reject回调函数
})
}
1.3、Promise的then链
1.3.1、写法一
var promise = new Promise((resolve,reject)=>{
// 成功返回
if(条件一){
resolve('任意值')
} else {
reject('err')
}
})
promise.then((res)=>{
console.log(res) // 任意值
})
// 条件一不满足执行
promise.catch((err)=>{
console.log(err) // err
})
1.3.1、写法二
var promise = new Promise((resolve,reject)=>{
// 成功返回
if(条件一){
resolve('任意值')
} else {
reject('err')
}
}).then(res=>{
// 条件一满足执行,不满足不执行
console.log(res) // 任意值
}).catch(err=>{
// 如果条件一不满足,执行
console.log(err) // err
})
注意一:then链是按照顺序执行的
注意二:如果是多个then,那么上一个then必须返回Promise对象才能接受到上一个then的返回结果,否则接受的是undefined
注意三:Promise本身是同步的,但是then是异步的
例子
var a = 1
var promise = new Promise((resolve,reject)=>{
// 成功返回
if(a==1){
resolve('任意值')
} else {
reject('err')
}
}).then(res=>{
console.log('then')
console.log(res) // 任意值
}).then(res1=>{
console.log(res1) // undefined
}).catch(err=>{
console.log(err) // err
})
二、Promise的then链解决异步
// 封装的Promise对象方法
Marquee: function() {
let param = {
id:'1'
}
return new Promise((resolve,reject)=>{
resolve(util.post(api.Marquee(), param))
}).then(res=>{
if(res.Result){
this.setData({
noticeDataList: res.Data
})
let noticeData = this.data.noticeDataList[0]
noticeData['index'] = 0
this.setData({
noticeData: noticeData
})
}
})
},
// 在需要解决异步的地方使用,这样一来,虽然获取数据的方法是异步的,也可以实现先获得数据再挨个执行then里面的方法了
that.Marquee().then(()=>{
that.timeOutUpdateNotice()
that.getBrandInfoWall()
that.getPosition()
that.judgeMorning()
})