vue中异步遇到到的坑（解决axiso异步执行问题）

项目中出现一个接口不同界面反复调用的情况时候，通常呢都会去做一步分装，直接调用。

在这个过程中，就会出现一个坑，调用及执行了，导致封装方法中return的数据还没拿到，就已经执行。

下面看一下问题出现时的写法

去相应界面进行调用

此时的结果是拿不到值。

那么改如何解决这个问题，下面提供了两种方式进行封装代码。去相应界面调用的方法是一样的。

方式一： 用Promise

export function getSelectData (data){
  let obj = new Promise(function(resolve, reject){
    if(resolve){
      axios({
        url: data == 'college' ?  API.getCollegeData : API.getCompanyData,
        method: 'get',
      }).then(res => {
        if (res.data.code === '200') {
          let arr = []
          for(let it of res.data.data){
            if(data=='college'){
              arr.push({ 'label': it.college,'value':it.id })
            }else{
              arr.push({ 'label': it.companyName,'value':it.id })
            }
            resolve(arr)
          }
        } else if (res.data.code === '500') {
          this.$notify({
            message: res.data.message,
            type: 'error'
          })
        }
      }).catch(error => {
        throw error
      })
    }
  })
  return obj
}

方式二： async await

export async function getSelectData (data){
  let obj = []
  await axios({
    url: data == 'college' ?  API.getCollegeData : API.getCompanyData,
    method: 'get',
  }).then(res => {
    if (res.data.code === '200') {
      for(let it of res.data.data){
        if(data=='college'){
          obj.push({ 'label': it.college,'value':it.id })
        }else{
          obj.push({ 'label': it.companyName,'value':it.id })
        }
      }
      console.log(obj,data)
    } else if (res.data.code === '500') {
      this.$notify({
        message: res.data.message,
        type: 'error'
      })
    }
  }).catch(error => {
    throw error
  })
  return obj
}

此时再相应界面打印 console.log(getSelectData('college'),111),得到的是

就拿去到值了。此时我们需要用.then来取值，去相应界面进行调用。

getSelectData('college').then((res)=>{
  this.collogeOptions = res
})