前面已经了解了axios（https://blog.csdn.net/weixin_51416826/article/details/139284050），那么在项目中又该如何使用axios来对接后台呢？
在 Vue 中对 Axios 进行二次封装是一种常见的做法，这样可以简化应用中的 HTTP 请求，并且可以使代码更加模块化和易于维护。下面是一些关于如何在Vue2中进行二次封装的关键点：
1. 创建 Axios 实例
首先需要创建一个 Axios 实例，并配置一些默认选项，例如基础 URL、超时时间等。（建议新建request模块：utils/request.js）
import store from '@/store'
import axios from 'axios'const instance = axios.create({baseURL: 'http://smart-shop.itheima.net/index.php?s=/api',timeout: 3000
})对于多个请求地址可以创建多个axios实例~
2. 添加请求拦截器
请求拦截器可以在请求被发送到服务器之前做一些事情，比如添加认证令牌、修改请求头等。
// 自定义配置：请求/响应拦截器
// 添加请求拦截器
instance.interceptors.request.use(function (config) {// 在发送请求之前做些什么// 开启loading效果，禁止屏幕点击（节流处理，防止多次无效触发）Toast.loading({message: '加载中...',forbidClick: true,loadingType: 'spinner',duration: 0 // 不会自动关闭})// 只要有token，就在请求时携带const token = store.getters.tokenif (token) {config.headers['Access-Token'] = tokenconfig.headers.platform = 'H5'}return config
}, function (error) {// 对请求错误做些什么return Promise.reject(error)
})3. 添加响应拦截器
响应拦截器允许在响应被处理之前做一些事情，例如统一处理错误状态码、解析数据等。
// 添加响应拦截器
instance.interceptors.response.use(function (response) {// 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么const res = response.dataif (res.status !== 200) {// 给提示Toast(res.message)// 抛出错误的Promisereturn Promise.reject(res.message)}// 数据返回关闭loadingToast.clear()return res
}, function (error) {// 超出 2xx 范围的状态码都会触发该函数。// 对响应错误做点什么return Promise.reject(error)
})
4. 导出实例
// 导出
export default instance对于Vue3来说，axios二次封装方法大同小异。主要是在组合式 API 的使用上。以下是如何在 Vue 3 中进行二次封装的一些代码。
import { useUserStore } from '@/stores'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import router from '@/router/index'const baseURL = 'http://big-event-vue-api-t.itheima.net'const instance = axios.create({// TODO 1. 基础地址，超时时间baseURL,timeout: 1000
})instance.interceptors.request.use((config) => {// TODO 2. 携带tokenconst userStore = useUserStore()if (userStore.token) {config.headers.Authorization = userStore.token}return config},(err) => Promise.reject(err)
)instance.interceptors.response.use((res) => {// TODO 4. 摘取核心响应数据if (res.data.code === 0) {return res}// TODO 3. 处理业务失败ElMessage.error(res.data.message || '服务器错误')return Promise.reject(res.data)},(err) => {ElMessage.error(err.response.data.message || '服务器错误')// TODO 5. 处理401错误if (err.response?.status === 401) {router.push('/login')}return Promise.reject(err)}
)export default instance
export { baseURL }