多环境配置及封装axios接口请求指南

前端

2023-09-27 17:39:03

前言

在现代前端开发中，vite作为一款备受欢迎的构建工具，以其极快的启动速度和开箱即用的开发体验受到广大开发者的青睐。它不仅能够显著提高开发效率，还能轻松实现跨平台部署。

为了方便开发和测试，我们需要在本地环境中搭建一个代理服务器，以便访问后端API。同时，为了确保不同环境下的代码能够正确运行，我们需要区分测试/生产环境，并根据不同环境的配置来请求相应的API。

此外，为了简化接口请求的过程，我们可以封装axios接口请求，以便在代码中轻松调用。

一、配置vite代理

为了在本地环境中访问后端API，我们需要配置vite代理。vite代理允许我们将本地请求代理到后端服务器，从而实现本地开发和测试。

在vite配置文件中，我们可以通过添加以下代码来配置代理：

server: {
  proxy: {
    '/api': {
      target: 'http://localhost:3000',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, '')
    }
  }
}

在上面的代码中，我们将本地请求中的/api路径代理到http://localhost:3000后端服务器上。changeOrigin选项允许我们修改请求的源头，以确保跨域请求能够正常工作。rewrite选项则允许我们将请求路径中的/api前缀删除，以便后端服务器能够正确处理请求。

二、区分测试/生产环境

为了确保不同环境下的代码能够正确运行，我们需要区分测试/生产环境。我们可以通过在.env文件中设置环境变量来实现。

在.env文件中，我们可以添加以下代码：

NODE_ENV=development

在上面的代码中，我们将环境变量NODE_ENV设置为development，表示当前环境为开发环境。

在代码中，我们可以使用以下代码来判断当前环境：

if (process.env.NODE_ENV === 'development') {
  // 开发环境代码
} else {
  // 生产环境代码
}

三、封装axios接口请求

为了简化接口请求的过程，我们可以封装axios接口请求。我们可以创建一个名为api.js的文件，并在其中封装所有的接口请求方法。

import axios from 'axios'

const baseURL = process.env.NODE_ENV === 'development' ? 'http://localhost:3000/api' : 'https://api.example.com/api'

const api = axios.create({
  baseURL,
  timeout: 10000
})

export default api

在上面的代码中，我们创建了一个名为api的axios实例，并将其导出。baseURL变量根据当前环境的不同而有所不同。在开发环境中，baseURL设置为http://localhost:3000/api，而在生产环境中，baseURL设置为https://api.example.com/api。

我们可以使用以下代码来调用封装好的接口请求方法：

api.get('/users').then((res) => {
  console.log(res.data)
})

在上面的代码中，我们使用api.get()方法来请求/users接口。

四、统一处理接口超时问题

为了统一处理接口超时问题，我们可以使用axios的interceptors功能。我们可以创建一个名为interceptors.js的文件，并在其中添加以下代码：

import axios from 'axios'

axios.interceptors.request.use((config) => {
  config.timeout = 10000
  return config
})

axios.interceptors.response.use((res) => {
  return res
}, (error) => {
  if (error.response && error.response.status === 401) {
    // 处理 401 错误
  } else {
    // 处理其他错误
  }
  return Promise.reject(error)
})