axios二次封装-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_46451513/article/details/125284457

该段代码展示了如何在Vue应用中配置并使用Axios实例，包括设置基础URL、超时时间，以及添加请求和响应拦截器。请求拦截器用于添加token到请求头，响应拦截器则处理响应数据，当状态码为200时返回数据，否则抛出错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.封装

import axios from 'axios'
import store from '../store'

// 定义 baseURL
// const baseURL = process.env.NODE_ENV === 'development'
//   ? 'http://****'
//   : 'http://***
const baseURL = 'http://******'

// 创建 axios 实例
const service = axios.create({
  baseURL,
  timeout: 10000,
})

// 拦截请求
service.interceptors.request.use(config => {
  // 加载提示

  // 添加请求头中的 token 认证数据
  config.headers.authorization = 'Bearer ' + store.state.userModule.token

  return config
})

// 拦截响应
service.interceptors.response.use(resData => {
  // 关闭提示

  /*
   * 响应数据处理：根据前后端接口规范来处理数据结构。
   * resData.data 中保存的是后端响应主体的内容。
   * 后端与前端有交互规范，返回的是 JSON 格式的对象，
   * 在对象中当 code 为 200 时，可以从 data 中获取实际
   * 使用的数据，如果 code 不为 200，则可以从 message 中
   * 获取操作错误相关信息。
   */
  if (resData.status === 200) {
    const { code, data } = resData.data
    if (code === 200) {
      return data
    }
  }

  return Promise.reject(new Error('接口请求异常...'))
})

export default service

2.引入

import request from '@/utils/request'
Vue.prototype.$http = request