vue中异步遇到到的坑(解决axiso异步执行问题)
项目中出现一个接口不同界面反复调用的情况时候,通常呢都会去做一步分装,直接调用。在这个过程中,就会出现一个坑,调用及执行了,导致封装方法中return的数据还没拿到,就已经执行。下面看一下问题出现时的写法去相应界面进行调用此时的结果是拿不到值。那么改如何解决这个问题,下面提供了两种方式进行封装代码。去相应界面调用的方法是一样的。方式一: 用Promiseexp...
·
项目中出现一个接口不同界面反复调用的情况时候,通常呢都会去做一步分装,直接调用。
在这个过程中,就会出现一个坑,调用及执行了,导致封装方法中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 })
更多推荐
已为社区贡献13条内容
所有评论(0)