Vue3实战教程之Axios的封装和环境变量

Axios是一个基于Promise的HTTP库，可以用于浏览器和Node.js的HTTP客户端。在Vue项目中，我们通常使用Axios来进行数据的请求和响应。本教程将会重点讲解Axios的封装和如何使用环境变量管理不同环境下的请求URL。

Axios的封装

Axios本身已经非常好用了，但是我们在项目中通常会遇到一些重复的请求，或者需要统一处理一些错误情况，这时候我们可以将Axios进行封装，方便统一管理和使用。

以下是Axios的封装步骤：

1. 安装Axios

npm install axios

1. 在src目录下新建api目录，并在api目录下创建request.js文件，用于封装Axios。

import axios from "axios";

const instance = axios.create({
  baseURL: process.env.VUE_APP_API_URL,
  withCredentials: true,
  timeout: 10000
});

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 处理请求参数
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  response => {
    // 处理响应数据
    return response;
  },
  error => {
    // 处理响应错误
    return Promise.reject(error);
  }
);

export default instance;

在封装的过程中，我们对Axios进行了一些配置和拦截器的处理，从而能够方便的进行统一的处理。

1. 在需要使用Axios的地方，将封装好的Axios引入。

import request from "@/api/request";

request.get("/api/user").then(response => {
  console.log(response.data);
}).catch(error => {
  console.log(error);
});

使用环境变量管理请求URL

在我们的项目中，通常有开发、测试和生产三个环境。不同的环境下，请求URL是不一样的。为了方便管理，我们可以使用环境变量来管理不同环境下的请求URL。

以下是环境变量的使用步骤：

1. 在项目根目录下创建.env.development、.env.test、.env.production文件，分别对应开发、测试和生产三个环境。

VUE_APP_API_URL=http://localhost:3000

1. 在package.json中设置不同环境下的命令。

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint",
  "serve:production": "vue-cli-service serve --mode production"
}

1. 在代码中使用环境变量。

import axios from "axios";

const instance = axios.create({
  baseURL: process.env.VUE_APP_API_URL,
  withCredentials: true,
  timeout: 10000
});

这样，当我们在不同环境下运行项目时，请求的URL将会自动切换。我们只需要修改对应环境文件中的VUE_APP_API_URL即可。

示例说明

示例1：Axios的封装

在实际项目中，我们经常会遇到需要对其请求参数进行处理的情况，例如在每个请求中都需要添加token，我们可以在请求拦截器中处理处理请求参数，代码如下：

import axios from "axios";
import store from '@/store';

const instance = axios.create({
  baseURL: process.env.VUE_APP_API_URL,
  withCredentials: true,
  timeout: 10000
});

// 请求拦截器
instance.interceptors.request.use(
  config => {
    const token = store.getters.getToken;
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    // 处理响应错误
    return Promise.reject(error);
  }
);

export default instance;

这样，我们所有发送的请求都会带上token，方便进行统一的用户验证和权限控制。

示例2：使用环境变量管理请求URL

在实际开发中，我们会遇到需要区分不同环境下请求的URL的情况，例如在开发环境下，我们需要请求本地的API服务器，而在测试环境和生产环境下，需要请求远程的API服务器。我们可以使用环境变量来实现对URL的切换。

例如，在.env.development文件中设置：

VUE_APP_API_URL=http://localhost:3000

在.env.production文件中设置：

VUE_APP_API_URL=http://api.example.com

这样，在开发环境下，我们使用Axios发送请求时，请求的URL就会是http://localhost:3000，而在生产环境下，请求的URL就会是http://api.example.com。

import axios from "axios";

const instance = axios.create({
  baseURL: process.env.VUE_APP_API_URL,
  withCredentials: true,
  timeout: 10000
});

// 请求拦截器
instance.interceptors.request.use(
  config => {
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    // 处理响应错误
    return Promise.reject(error);
  }
);

export default instance;

这样，我们就可以方便的使用环境变量来管理不同环境下的请求URL了。