封装全局Axios

概述

在现代的Web开发中，我们经常需要与后端服务器进行数据交互。为了方便地发送HTTP请求和处理响应，我们通常使用Axios这样的第三方库。Axios是一个基于Promise的HTTP客户端，它可以在浏览器和Node.js中同时使用。

封装全局Axios是一种常见的做法，因为它可以让我们在整个应用程序中使用统一的网络请求设置和异常处理。本文将介绍如何封装全局Axios，并提供代码示例。

封装全局Axios的好处

  • 统一的网络请求设置：封装全局Axios可以让我们在整个应用程序中使用统一的请求设置，例如请求头、超时时间、默认的错误处理等。这样可以提高代码的可维护性，也方便我们在需要修改请求设置时只需修改一处代码。
  • 异常处理：封装全局Axios可以统一处理HTTP请求错误，例如网络错误、超时错误等。我们可以在封装的Axios实例中定义全局的错误处理函数，从而避免在每个请求中都进行错误处理。
  • 方便的拦截器使用：Axios提供了拦截器机制，我们可以在请求发送前和响应返回后对请求和响应进行拦截和处理。封装全局Axios可以让我们方便地使用拦截器，从而实现一些常见的功能，例如自动添加认证信息、请求重试等。

封装全局Axios的实现

下面是一个示例，展示了如何在Vue.js项目中封装全局Axios。

// main.js

import Vue from 'vue'
import axios from 'axios'

// 创建全局Axios实例
const http = axios.create({
  baseURL: '
  timeout: 5000
})

// 请求拦截器
http.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    // 例如，添加认证信息
    config.headers.Authorization = 'Bearer ' + localStorage.getItem('token')
    return config
  },
  error => {
    // 处理请求错误
    return Promise.reject(error)
  }
)

// 响应拦截器
http.interceptors.response.use(
  response => {
    // 对响应数据做些什么
    return response.data
  },
  error => {
    // 处理响应错误
    // 例如，token过期，跳转到登录页
    if (error.response.status === 401) {
      router.push('/login')
    }
    return Promise.reject(error)
  }
)

// 将封装的Axios实例添加到Vue原型中
Vue.prototype.$http = http

现在，在整个Vue应用程序中，我们可以通过this.$http来发起网络请求。

// 使用全局Axios实例发送GET请求
this.$http.get('/data')
  .then(response => {
    console.log(response)
  })
  .catch(error => {
    console.error(error)
  })

类图

下面是封装全局Axios的类图，使用mermaid语法绘制。

classDiagram
    class VueComponent {
    }
    class Axios {
        +get(url: string, params?: object): Promise<any>
        +post(url: string, data?: object): Promise<any>
        +put(url: string, data?: object): Promise<any>
        +delete(url: string): Promise<any>
        +interceptors: Interceptors
    }
    class Interceptors {
        +request: RequestInterceptor
        +response: ResponseInterceptor
    }
    class RequestInterceptor {
        +use(onFulfilled?: Function, onRejected?: Function): number
        +eject(id: number): void
    }
    class ResponseInterceptor {
        +use(onFulfilled?: Function, onRejected?: Function): number
        +eject(id: number): void
    }
    class Promise {
        +then(onFulfilled?: Function, onRejected?: Function): Promise<any>
        +catch(onRejected?: Function): Promise<any>
    }

    VueComponent --> Axios
    Axios --> Interceptors
    Interceptors --> RequestInterceptor
    Interceptors --> ResponseInterceptor
    Promise --> Axios
    Promise --> Interceptors

状态图

下面是封装全局Axios的状态图，使用mermaid语法绘制。

stateDiagram
    [*] --> Uninitialized