利用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()
   })