微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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)
    })
  })
}

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐