创建 Axios 实例并封装请求 在项目目录中新建 utils/request.js 文件，配置基础 URL 和拦截器,怎么做

好的，我现在需要帮助用户学习如何在utils/request.js文件中创建Axios实例并封装HTTP请求，包括配置baseURL和设置拦截器。首先，我得回忆一下Axios的基本用法，以及如何创建实例。根据用户提供的引用内容，特别是引用[2]和[3]，用户已经了解需要安装axios，并且希望将配置封装到request模块中。
首先，用户可能需要创建一个Axios实例，这样可以避免直接修改全局默认配置。引用[3]提到，baseURL是通过环境变量设置的，所以应该在实例化时配置baseURL。接下来是请求拦截器和响应拦截器的设置。请求拦截器通常用于添加token之类的认证信息，而响应拦截器处理全局的错误，比如401未授权跳转到登录页面。
然后，我需要考虑代码的结构。通常，在utils/request.js中，我们会导入axios，创建实例，然后配置拦截器，最后导出这个实例或者封装好的请求方法。用户可能需要示例代码来理解每一步怎么做。比如，在请求拦截器中，如何添加headers的Authorization字段，而在响应拦截器中如何处理不同的HTTP状态码或自定义错误码。
还要注意错误处理，确保在响应拦截器中，无论是网络错误还是API返回的错误，都能被捕获并统一处理。例如，引用[3]提到的响应拦截器处理异常信息，可能需要检查响应状态，如果是401，就重定向到登录页面，或者提示错误信息。
另外，用户可能想知道如何在不同环境中设置baseURL，比如开发环境和生产环境使用不同的URL，这可以通过Vue的环境变量来实现，如.env.development和.env.production文件，其中定义VUE_APP_BASE_URL，然后在代码中读取process.env.VUE_APP_BASE_URL。
最后，需要确保导出的实例或方法能够被其他模块引用，方便在项目各处使用。可能还需要提供示例，展示如何使用封装后的request实例发送GET或POST请求，这样用户就能看到完整的流程。
总结一下，步骤应该是：安装axios -> 创建实例配置baseURL -> 添加请求拦截器（如设置token） -> 添加响应拦截器（处理错误） -> 导出实例 -> 在其他文件中使用。需要确保代码正确，并解释每一步的作用，同时引用提供的参考资料来支持说明。以下是在utils/request.js中创建Axios实例并封装HTTP请求的最佳实践：
一、创建Axios实例
import axios from 'axios'

// 创建axios实例并配置baseURL
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_URL, // 从环境变量获取基础URL[^3]
timeout: 10000 // 设置10秒超时
})
登录后复制
二、请求拦截器配置
service.interceptors.request.use(
config => {
// 在发送请求前添加公共请求头
if (localStorage.getItem('token')) {
config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`
}
return config
},
error => {
return Promise.reject(error)
}
)
登录后复制
三、响应拦截器配置
service.interceptors.response.use(
response => {
// 处理HTTP状态码200的响应
const res = response.data
if (res.code !== 200) { // 假设业务状态码200表示成功
return Promise.reject(new Error(res.message || 'Error'))
}
return res
},
error => {
// 处理HTTP错误状态码
if (error.response) {
switch (error.response.status) {
case 401:
router.push('/login') // 跳转登录页
break
case 403:
Message.error('无权限访问')
break
default:
Message.error(error.message)
}
}
return Promise.reject(error)
}
)
登录后复制
四、导出封装后的请求方法
export default {
get(url, params) {
return service.get(url, { params })
},
post(url, data) {
return service.post(url, data)
},
// 可继续添加put/delete等方法...
}
登录后复制
五、使用示例
import request from '@/utils/request'

// GET请求
request.get('/api/user', { id: 1 })

// POST请求
request.post('/api/login', { username: 'admin', password: '123456' })
登录后复制
关键配置说明：

baseURL通过环境变量动态配置，需在项目根目录的.env文件中设置：

VUE_APP_BASE_URL = 'http://dev.api.com'

.env.production
VUE_APP_BASE_URL = 'http://prod.api.com'

拦截器实现以下功能：

请求拦截：自动携带认证Token
响应拦截：统一处理错误状态码和业务异常

封装后的请求模块提供统一调用接口，避免直接操作axios实例[^1]