Vue 中封装 Axios 请求，拥抱优雅开发体验

在前端开发的世界中，发起 HTTP 请求是不可避免的任务。为了简化这一过程，Axios 应运而生，它是一个轻量级且功能强大的 JavaScript HTTP 客户端库。通过将 Axios 与 Vue.js 相结合，我们可以更轻松地管理我们的网络请求，享受更加流畅的开发体验。

安装 Axios

首先，我们需要在我们的 Vue.js 项目中安装 Axios：

npm install axios

创建 Request.js（使用 Element UI）

接下来，我们将创建一个名为 request.js 的文件，它将容纳我们的 Axios 请求封装：

import axios from "axios";
import { Message } from "element-ui";

const service = axios.create({
  baseURL: process of.env.VUE_APP_API_URL,
  timeout: 5000, // 请求超时时间
});

// 请求拦截器
service.interceptors.request.use(
  (config) => {
    // 在发送请求之前做一些事情
    return config;
  },
  (error) => {
    // 处理请求错误
    Message.error("请求发送失败，请检查网络或服务端");
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  (response) => {
    // 在收到响应之前做一些事情
    const res = response.data;
    if (res.code !== 0) {
      Message.error(res.msg || "服务器响应异常");
      return Promise.reject(new Error(res.msg || "服务器响应异常"));
    }
    return res.data;
  },
  (error) => {
    // 处理响应错误
    Message.error("服务器响应异常，请检查服务端");
    return Promise.reject(error);
  }
);

export default service;

在 Main.js 中全局引用

在我们的 main.js 文件中，我们需要全局引用我们创建的 request.js：

import Vue from "vue";
import request from "./request.js";

Vue.prototype.$request = request;

在页面接口使用

现在，我们可以轻松地使用我们封装的 Axios 请求：

import { ref } from "vue";

export default {
  setup() {
    const data = ref([]);

    const fetchData = async () => {
      const res = await this.$request.get("/api/data");
      data.value = res.data;
    };

    fetchData();

    return {
      data,
    };
  },
};

结论

通过将 Axios 与 Vue.js 相结合，我们大大简化了网络请求的过程。使用我们创建的 request.js 模块，我们可以轻松地处理请求和响应，同时使用 Element UI 的消息提示，我们可以向用户提供友好的反馈。这种封装方法不仅提高了我们的开发效率，还增强了我们的代码可读性和可维护性。