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

Question

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写两个方法实在有点麻烦

Answer 1

哈哈，好问题；大部分初学者都是犯这个错误；
你的代码里面其实有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  || '这里写你自己的异常信息'))
              })
           }
       })
    }
  }

Answer 2

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) {
                    // 错误处理
                }
            }
        }