封装攻略

一些大神们对于Axios封装教程的汇总

基础封装教程

封装教程文字版内容

当然可以。下面是一个关于如何封装 Axios 请求的案例教程。这个封装包括基本的 GET 和 POST 请求，以及一些常见的配置选项，如请求拦截器和响应拦截器。我们将使用 TypeScript 来确保类型安全。

步骤 1: 安装 Axios

首先，确保你已经安装了 Axios 和 TypeScript:

bash
npm install axios
npm install --save-dev typescript

步骤 2: 创建 Axios 实例

我们创建一个 axios 实例，并配置一些默认选项：

typescript
// src/api/axiosInstance.ts
import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'

// 创建 Axios 实例
const axiosInstance: AxiosInstance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
})

// 请求拦截器
axiosInstance.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    // 在发送请求之前做些什么，例如添加 token
    const token = localStorage.getItem('token')
    if (token && config.headers) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

// 响应拦截器
axiosInstance.interceptors.response.use(
  (response: AxiosResponse) => {
    // 对响应数据做点什么
    return response
  },
  (error) => {
    // 对响应错误做点什么
    return Promise.reject(error)
  }
)

export default axiosInstance

步骤 3: 创建 API 请求封装

接下来，我们创建一个 API 请求封装的文件，包含常用的 GET 和 POST 请求方法：

typescript
// src/api/api.ts
import { AxiosRequestConfig, AxiosResponse } from 'axios'
import axiosInstance from './axiosInstance'

interface ApiResponse<T> {
  data: T
  status: number
  statusText: string
  headers: any
  config: AxiosRequestConfig
  request?: any
}

// 封装 GET 请求
export async function get<T>(url: string, config?: AxiosRequestConfig): Promise<T> {
  const response: AxiosResponse<ApiResponse<T>> = await axiosInstance.get(url, config)
  return response.data
}

// 封装 POST 请求
export async function post<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
  const response: AxiosResponse<ApiResponse<T>> = await axiosInstance.post(url, data, config)
  return response.data
}

步骤 4: 使用封装的 API 请求

最后，我们在 Vue 组件中使用封装好的 API 请求方法：

vue
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { get, post } from '@/api/api'

const data = ref<any>(null)

async function fetchData() {
  try {
    data.value = await get<any>('/endpoint')
  }
  catch (error) {
    console.error('Error fetching data', error)
  }
}

async function sendData() {
  try {
    const response = await post<any>('/endpoint', { key: 'value' })
    console.log('Data sent successfully', response)
  }
  catch (error) {
    console.error('Error sending data', error)
  }
}

onMounted(() => {
  fetchData()
})
</script>

<template>
  <div>
    <h1>Data from API:</h1>
    <pre>{{ data }}</pre>
    <button @click="sendData">
      Send Data
    </button>
  </div>
</template>

解释

  1. Axios 实例: 我们创建了一个带有基本配置（如 baseURL 和 timeout）的 Axios 实例，并添加了请求和响应拦截器。
  2. API 请求封装: 我们封装了 get 和 post 请求，以便在整个应用中复用。
  3. Vue 组件使用: 在 Vue 组件中，我们使用封装好的 API 请求方法来获取和发送数据。

通过这种方式，你可以轻松地在你的 Vue 项目中使用封装好的 Axios 请求方法，确保代码的可维护性和可复用性。如果有任何进一步的问题，随时问我！