Use Promise's then chain to solve the asynchrony when getting data
1. Outline the cause of the problem
When we call interface data, sometimes we need to involve the issue of order, or what method to execute after the interface assignment here is complete. If the way we obtain data is asynchronous, then we need to process it at this time to make it Execute synchronously, that is, execute one by one. How to make what was originally executed asynchronously become synchronously executed in sequence?
2. Solution: Promise's then chain
1. Introduction to Promise
We know that promise is an object provided by es6, which is not affected by the outside world. The Promise object represents an asynchronous operation and has three states:
- pending: the initial state, not a success or failure state
- fulfilled: means the operation completed successfully.
- rejected: means the operation failed
Features: Once the state is determined, it will not change.
Role: solve the callback hell problem; solve asynchronous
1.1, the creation method of Promise object
var promise = new Promise((resolve,reject)=>{
// 异步处理
// 处理结束后、调用resolve回调函数 或 reject回调函数
})
1.2. Encapsulate the promise object function
function myPromise(){
return new Promise((resolve,reject)=>{
// 异步处理
// 处理结束后、调用resolve回调函数 或 reject回调函数
})
}
1.3, then chain of Promise
1.3.1, writing method 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, writing method two
var promise = new Promise((resolve,reject)=>{
// 成功返回
if(条件一){
resolve('任意值')
} else {
reject('err')
}
}).then(res=>{
// 条件一满足执行，不满足不执行
console.log(res) // 任意值
}).catch(err=>{
// 如果条件一不满足，执行
console.log(err) // err
})
Note 1: the then chain is executed in order
Note 2: If there are multiple then, then the previous then must return a Promise object to receive the return result of the previous then, otherwise it accepts undefined
Note 3: Promise itself is synchronous , but then is asynchronous
Example
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
})
2. Promise's then chain solves asynchrony
// 封装的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()
})