vue 数据请求应该封装到公用组件里面吗？

Question

vue 数据请求应该封装到公用组件里面吗？比如说有一个下拉框,会从服务端拉取下拉选项，很多地方都会用到,于是就把请求封装进去。但是有一个问题，在同一个页面多次使用这个下拉框的时候,该请求会被请求多次。但是其实理论上只要获取一次接口就好，有点矛盾啊。

Answer 1

每个组件都获取一次，当然会有很多次。放到各组件都能访问的地方，就可以只取一次。
vuex就提供了这个便利，你可以actions里放请求，如果检查到已经获取，就不再重新获取。

Answer 2

可以看一下单例模式

可能你之前是这样调用的，每次创建组件都会请求

function fetchList(){
    // 请求接口 返回promise
}

default exports {
    data(){
        return: {
            list: []
        }
    },
    created() {
        fetchList().then(res => {
            this.list = res
        })
    }
}

利用promise的特性小改一下就行了

function fetchList(){
    // 请求接口 返回promise
}

const promiseList = fetchList()

default exports {
    data(){
        return: {
            list: []
        }
    },
    created() {
        promiseList.then(res => {
            this.list = res
        })
    }
}

上面这个是在初始化的时候调用一次，不想初始化调用可以使用懒汉式的单例

let promiseResult = null
function fetchList(){
    if(promiseResult) return promiseResult
    else {
      return (promiseResult = 请求接口 返回promise)
    }
}

// 第一次调用才会请求接口，后续调用使用缓存的promise
fetchList()
fetchList()
fetchList()

Answer 3

1.用Vuex把数据储存起来,调用接口的时候先判断数据是否存在,存在就取,不存在就调用。
2.用Vuex的actions。