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.并且需要以下操作进行赋值
vue异步问题使用Promise解决记录
使用promise包装之后:
vue异步问题使用Promise解决记录
vue异步问题使用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)
    })
  })
}
上一篇:promise学习---改变 promise 状态和指定回调函数的先后


下一篇:⑨ 小程序运行时