项目中出现一个接口不同界面反复调用的情况时候,通常呢都会去做一步分装,直接调用。
在这个过程中,就会出现一个坑,调用及执行了,导致封装方法中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 })