前端请求数据异步问题及处理方法

一、Promise.all方法

Promise.all( ).then()适用于处理多个异步任务,并且需要所有的异步任务都得到结果时的情况。
情况1:获取的列表数据需要另一个接口数据处理，如使用数据字典处理列表字段，
情况2:多个接口获取数据，并在全部获取完毕后统一处理

示例：

`定义两个异步任务`
    // 获取任务及数量
        async getTaskList(){
		let data={receiveStatus:false,complateStatus:false}
                return TaskList(data)
	}, 
    // 获取字典
         async getDictionary(){
		return Dictionary()
	},
 `初始化时调用Promise.all所在方法，并传入异步任务`
      mounted(){
             // 获取任务数量及字典		
             this.getTaskListAndDictionary(this.getDictionary(),this.getTaskList(),)
      }
  `Promise.all将执行完毕后的结果以数组方式回调`
  // 任务及字典全部执行完毕后抛出
        getTaskListAndDictionary(task1,task2){
            Promise.all([task1,task2]).then((res)=>{
                if(res[0].code===200 && res[1].code===200){
                      // 处理操作
                    }
		})
	},

二、Generator方法

Generator即生成器，是ES6新特性，function关键字与函数名之间有一个星号，函数体内部使用yield表达式，定义不同的内部状态，即使用yield标识暂停执行，使用next继续执行下一个yield标识的表达式，next执行会返回上一个函数的执行结果 { value:6, done:false/true },同时next可以接收参数。

情况1:初始化时两个异步任务执行，同时依赖于另一个异步任务的结果作为请求参数

示例：

`初始化时执行generator函数`
    async mounted() {
       let it = this.generator()
       
       const res=it.next()    // 执行第一个函数 并获取执行结果
       const value=await res.value // await 处理promise对象
        
       it.next(value)   // 执行第二个函数 并将第一个函数执行结果作为参数传入第二个函数中
  }, 
`具体执行`
   * generator() {
          let result = yield this.getClassifyList()
          yield this.getOneLevelList(result)
     },
    this.getClassifyList(){
        return promise的结果
    }
    this.getOneLevelList(result){
        // 获取到上一个函数的执行结果 result
    }