封装 axios GET 请求

应用开发时，常需要发送大量请求，而且每个请求间常常只有接口相对地址和查询参数不同，基本路径和请求函数都一样，所以，这里通过对 axios 的 GET 请求进行封装，使后台使用时仅需传入查询参数便可获取后台返回的数据。

一、使用 fastmock 配置后端接口

二、封装 axios GET 请求

• request.js。使用函数柯里化的方式，先传入路径 url，在返回的函数中，再传入参数 params。

import axios from "axios";

export default function (url) {
  return function (params) {
    return axios
      .get(url, params)
      .then((res) => {
        console.log(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  };
}

• index.js。导入 request.js 中的文件，并设置 url 的基本路径 baseURL，再将获取数据的回调函数导出。

import request from "./request";
const baseURL =
  "https://www.fastmock.site/mock/e68d869253f9e376375eb399ba932142/test";

const getApi1 = request(baseURL + "/api1");
const getApi2 = request(baseURL + "/api2");

export { getApi1, getApi2 };

• app.vue。导入 getApi1 和 getApi2，传入参数，获取相应的数据。

<template>
  <button id="app"
          @click="getApi1({ params: { id: '1' } })">
    点击我
  </button>
</template>

<script>
// const axios = require("axios")
import { getApi1, getApi2 } from "./api/index.js"
export default {
  methods: {
    getApi1,
    getApi2
  }
}
</script>

三、页面打印效果

• 调用 getApi1，传入参数 { params: { id: '1' } }

• 调用 getApi1，传入参数 { params: { id: '2' } }