拥抱高效编码：十分钟轻松封装axios，省时又省力！

2023-10-21 11:27:25

各位苦苦于重复繁琐HTTP请求的开发者们，福音降临了！axios，一款轻量级且强大的JavaScript库，能够显著简化前端开发中的网络请求。今天，我将奉上十分钟速成指南，手把手教您封装一个好用又省力的axios实例，助您提升开发效率，省时又省力，它不香吗？

请求响应拦截器：自动化网络请求

拦截器是axios强大的功能之一，它允许我们对请求和响应进行预处理和后处理。例如，我们可以使用拦截器自动添加身份验证令牌或处理响应错误。

// 请求拦截器
axios.interceptors.request.use((config) => {
  // 在发送请求前对config进行预处理
  config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token');
  return config;
}, (error) => {
  // 处理请求错误
  return Promise.reject(error);
});

// 响应拦截器
axios.interceptors.response.use((response) => {
  // 在收到响应前对response进行预处理
  if (response.status === 401) {
    // 处理未授权错误
  }
  return response;
}, (error) => {
  // 处理响应错误
  return Promise.reject(error);
});

全局loading配置：掌控加载状态

网络请求往往需要花费时间，而我们希望用户在等待时得到明确的提示。axios允许我们全局配置loading指示器，从而自动处理加载状态。

import Vue from 'vue';
import VueAxios from 'vue-axios';
import axios from 'axios';
import Loading from 'vue-loading-overlay';

Vue.use(VueAxios, axios);

// 全局loading配置
Vue.axios.defaults.loading = {
  // 是否开启loading
  enabled: true,
  // loading组件
  component: Loading,
  // loading配置
  config: {
    active: false,
    text: '加载中，请稍候...',
  },
};

统一文件下载处理：轻松下载文件

文件下载是网络请求中的常见场景。使用axios，我们可以轻松实现统一的文件下载处理。

import axios from 'axios';

// 文件下载
const downloadFile = (url, filename) => {
  axios({
    url: url,
    method: 'GET',
    responseType: 'blob',
  }).then((response) => {
    // 创建文件下载链接
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', filename);
    document.body.appendChild(link);

    // 触发下载
    link.click();

    // 清除下载链接
    document.body.removeChild(link);
  }).catch((error) => {
    // 处理下载错误
  });
};