前言

  • 在前后端分离的项目中，都会涉及到很多接口的处理，这时候就需要定义规范统一的接口。
  • 统一管理接口可以做到API的复用。

引入axios

  • 在src目录下新建 apis 的文件夹，后台定义的所有接口都在这里定义

    1
    2
    cd src
    mkdir apis

  • 在 apis下新建config.js文件 ，引入axios做响应的配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    import axios from "axios";

    // 创建一个axios实例
    const service = axios.create({
      // baseURL: xxx
      // 请求超时时间
      timeout: 3000,
    });

    // 添加请求拦截器
    service.interceptors.request.use(
      (config) => {
        return config;
      },
      (err) => {
        console.log(err);
      },
    );

    //响应拦截
    service.interceptors.response.use(
      (response) => {
        let res = {};
        res.status = response.status;
        res.data = response.data;
        return res;
      },
      (err) => console.log(err),
    );

    export default service;

  • main.js中引入axios

    1
    2
    import http from "@/api/config"; //axios
    Vue.prototype.$http = http;

  • 使用： this.$http.

    1
    2
    3
    4
    5
    6
    7
    8
    methods: {
        getTableData() {
            this.$http.get('/home/getData').then(res => {
                res = res.data;
                this.tableData = res.data.tableData;
            });
        }
    },

API模块方式

  • 上面的方式是通过axios调用API， API的接口信息写在了方法中，我们可以按模块抽取。

  • 首先取消main.js中对axios的引入

    1
    2
    // import http from '@/api/config'; //axios
    // Vue.prototype.$http = http;

实现

  • 在apis目录下新建http.js, 内容同上面的 config.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    // export default service;
    /**
     * 使用es6的export default导出了一个函数，导出的函数代替axios去帮我们请求数据，
     * 函数的参数及返回值如下：
     * @param {String} method  请求的方法：get、post、delete、put
     * @param {String} url     请求的url:
     * @param {Object} data    请求的参数
     * @returns {Promise}     返回一个promise对象，其实就相当于axios请求数据的返回值
     */
    export default function (method, url, data = null) {
      method = method.toLowerCase();
      if (method == "post") {
        return service.post(url, data);
      } else if (method == "get") {
        return service.get(url, { params: data });
      } else if (method == "delete") {
        return service.delete(url, { params: data });
      } else if (method == "put") {
        return service.put(url, data);
      } else {
        console.error("未知的method" + method);
        return false;
      }
    }

  • 在apis目录下新建首页模块 Home.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    //Home.js 用于定义用户的登录、注册、注销等

    import req from "./http";

    //定义接口

    //在这里定义了一个登陆的接口，把登陆的接口暴露出去给组件使用
    export const LOGIN = (params) => req("post", "/operator/login", params);
    //这里使用了箭头函数，转换一下写法：
    //export const LOGIN=function(req){
    //    return req('post','/operator/login',params)
    //}

    //定义注册接口
    export const REG = (params) => req("post", "/operator/reg", params);
    //定义注销接口
    export const LOGOUT = (params) => req("post", "/operator/logout", params);

    export const getCountData = (params) =>
      req("get", "/home/getCountData", params);
    export const getTableLabel = (params) =>
      req("get", "/home/getTableLabel", params);
    export const getTableData = (params) =>
      req("get", "/home/getTableData", params);
    export const getEchartData = (params) =>
      req("get", "/home/getEchartData", params);

使用

  • 在组件中引入依赖即可

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    <script>
    // 导入的其他文件 例如：import moduleName from 'modulePath';
    import * as HomeApi from 'apis/home';
    export default {
      //方法集合
      methods: {
        initData() {
          HomeApi.getCountData().then(res => {
            this.countData = res.data;
          });
          HomeApi.getTableLabel().then(res => {
            this.tableLabel = res.data;
          });
          HomeApi.getTableData().then(res => {
            this.tableData = res.data;
          });
          HomeApi.getEchartData().then(res => {
            res = res.data;
            this.processData(res);
          });
        },

        //处理图形数据
        processData(res) {
           // ....
        }
      },

      //创建完成 访问当前this实例
      created() {
        this.initData();
      }
    };
    </script>