vue项目中对axios进行二次封装例子

1. 新建 axios.js （可自定义）文件，对 axios 进行二次封装

// axios.js

// 对 axios 进行二次封装
import axios from 'axios'
// 引入进度条及其样式
import nprogress from 'nprogress'
import 'nprogress/nprogress.css'

// 创建 axios 实例
const $axios = axios.create({
  // 设置跟路径
  baseURL: '/api',
  // 请求超时时间
  timeout: 5000
})

// 请求拦截器，请求前做一些事情
$axios.interceptors.request.use(config => {
  // 进度条开始动
  nprogress.start()
  return config
})

// 响应拦截器
$axios.interceptors.response.use(
  res => {
    // 成功回调，返回服务器返回数据
    // 进度条消失
    nprogress.done()
    return res.data
  },
  error => {
    // 失败回调,终止 promise
    return Promise.reject(new Error('faile'))
  }
)

// 对外暴露
export default $axios

2. 建立 api.js 文件（自定义），对项目的请求 api 进行统一管理

// 统一管理项目API
import $axios from '@/api/axios.js'

// 定义相应请求的方法，并暴露出去
// 三级联动接口
export const reqCategoryList = () => $axios({ url: '/product/getBaseCategoryList', method: 'get' })

3. 组件中引入 api.js，并使用相关请求函数，以 vuex 为例

// home模块的小仓库
// 引入 api 请求方法
import { reqCategoryList } from '@/api/api.js'

// 存储数据仓库
const state = {
  // 分类数据
  categoryList: []
}

// 唯一能对state数据进行修改的地方
const mutations = {
  CATEGORYLIST(state, cateList) {
    state.categoryList = cateList
  }
}

// 业务逻辑和异步操作
const actions = {
  // 请求分类数据
  async categoryList({ commit }) {
    let res = await reqCategoryList()
    // console.log(res)
    if (res.code == 200) {
      commit('CATEGORYLIST', res.data)
    }
  }
}

// 简化仓库数据，相当于计算属性，使得组件获取仓库数据更加方便
const getters = {}

// 对外暴露实例
export default {
  state,
  mutations,
  actions,
  getters
}