• 2023-5-6 补充更新内容：跨域处理方式、环境变量、开发与生产环境配置

一、简介

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。

这是一个使用率很高的前端网络请求库，几乎所有的前端项目都会使用，本文主要介绍的是如何在vue项目中使用axios，并对其进行全面的封装。

二、安装

使用 npm：

npm install axios

使用 bower：

bower install axios

使用 cdn：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

安装完成后，在main.js中引入axios

const axios = require("axios"); 
Vue.prototype.$axios = axios;

三、封装

这里写的浅显直白点，按照步骤一点一点完成，即可顺利使用。

1. 第一步：封装请求配置

在src/utils目录下创建fetch.js文件，没有utils文件夹的可以自己创建。

// fetch.js
import router from "../router/index"; // 引入路由，token过期时返回登录页
import Cookies from "js-cookie"; // 引入Cookies插件，用来存储token
import { Message } from "element-ui"; // 引入element插件，进行错误提示，看项目需求，也可以不用

const axios = require("axios");
axios.defaults.headers["Content-Type"] = "application/json;charset=UTF-8";

const fetch = axios.create({
  timeout: 60 * 1000, // 设置超时时间
});

// 请求拦截器
fetch.interceptors.request.use(
  (config) => {
    const token = Cookies.get("token") || ""; // 设置token
    config.headers.common["Authorization"] = token;
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截器
fetch.interceptors.response.use(
  (res) => {
    // 当content-download==='1'，进行文件下载，判断条件与后端协商一致即可，此处只是举例
    if (res.headers["content-download"] === "1") {
      return res; // 此处返回res是因为需要在headers中获取文件名
    } else {
      // 其它状态码可自行进行补充，本文仅例举一项
      if (res.data.code === 500) {
        return Promise.reject(res.data);
      } else {
        if (res.data.code === 200) {
          return res.data;
        } else {
          return Promise.reject(res.data);
        }
      }
    }
  },
  (error) => {
    const stateCode = error.response.status;
    Toast.clear();
    if (stateCode === 401 || stateCode === 403) {
      Cookies.remove("token");
      Message.error("登录已失效，请重新登录!");
      router.push("/login");
    }
    return Promise.reject(error);
  }
);

export default fetch;

2. 第二步：封装请求类型

在src/utils目录下创建request.js文件。

// request.js
import fetch from "./fetch";

function request(url, method, data) {
  switch (method) {
    case "get":
      return fetch({
        method: "get",
        url,
        params: data,
      });
    case "post":
      return fetch({
        method: "post",
        url,
        data,
      });
    case "download":
      return fetch({
        method: "get",
        url,
        params: data,
        responseType: "blob",
      });
    case 'upload':
      return fetch({
        method: 'post',
        headers: { 'Content-Type': 'multipart/form-data' },
        url,
        data
      })
    default:
      return fetch;
  }
}

export default request;

注意：download、upload 并非是请求类型，只是为了方便下载、上传文件添加的。

3. 第三步：添加接口

在src/api目录下创建index.js文件，没有api文件夹的可以自己创建。

// index.js
import request from "@/utils/request";

export function login(data) {
  return request("/api/login", "get", data);
}

export function loginOut(data) {
  return request("/api/login-out", "post", data);
}

export function fileDownload(data) {
  return request("/api/file-download", "download", data);
}

注意：这里的index.js命名并非唯一，任意名称皆可，建议不同模块采用不同的命名予以区分，这样会方便管理。

到这一步，所有的封装工作基本都已经完成了，剩下的就是使用了。

四、环境变量

在根目录分别创建 .env.development 和 .env.production 文件，内容为请求地址，如果有多个地址，可以多写几个。

.env.development

VITE_BASE_URL = 'http://192.168.0.1'

.env.production

VITE_BASE_URL = '/'

默认请求地址为项目打开的地址，所以需要转换成服务器所在地址。

注意：生产环境 ‘’ 与 ‘/’ 是有区别的，'' 会包含出口路径，'/' 不会包含出口路径。

五、跨域代理

在 vue.config.js 中，或其自定义打包工具 config.js 中添加以下内容，不同打包工具之间有区别，具体查看相关工具官方文档。

vue.config.js

module.exports = {
    proxy: {
      "/api": {
        target: process.env.VITE_BASE_URL,
        changeOrigin: true,
        pathRewrite: {
          "^/api": "api"
        }
      }
    }
  },
}

六、使用

使用非常的简单，在.vue文件中引入后，就可以直接调用了。

<script>
import { login, loginOut, fileDownload } from "@/api/index";
export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
    };
  },
  methods: {
    _login() {
      const data = this.form;
      login(data).then((res) => {
        this.$message.success(res.message)
      });
    },
  }
}
</script>

END