axios的封装 - 技术栈

[一、 Axios 简介](#一、 Axios 简介)

[二、 Axios 在 Vue 中的基本使用](#二、 Axios 在 Vue 中的基本使用)

[三、 Axios 在 Vue 中的高级使用（三次封装框架）](#三、 Axios 在 Vue 中的高级使用（三次封装框架）)

[1. 第一次封装：](#1. 第一次封装：)

[2. 第二次封装：](#2. 第二次封装：)

[3. 第三次封装：](#3. 第三次封装：)

[4. 在组件中调用：](#4. 在组件中调用：)

一、 Axios 简介

在了解 Axios 之前，不得不提 Ajax（异步网络请求）。传统的旧浏览器在向服务器请求数据时，往往需要强制刷新整个页面，这十分消耗网络资源且对用户不友好。虽然可以通过原生 XMLHttpRequest 或 jQuery 的 Ajax 实现无刷新请求，但原生方法配置繁琐，而仅为了请求数据引入整个 jQuery 框架又大可不必。

Axios (ajax i/o system) 并不是一种新技术，它本质上仍是对原生 XMLHttpRequest 的封装。它具有以下核心特点：

是一个基于 Promise 的 HTTP 客户端，符合最新 ES 规范，可用于浏览器和 node.js。

支持拦截请求和响应、转换请求和响应数据、取消请求、自动转换 JSON 数据等功能。

官网地址：http://www.axios-js.com/。

常用配置项：在日常使用中，Axios 实例常用的配置包含：baseURL（请求基本地址）、timeout（超时时长，单位毫秒）、url（请求路径）、method（请求方法）、headers（请求头）、params（拼接在URL上的参数）以及 data（放到请求体中的参数）

二、 Axios 在 Vue 中的基本使用

1. 安装 Axios 首先需要在项目终端中通过 npm 安装 axios：

vbnet 复制代码

npm install axios

2. 在 Vue 原型上配置 为了方便在各个组件中使用，通常会在 Vue 项目的main.js文件中引入 axios，并将其挂载到 Vue 原型上，这样在组件实例（vm/vc）上就可以直接调用了：

vbnet 复制代码

// 在 main.js 中
import axios from 'axios'

// 将 axios 放到 Vue 原型上
Vue.prototype.$axios = axios

3. 在组件中使用配置完成后，可以直接在组件的事件中发送请求：

vbnet 复制代码

<template>
  <button @click="getDate">点击发送请求</button>
</template>

<script>
export default {
  methods: {
    getDate() {
      // 简单调用示例，实际中可结合 get/post 方法
      this.$axios.get('http://localhost:3000/data').then(res => {
         console.log(res);
      });
    }
  }
}
</script>

三、 Axios 在 Vue 中的高级使用（三次封装框架）

在实际项目开发中，如果有多个组件需要发送请求，且每次请求都需要进行身份验证、统一报错处理等，直接使用基础方法会产生大量冗余代码，因此我们需要进行模块化的"三次封装"。

推荐的目录结构：

复制代码

src/
├─ api/
│  ├─ request.js   # 第一次封装：创建实例 + 基础配置 + 拦截器
│  ├─ http.js      # 第二次封装：封装 get/post/put/delete 等方法
│  └─ index.js     # 第三次封装：统一管理所有接口
└─ main.js

1. 第一次封装：

创建实例与拦截器 ( api/request.js ) 作用：项目开发中可能会有多个基地址，或者不同接口需要不同的配置（如携带 Token）。通过 axios.create 创建实例 request，并统一配置 baseURL、timeout 以及请求/响应拦截器。

vbnet 复制代码

/* src/api/request.js */
import axios from "axios";

// 1. 创建 Axios 实例
const request = axios.create({
  baseURL: "http://localhost:3000", // 设置基地址
  timeout: 2000, // 请求超时：当2s没有响应就会结束请求
});

// 2. 添加请求拦截器
request.interceptors.request.use(
  function (config) {
    // 发请求前做的一些处理，例如数据转化、配置请求头、设置 token 等
    config.data = JSON.stringify(config.data); 
    config.headers = {
      "Content-Type": "application/x-www-form-urlencoded",
    };
    
    // 假设使用某种方法获取到了 token
    const token = "your_token_here"; 
    if (token) {
      config.params = { token: token }; // 如果要求携带在参数中
      config.headers.token = token; // 如果要求携带在请求头中
    }
    return config;
  }, 
  function (error) {
    return Promise.reject(error); // 对请求错误做些什么
  }
);

// 3. 添加响应拦截器
request.interceptors.response.use(
  function (response) {
    console.log('关闭请求数据动画');
    console.log('对数据进行处理');
    return response.data; // 直接返回响应对象中的核心数据
  }, 
  function (error) {
    return Promise.reject(error); // 对响应错误做点什么
  }
);

export default request;

2. 第二次封装：

封装通用请求方法 ( api/http.js ) 作用：为了简化调用逻辑并统一传参格式，我们采用类封装的方式，将常用的 get（获取数据）、post、put（更新数据，会完全替代原数据）、delete 等请求方法二次包裹，并导出一个单例模式的实例供全局使用。

vbnet 复制代码

/* src/api/http.js */
import request from './request'

// 采用类封装
class Http {
  // GET 请求
  get(url, params={}) {
    return request({ url, method: 'get', params })
  }
  
  // POST 请求
  post(url, data={}) {
    return request({ url, method: 'post', data })
  }
  
  // PUT 请求
  put(url, data={}) {
    return request({ url, method: 'put', data })
  }
  
  // DELETE 请求
  delete(url, params={}) {
    return request({ url, method: 'delete', params })
  }
}

// 导出一个实例（单例模式，全局只用一个）
export default new Http()

3. 第三次封装：

统一管理所有接口 ( api/index.js ) 作用：将所有的后端接口路径按照业务模块（如用户、商品等）集中写在这里。页面组件只需调用对应的方法，不用再去关注 URL 地址，极大提升了代码的可维护性。

vbnet 复制代码

/* src/api/index.js */
import http from './http'

// 用户相关接口模块
export const userApi = {
  login(data) {
    return http.post('/user/login', data)
  },
  getUserInfo(params) {
    return http.get('/user/info', params)
  }
}

// 商品相关接口模块
export const goodsApi = {
  getGoodsList(params) {
    return http.get('/goods/list', params)
  }
}

4. 在组件中调用：

经过三次封装后，在 Vue 组件中使用接口变得极为清爽，只需要按需引入具体的 api 模块，并配合 async/await 语法即可。

vbnet 复制代码

<template>
  <div>用户信息展示</div>
</template>

<script>
// 按需引入统一管理的接口
import { userApi } from '@/api'

export default {
  mounted() {
    this.getUser()
  },
  methods: {
    async getUser() {
      // 像调用本地普通函数一样发起网络请求
      const res = await userApi.getUserInfo({ id: 1 })
      console.log(res)
    }
  }
}
</script>