vue 通过请求获取数据return回来,不好使

vue里面在data里面定义了变量,想要通过http请求获取,使用return不好使,刷新的时候取缓存好使

直接this.获取好使,但是this.代码量比较大,还是希望return可以解决

相关代码

  created () {
    this.sydLb = this.getEnumTypeDict({ parentcode: '01' })
    this.sydJb = this.getEnumTypeDict({ parentcode: '04' })
  },
  
  methods: {
    getEnumTypeDict (params) {
      if (JSON.parse(window.localStorage.getItem(`sydJb${params.parentcode}`))) {
        return JSON.parse(window.localStorage.getItem(`sydJb${params.parentcode}`))
      }
      api.getEnumTypeDict(params).then(res => {
        if (res.status === 200 && res.data.code) {
          setLocalStorage(`sydJb${params.parentcode}`, res.data.data.data)
          return res.data.data.data
        }
      }).catch(error => {
        console.log(error)
      })
    }
  }

希望可以解决这个问题,使用this写两个方法实在有点麻烦

回答:

哈哈,好问题;大部分初学者都是犯这个错误;
你的代码里面其实有2个东西需要解释:

  1. 如何进行异步编程, 这个太大;其实你这里需要搞清楚 Promise
  2. 一个场景的问题: 同一个方法,即包含同步代码又包含异步代码 这个方法如何封装

第一个问题:
会想下,在没有 promise这样的语法的时候,我们怎么处理异步编程的? 答案是 回调函数,示例如下(用setTimeout 模拟异步)

function a(){
  setTimeout(()=>{
     /** 业务员代码 **
     return '123'
  },1000)
}

这个时候使用 a 函数的时候,你无法通过 let data = a() 得到任何值;因为 return 的语句执行在异步里面;可以理解为 let data = a() 这个先被执行完毕了之后,才会执行 return ; 所以需要通过回调解决

function a(func){
    setTimeout(()=>{
      if(typeof func === 'function'){
        func('123') // 这个时候就把123 这个结果给到了回调函数
      }
    },1000)
}

// 调用的地方
a(function(data){
    console.log(data) ;// 这个时候输出 123
})

ok,
那么,通过 Promise如果实现

function a(){
  return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('123')
        },1000)
  })
}
// 调用的地方
a()
.then(data=>{
  console.log(data);// 可以得到123
})
// 或者下面
let data = await a(); // 注意这段代码只能放在 `async`体内才能执行

所以:你的代码中 直接通过 return 不能拿到值

再说第二个问题: 这个场景很常见,就是如果本地缓有数据我就取本地缓存(这是同步),如果没有为就通过API获取(这是异步)

这种场景,为工作中常用的做法,就是把函数本身封装成 Promise;不管是同步还是异步都通过 异步去处理; 当然这里也推荐 使用 rxjs 解决问题; 因此你的代码改造如下

 async created () {
    this.sydLb = await this.getEnumTypeDict({ parentcode: '01' })
    this.sydJb = await this.getEnumTypeDict({ parentcode: '04' })
  },
  
  methods: {
    getEnumTypeDict (params) {
       let data = window.localStorage.getItem(`sydJb${params.parentcode}`); // 这里提出来,只是方便使用,和问题本身没关系
       return new Promise((resolve,reject)=>{
           if (data) {
              resolve(JSON.parse(data))
           }else{
               api.getEnumTypeDict(params)
               .then(res => {
                if (res.status === 200 && res.data.code) {
                  setLocalStorage(`sydJb${params.parentcode}`, res.data.data.data);
                  resolve(res.data.data.data)
                }else{
                  reject(new Error('这里写你自己的异常信息'))
                }
              }).catch(error => {
                reject(new Error(error.message  || '这里写你自己的异常信息'))
              })
           }
       })
    }
  }

回答:

async created () {
            this.sydLb = await this.getEnumTypeDict({ parentcode: '01' })
            this.sydJb = await this.getEnumTypeDict({ parentcode: '04' })
        },
        methods: {
            async getEnumTypeDict (params) {
                try {
                    if (JSON.parse(window.localStorage.getItem(`sydJb${params.parentcode}`))) {
                        return JSON.parse(window.localStorage.getItem(`sydJb${params.parentcode}`))
                    }
                    const res = api.getEnumTypeDict(params)
                    if (res.status === 200 && res.data.code) {
                        setLocalStorage(`sydJb${params.parentcode}`, res.data.data.data)
                        return res.data.data.data
                    }
                }
                catch(e) {
                    // 错误处理
                }
            }
        }

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注