axios的二次封装

在前端开发中,axios 是一个非常流行的 HTTP 客户端库,用于发送 HTTP 请求。为了简化代码、统一处理请求和响应、以及增强功能(如请求拦截、响应拦截、错误处理等),通常会对 axios 进行二次封装。


1. 为什么要二次封装 axios

  1. 统一配置:可以统一设置请求的基础 URL、超时时间、请求头等。
  2. 拦截器:可以在请求发送前和响应返回后添加统一的逻辑(如添加 Token、处理错误等)。
  3. 简化调用:封装后可以提供更简洁的 API,减少重复代码。
  4. 增强功能 :可以扩展 axios 的功能,例如支持取消请求、缓存请求结果等。

2. 二次封装的核心功能

2.1 统一配置

通过 axios.create 创建一个实例,并设置全局配置。

2.2 请求拦截器

在请求发送前,对请求进行统一处理(如添加 Token)。

2.3 响应拦截器

在响应返回后,对响应进行统一处理(如错误处理)。

2.4 封装常用方法

封装 GETPOSTPUTDELETE 等常用方法,简化调用。


3. 代码实现

以下是一个完整的 axios 二次封装示例:

javascript 复制代码
import axios from 'axios';

// 创建 axios 实例
const instance = axios.create({
  baseURL: 'https://api.example.com', // 基础 URL
  timeout: 10000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json', // 默认请求头
  },
});

// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    // 在发送请求之前做些什么
    const token = localStorage.getItem('token'); // 从本地存储获取 Token
    if (token) {
      config.headers.Authorization = `Bearer ${token}`; // 添加 Token 到请求头
    }
    return config;
  },
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  (response) => {
    // 对响应数据做些什么
    if (response.status === 200) {
      return response.data; // 返回响应数据
    } else {
      return Promise.reject(response.data); // 返回错误信息
    }
  },
  (error) => {
    // 对响应错误做些什么
    if (error.response) {
      switch (error.response.status) {
        case 401:
          console.error('未授权,请重新登录');
          break;
        case 404:
          console.error('请求的资源不存在');
          break;
        case 500:
          console.error('服务器内部错误');
          break;
        default:
          console.error('请求失败', error.response.data);
      }
    } else {
      console.error('网络错误,请检查网络连接');
    }
    return Promise.reject(error);
  }
);

// 封装 GET 请求
export const get = (url, params = {}) => {
  return instance.get(url, { params });
};

// 封装 POST 请求
export const post = (url, data = {}) => {
  return instance.post(url, data);
};

// 封装 PUT 请求
export const put = (url, data = {}) => {
  return instance.put(url, data);
};

// 封装 DELETE 请求
export const del = (url, params = {}) => {
  return instance.delete(url, { params });
};

// 导出实例
export default instance;

4. 功能解析

4.1 统一配置

通过 axios.create 创建了一个实例,并设置了 baseURLtimeout 和默认请求头。这样所有通过该实例发送的请求都会继承这些配置。

4.2 请求拦截器

在请求拦截器中,从本地存储中获取 Token,并将其添加到请求头中。这样可以确保每个请求都携带了认证信息。

4.3 响应拦截器

在响应拦截器中,对响应数据进行统一处理:

  • 如果请求成功(状态码为 200),则直接返回响应数据。
  • 如果请求失败(状态码不为 200),则根据状态码进行错误处理,并返回错误信息。
4.4 封装常用方法

封装了 GETPOSTPUTDELETE 等方法,简化了调用方式。例如:

  • get('/users', { page: 1 }) 发送一个 GET 请求。
  • post('/users', { name: 'John' }) 发送一个 POST 请求。

5. 使用示例

5.1 发送 GET 请求
javascript 复制代码
import { get } from './axios';

get('/users', { page: 1 })
  .then((data) => {
    console.log('用户列表:', data);
  })
  .catch((error) => {
    console.error('获取用户列表失败:', error);
  });
5.2 发送 POST 请求
javascript 复制代码
import { post } from './axios';

post('/users', { name: 'John', age: 30 })
  .then((data) => {
    console.log('用户创建成功:', data);
  })
  .catch((error) => {
    console.error('用户创建失败:', error);
  });
5.3 发送 PUT 请求
javascript 复制代码
import { put } from './axios';

put('/users/1', { name: 'John Doe' })
  .then((data) => {
    console.log('用户更新成功:', data);
  })
  .catch((error) => {
    console.error('用户更新失败:', error);
  });
5.4 发送 DELETE 请求
javascript 复制代码
import { del } from './axios';

del('/users/1')
  .then((data) => {
    console.log('用户删除成功:', data);
  })
  .catch((error) => {
    console.error('用户删除失败:', error);
  });

6. 扩展功能

6.1 取消请求

可以通过 axios.CancelToken 实现请求的取消功能。

javascript 复制代码
import axios from 'axios';

const CancelToken = axios.CancelToken;
let cancel;

get('/users', { page: 1 }, {
  cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  }),
});

// 取消请求
cancel();
6.2 请求缓存

可以通过在封装中添加缓存逻辑,避免重复请求。

javascript 复制代码
const cache = new Map();

export const getWithCache = (url, params = {}) => {
  const cacheKey = JSON.stringify({ url, params });
  if (cache.has(cacheKey)) {
    return Promise.resolve(cache.get(cacheKey));
  }
  return get(url, params).then((data) => {
    cache.set(cacheKey, data);
    return data;
  });
};

7. 总结

通过对 axios 的二次封装,可以实现以下目标:

  1. 统一配置和管理 HTTP 请求。
  2. 通过拦截器实现请求和响应的统一处理。
  3. 简化常用方法的调用。
  4. 扩展功能,如取消请求、缓存请求等。
相关推荐
Hum8le6 分钟前
工具介绍《Awsome-Redis-Rogue-Server 与 redis-rogue-server》
网络·redis·安全·web安全
清水加冰10 分钟前
【Linux网络】HTTPS
网络·网络协议·https
久违 °3 小时前
【渗透测试】反弹 Shell 技术详解(二)
linux·网络·网络安全
Codingwiz_Joy3 小时前
Day07 -实例 非http/s数据包抓取工具的使用:科来 & wrieshark & 封包监听工具
网络·网络协议·安全·安全性测试
黑客呀3 小时前
软考网络安全专业
网络·安全·web安全
ssr——ssss4 小时前
网络华为HCIA+HCIP数据链路层协议-以太网协议
网络·华为
敲键盘的Q5 小时前
【eNSP实战】将路由器配置为DHCP服务器
网络
东阳马生架构6 小时前
Netty基础—4.NIO的使用简介二
java·网络·netty
Estrella-q6 小时前
深入理解Linux网络随笔(七):容器网络虚拟化--Veth设备对
linux·网络