axios二次封装

前面已经了解了axios(https://blog.csdn.net/weixin_51416826/article/details/139284050),那么在项目中又该如何使用axios来对接后台呢?

在 Vue 中对 Axios 进行二次封装是一种常见的做法,这样可以简化应用中的 HTTP 请求,并且可以使代码更加模块化和易于维护。下面是一些关于如何在Vue2中进行二次封装的关键点:

1. 创建 Axios 实例

首先需要创建一个 Axios 实例,并配置一些默认选项,例如基础 URL、超时时间等。(建议新建request模块:utils/request.js)

javascript 复制代码
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. 添加请求拦截器

请求拦截器可以在请求被发送到服务器之前做一些事情,比如添加认证令牌、修改请求头等。

javascript 复制代码
// 自定义配置:请求/响应拦截器
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  // 开启loading效果,禁止屏幕点击(节流处理,防止多次无效触发)
  Toast.loading({
    message: '加载中...',
    forbidClick: true,
    loadingType: 'spinner',
    duration: 0 // 不会自动关闭
  })
  // 只要有token,就在请求时携带
  const token = store.getters.token
  if (token) {
    config.headers['Access-Token'] = token
    config.headers.platform = 'H5'
  }
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

3. 添加响应拦截器

响应拦截器允许在响应被处理之前做一些事情,例如统一处理错误状态码、解析数据等。

javascript 复制代码
// 添加响应拦截器
instance.interceptors.response.use(function (response) {
  // 2xx 范围内的状态码都会触发该函数。
  // 对响应数据做点什么
  const res = response.data
  if (res.status !== 200) {
    // 给提示
   Toast(res.message)
   // 抛出错误的Promise
   return Promise.reject(res.message)
  }
  // 数据返回关闭loading
  Toast.clear()
  return res
}, function (error) {
  // 超出 2xx 范围的状态码都会触发该函数。
  // 对响应错误做点什么
  return Promise.reject(error)
})

4. 导出实例

javascript 复制代码
// 导出
export default instance

对于Vue3来说,axios二次封装方法大同小异。主要是在组合式 API 的使用上。以下是如何在 Vue 3 中进行二次封装的一些代码。

javascript 复制代码
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. 携带token
    const 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 }
相关推荐
木易 士心3 分钟前
Vue 与 React 深度对比:底层原理、开发体验与实际性能
前端·javascript·vue.js
冷冷的菜哥27 分钟前
react多文件分片上传——支持拖拽与进度展示
前端·react.js·typescript·多文件上传·分片上传
玄魂41 分钟前
VChart 官网上线 智能助手与分享功能
前端·llm·数据可视化
Lucky GGBond1 小时前
Vue + Spring Boot 实现 Excel 导出实例
vue.js·spring boot·excel
wyzqhhhh1 小时前
插槽vue/react
javascript·vue.js·react.js
许___1 小时前
Vue使用原生方式把视频当作背景
前端·javascript·vue.js
萌萌哒草头将军2 小时前
尤雨溪强烈推荐的这个库你一定要知道 ⚡️⚡️⚡️
前端·vue.js·vite
2401_878454532 小时前
Vue 核心特性详解:计算属性、监听属性与事件交互实战指南
前端·vue.js·交互
GISer_Jing2 小时前
Next.js数据获取演进史
java·开发语言·javascript
1024小神2 小时前
uniapp+vue3+vite+ts+xr-frame实现ar+vr渲染踩坑记
前端