Vue中使用axios，把所以请求方法放在同一个JS中

Question

在一个Vue项目中看到过，所有的axios请求方法都在一个js文件里面，而且可以创建多个js文件来管理这些方法，现在想在项目中使用，但是写不出来。请问应该怎么写？好像是有个index.js文件，引入其他的js文件，然后暴露出去。

Answer 1

给你个参考吧

order.js

import axios from 'axios'

let base = '/api/v1/order'

const order = {
  getList  : params => axios.get(`${base}`, {params}),
  getDetail: id     => axios.get(`${base}/${id}`),
  delete   : id     => axios.delete(`${base}/${id}`),
  add      : params => axios.post(`${base}`, params),
  update   : params => axios.put(`${base}/${params.id}`, params),
}

export default order

index.js

import orderModel from './order'

export {
  orderModel
}

Answer 2

是不是类似这样，写一个js文件，比如api.js,

import axios from 'axios';
const http = axios.create({ baseURL: 'http://xxx.yyy.zzz:3000/' });
export default {
    getXXX(para) {
        return http.get(`url/${para}`)
    },
    setYYY() {
        return http.post('other/url');
    }
};

用的时候，比如在vuex store里，可以这样：

import api from './api';
actions: {
    setXXX({ commit }, para) {
        return api.getXXX(para).then(({ data }) => {
            commit('XXX', data);
        });
    }
}

当然，如果一个js文件写不完，可以写多个js，放在一个目录下，用一个index.js，把他们都再export出来，使用的时候多加一级，比如api.moudleA.getXXX, api.moudleB.setYYY ...