整个vue项目中如何优雅的组织axios请求（不是指axios封装）

Question

请教下：
你们vue项目中，怎么组织各个路由（页面）下的axios请求以及数据呢；（不是指封装axios，是指怎么在整个项目中用axios）
比如：我进入localhost:8080/news页面，想请求新闻列表数据；如果写在news.vue的methods方法中，怎么一进来/news页面就触发请求呢，还是都写在导航钩子router.beforeEach((to, from, next) => {})方法里面触发？

Answer 1

可以在created周期钩子里面调用请求方法函数触发请求

Answer 2

大概这样吧

axios.com.js //还是要封装下

import Axios from 'axios'
const Http = (path, method, domain) => {
     return (data, params) => {
        const url = domain + path;
        return Axios({
              method: method,
              url: url,
              data: data,
              params: params,
              }).then((response) => {
              const res = response.data;
              return res;
              }).catch((error) => {
              return error;
              });
    }
}
export function httpGet(path, domain) {
  return Http(path, 'get', domain);
}

api.js

import { httpGet} from './axios.com'; 
export default {
getGoodNew:httpGet('/news','localhost:5000')
}

main.js

import Vue from 'vue';
import Api from './api';
Vue.prototype.$Api = Api;
...
...
this.$Api.getGoodNew(data, params).then(res => {
//...
})

Answer 3

方法在methods里面定义，在其他生命周期钩子函数里调用