[JavaScript知识库]vue异步问题使用Promise解决记录

问题描述：

提示：使用Promise来解决前端异步问题
例如：
1.我们有一个程序拥有是三个步骤分别为 {1},{2},{3}
2.在我们执行{1}中需要去获取一个数组[a],而{2}中是需要使用数组[a]的
3.由于前端代码是异步执行，所以有可能我们还没完全获取到[a]时就会执行到{2}步骤，那么这个时候{2}就会出现异常
综上所述这就是我们所说的前端异步问题，本文章介绍使用promise来解决该类问题

promise：

promise是什么
例如：
1、主要用于异步计算
2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果
3、可以在对象之间传递和操作promise，帮助我们处理队列

解决思路：

1、 我们直接将数组[a]的来源操作整个变成一个函数请求
2、 之后我们在对需要使用对象进行赋值
理解：这样一来我们整个请求操作就是一个整体，需要整体完成之后在进行接下来的操作，因此可以避免异步问题

直接上代码：

1.我们需要一个叫allParkProtocolList的数组
2.并且需要以下操作进行赋值

使用promise包装之后：


源码

      initParkProtocol({
        'stationId': row.id
      }).then((res) => {
        this.findParam.allParkProtocolList = res
      })

import { queryAllParkProtocolApi } from '@/api/parameterSettingData'
// 加载枪数据
export function initParkProtocol(params) {
  return new Promise((resolve, reject) => {
    allParkProtocolArr = []
    allParkProtocolArr.push({ value: '无', label: '无', flag: '1' })
    queryAllParkProtocolApi(params).then(response => {
      var row = response.data.data
      for (const obj of row) {
        allParkProtocolArr.push({ value: obj.protocolName + '', label: obj.protocolName + '', flag: obj.standardFlag })
      }
      resolve(allParkProtocolArr)
    })
  })
}