Vue axios封装教程：axios.js配置与api.js接口调用详解

前言

近期在搭建项目架构时，考虑到网络请求的复用性，决定对axios进行统一封装。尽管这在前端开发中属于常见操作，但对于个人而言仍是一次有益的实践尝试。为了实现配置与业务逻辑的解耦，计划将基础配置与具体接口定义分别存放于不同文件中，因此新建了axios.js与api.js两个核心文件。

axios.js

该文件主要负责axios的基础配置，包括设置baseURL、定义请求拦截器以及响应拦截器等核心功能。


import axios from 'axios';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from '../router';

首先在当前文件中引入axios库。同时引入ElementUI组件库，以便在响应拦截器中直接调用其消息提示组件，对各类返回状态进行直观反馈。此外，引入router实例是为了在响应拦截器中根据后端返回的具体错误码执行页面跳转逻辑，例如当检测到无权限访问时，自动重定向至登录页面。


if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = 'api';
} else if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = 'https://xxxxxxxxxx/index/';
}

关于baseURL的配置，代码中区分了开发环境与生产环境的不同地址。


//请求拦截器 区分了一下正常请求时与发送formdata时的请求头
axios.interceptors.request.use((config) => {
  config.headers['Content-Type'] = 'application/json';
  if (config.method === 'post') {
    //FormData时的请求头
    if (Object.prototype.toString.call(config.data) === '[object FormData]') {
      // 请求拦截器处理
      config.headers['Content-Type'] = 'multipart/form-data';
    } else if (Object.prototype.toString.call(config.data) === '[object String]') {
      config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
    }
  } else {
    config.headers['Content-Type'] = 'application/json';
  }
  return config;
});

//响应拦截器
axios.interceptors.response.use(
  (config) => {
    let value = config.data;
    if (config.status && config.status === 200) {
      if (typeof value === 'string') {
        if (value === 'timeout') {
          ElementUI.MessageBox.confirm('太长时间没有操作或操作没有权限，请进入登录页面重新登录?', '提示', {
            confirmButtonText: '确定',
            type: 'warning'
          }).then(() => {
            router.push({ name: 'login' });
          });
        }else {
          ElementUI.Message.info(value);
        }
      }
    }
    return config;
  },
  (err) => {
    let value = err.response.statusText;
    switch (err.response.status) {
      case 400:
        ElementUI.Message.error('语法格式有误，服务器无法理解此请求')
        break;
      case 401:
      case 403:
      case 404:
      case 405:
        ElementUI.Message.warning(value);
        break;
      default:
        ElementUI.Message.error('操作过程出错，此次操作无效！' + value);
        break;
    }
    return err.response
  }
);

在响应拦截器部分，由于后端返回格式由团队自行定义，此处仅做了简单的适配处理。具体逻辑是根据后端约定的状态值进行分支判断。

接下来是对GET与POST请求方法的封装实现。


export async function axiosGet(url, params = {}) {
  let res = await axios.get(url, { params: params });
  if(res.status === 200){
    return res.data
  }else {
    throw res.statusText
  }
}

export async function axiosPost(url, params = {}) {
  let res = await axios.post(url, params);
  if(res.status === 200){
    return res.data
  }else {
    throw res.statusText
  }
}

封装过程中使用了async与await语法，直接获取响应结果并进行状态判断。若请求成功（status为200）则返回data数据；若失败则抛出statusText作为错误信息。

最后，将封装好的axiosGet与axiosPost方法通过export导出，供其他模块调用。

api.js

api.js文件用于集中管理项目中的所有API接口定义。


import { axiosGet,axiosPost } from './axios'

在此文件中引入之前封装好的axios.js，并获取其导出的axiosGet与axiosPost方法。


export default {
  getLogin:(params = {}) => {
    return axiosPost('/login', params)
  },
  getUser:(params = {}) => {
    return axiosGet('http://localhost:3000/user', params)
  }
}

此处以两个简单接口为例展示配置方式，完成api.js的定义即完成了接口层的封装工作。

使用配置好的接口

至此，axios的基础封装工作已完成，下面演示如何在业务组件中调用这些接口。


import DbauditServer from '@/server/api'
//在要调用接口的文件中引入api.js

let formData = new FormData
formData.append('password', this.formLabelAlign.password)
let res1 = await DbauditServer.getLogin(formData) //直接调用就可以正常使用了
let res2 = await DbauditServer.getUser()

为了更完善的错误处理，可以在调用接口时使用try...catch包裹。由于之前封装时未成功的情况直接抛出了错误，因此在业务层捕获error并进行特定处理（如显示用户友好的错误提示）是推荐的做法。

总结

本文介绍了axios在Vue项目中的简单封装方法及实际使用场景。通过分离配置与接口定义，提升了代码的可维护性。更多相关技术细节可参考站内其他文章，感谢阅读与支持。

Vue项目中axios的封装与api.js接口管理实战

前言

axios.js

api.js

使用配置好的接口

总结

实用工具推荐