不要过度封装~ 封装一个最简单的Axios 【转载】

已于 2022-05-27 21:24:37 修改
阅读量262 收藏 2
点赞数
文章标签： 前端 javascript http ajax
于 2022-05-27 21:22:56 首次发布
原文链接：https://juejin.cn/post/7094165971874611230
版权
  • 原文链接：
  • https://juejin.cn/post/7094165971874611230

前言

axios 是目前最优秀的 HTTP 请求库之一，虽然 axios 已经封装的非常好了，我们可以直接拿过来用。但是在实际的项目中，我们可能还需要对 axios 在封装一下，以便我们更好的管理项目和各个借口。
但是，目前网上有特别多的针对于 axios 在项目中的封装。不得不说，很多大佬封装得非常全面，方方面面都考虑到了。但是我们的每个真的都需要那些封装吗？显然不是的，网上的很多封装其实都显得有点过度封装了！
本篇文章实现最简单 Axios 封装，让小伙伴们扩展起来容易一些。

1.封装目的

此次进行简单的封装，所以暂时没有考虑取消重复请求、重复发送请求、请求缓存等情况！这里主要实现以下目的：

  • 实现请求拦截
  • 实现响应拦截
  • 常见错误信息处理
  • 请求头设置
  • api 集中式管理

2.初始化 axios 实例

虽然 axios 可以调用 get、post 等方法发起请求，但是我们为了更好的全局控制所有请求的相关配置，所以我们使用 axios.create()创建实例的方法来进行相关配置，这也是封装 axios 的精髓所在。
示例代码：

// 创建 axios 请求实例
const serviceAxios = axios.create({
  baseURL: "", // 基础请求地址
  timeout: 10000, // 请求超时设置
  withCredentials: false, // 跨域请求是否需要携带 cookie
});

作者：小猪课堂
链接：https://juejin.cn/post/7094165971874611230
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

通过 create 方法我们得到了一个 axios 的实例，该实例上有很多方法，比如拦截器等等。我们创建实例的时候可以配置一些基础设置，比如基础请求地址，请求超时等等。

3.设置请求拦截

我们在发送请求的时候可能需要携带一些信息在请求头上，比如 token 等，所以说我们就需要将请求拦截下来，处理一些我们的业务逻辑。

示例代码：

// 创建请求拦截
serviceAxios.interceptors.request.use(
  (config) => {
    // 如果开启 token 认证
    if (serverConfig.useTokenAuthorization) {
      config.headers["Authorization"] = localStorage.getItem("token"); // 请求头携带 token
    }
    // 设置请求头
    if(!config.headers["content-type"]) { // 如果没有设置请求头
      if(config.method === 'post') {
        config.headers["content-type"] = "application/x-www-form-urlencoded"; // post 请求
        config.data = qs.stringify(config.data); // 序列化,比如表单数据
      } else {
        config.headers["content-type"] = "application/json"; // 默认类型
      }
    }
    console.log("请求配置", config);
    return config;
  },
  (error) => {
    Promise.reject(error);
  }
);

作者：小猪课堂
链接：https://juejin.cn/post/7094165971874611230
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

我们通过调用 axios 的实例方法来进行请求拦截。

4.设置响应拦截

axios 请求的返回结果里面包含了很多东西，我们的业务层面通常只需要后端返回的数据即可，所以我们需要设置相应拦截，在响应结果返回给业务层之前做一些操作。

示例代码：

// 创建响应拦截
serviceAxios.interceptors.response.use(
  (res) => {
    let data = res.data;
    // 处理自己的业务逻辑，比如判断 token 是否过期等等
    // 代码块
    return data;
  },
  (error) => {
    let message = "";
    if (error && error.response) {
      switch (error.response.status) {
        case 302:
          message = "接口重定向了！";
          break;
        case 400:
          message = "参数不正确！";
          break;
        case 401:
          message = "您未登录，或者登录已经超时，请先登录！";
          break;
        case 403:
          message = "您没有权限操作！";
          break;
        case 404:
          message = `请求地址出错: ${error.response.config.url}`;
          break;
        case 408:
          message = "请求超时！";
          break;
        case 409:
          message = "系统已存在相同数据！";
          break;
        case 500:
          message = "服务器内部错误！";
          break;
        case 501:
          message = "服务未实现！";
          break;
        case 502:
          message = "网关错误！";
          break;
        case 503:
          message = "服务不可用！";
          break;
        case 504:
          message = "服务暂时无法访问，请稍后再试！";
          break;
        case 505:
          message = "HTTP 版本不受支持！";
          break;
        default:
          message = "异常问题，请联系管理员！";
          break;
      }
    }
    return Promise.reject(message);
  }
);

作者：小猪课堂
链接：https://juejin.cn/post/7094165971874611230
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

5.完整示例

上面直接简单介绍了拦截等相关代码，接下来我们在实际项目中来演练一下，以 Vue 项目为例。
在 src 下面新建 http 文件夹，用来存储关于 axios 请求的一些文件，然后在 http 文件夹下新建 index.js 文件，用于封装我们的 axios，然后在新建 config 文件夹，主要用来创建配置文件，最后新建一个 api 文件夹，用于集中管理我们的接口。
文件夹目录如下：

在这里插入图片描述
index.js 代码：

import axios from "axios";
import serverConfig from "./config";
import qs from "qs";


// 创建 axios 请求实例
const serviceAxios = axios.create({
  baseURL: serverConfig.baseURL, // 基础请求地址
  timeout: 10000, // 请求超时设置
  withCredentials: false, // 跨域请求是否需要携带 cookie
});


// 创建请求拦截
serviceAxios.interceptors.request.use(
  (config) => {
    // 如果开启 token 认证
    if (serverConfig.useTokenAuthorization) {
      config.headers["Authorization"] = localStorage.getItem("token"); // 请求头携带 token
    }
    // 设置请求头
    if(!config.headers["content-type"]) { // 如果没有设置请求头
      if(config.method === 'post') {
        config.headers["content-type"] = "application/x-www-form-urlencoded"; // post 请求
        config.data = qs.stringify(config.data); // 序列化,比如表单数据
      } else {
        config.headers["content-type"] = "application/json"; // 默认类型
      }
    }
    console.log("请求配置", config);
    return config;
  },
  (error) => {
    Promise.reject(error);
  }
);


// 创建响应拦截
serviceAxios.interceptors.response.use(
  (res) => {
    let data = res.data;
    // 处理自己的业务逻辑，比如判断 token 是否过期等等
    // 代码块
    return data;
  },
  (error) => {
    let message = "";
    if (error && error.response) {
      switch (error.response.status) {
        case 302:
          message = "接口重定向了！";
          break;
        case 400:
          message = "参数不正确！";
          break;
        case 401:
          message = "您未登录，或者登录已经超时，请先登录！";
          break;
        case 403:
          message = "您没有权限操作！";
          break;
        case 404:
          message = `请求地址出错: ${error.response.config.url}`;
          break;
        case 408:
          message = "请求超时！";
          break;
        case 409:
          message = "系统已存在相同数据！";
          break;
        case 500:
          message = "服务器内部错误！";
          break;
        case 501:
          message = "服务未实现！";
          break;
        case 502:
          message = "网关错误！";
          break;
        case 503:
          message = "服务不可用！";
          break;
        case 504:
          message = "服务暂时无法访问，请稍后再试！";
          break;
        case 505:
          message = "HTTP 版本不受支持！";
          break;
        default:
          message = "异常问题，请联系管理员！";
          break;
      }
    }
    return Promise.reject(message);
  }
);
export default serviceAxios;

config/index.js 代码：

const serverConfig = {
  baseURL: "https://smallpig.site", // 请求基础地址,可根据环境自定义
  useTokenAuthorization: true, // 是否开启 token 认证
};
export default serverConfig;

作者：小猪课堂
链接：https://juejin.cn/post/7094165971874611230
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

api/user.js 接口调用示例代码：

import serviceAxios from "../index";


export const getUserInfo = (params) => {
  return serviceAxios({
    url: "/api/website/queryMenuWebsite",
    method: "post",
    params,
  });
};
export const login = (data) => {
  return serviceAxios({
    url: "/api/user/login",
    method: "post",
    data,
  });
};

注意：get 请求需要传 params，post 请求需要传 data。
Vue 文件中调用示例：

import { login } from "@/http/api/user"
async loginAsync() {
  let params = {
    email: "123",
    password: "12321"
  }
  let data = await login(params);
  console.log(data);
}

6.总结

我们这里只做了最最最基础的 axios 封装，但是可扩展性较高。相较于其它文章的过度封装，这里的封装形式其实可以满足大部分应用场景了。
我们在此基础上可以根据业务场景做一些以下扩展建议：

请求拦截里面针对 token 进行处理
响应拦截里面判断 token 是否过期等等
在 config/index.js 里面动态更改 baseURL
在请求拦截里面根据业务场景修改请求头
在拦截里面设置全局请求进度条等等

如果觉得文章太繁琐或者没看懂，可以观看视频： 小猪课堂

作者：小猪课堂
链接：https://juejin.cn/post/7094165971874611230
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

BiangBaing
关注
2023年前端面试汇总-React
越陌度阡
06-29 918
React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。除此之外，冒泡到document上的事件也不是原生的浏览器事件，而是由react自己实现的合成事件（SyntheticEvent）。因此如果不想要是事件冒泡的话应该调用event.preventDefault()方法，而不是调用event
AI电商导购Chatbot IM 消息框架系统的高可用、稳定性、安全性、高性能技术架构设计
AI天才研究院
05-26 252
本文全面梳理了AI电商导购Chatbot IM消息框架的技术架构,重点探讨了其高可用性、稳定性、安全性、高性能等质量属性的设计要点,并给出了一些具体的技术方案和最佳实践。在算法层面,要在对话理解、检索、推荐等方面追求性能极致,不断尝试前沿模型;在工程层面,要在高可用、稳定性、安全性、高性能等质量属性方面狠下功夫,为算法赋能护航。
手写一个简易的axios
qq_54684701的博客
09-09 685
手写一个简易的axios 我们知道，axios是一个经过封装的AJAX库，简化了AJAX繁琐的使用步骤，让我们能够更快地发送axios请求，其实，axios的核心封装并不复杂，我们完全可以自己封装一个简单的axios。 axios的源码简析 axios的核心是一个Axios对象和一个axios函数，axios本身是一个函数，并不是Axios的实例化，但是它具有Axios这个对象上的所有方法，所以axios不是Axios函数的实例化，但在效果上axios具有Axios的实例的全部功能，因为Axios对象上的全
程序员, 不要过度封装
风杨
07-01 2808
过度封装是程序员最容易犯的错, 因为是否过度并没有固定的数值标准, 只能是有经验的程序员基于科学的判断. 过度封装的危害十分严重, 所以必须重视, 并且极力避免. 首先, 什么是"过度封装"? 我们知道, 计算机科学领域最称为经典也是最强大的思想便是递归, 分而治之. 但是, 递归本身最重要的因素是: 结束条件. 一生二, 二生三, 三生万物, 总要有终止的条件吧? 不然一辆车不停地急驰, 你怎
axios的封装（超详细简易版）
最新发布
J123375644的博客
08-08 1861
在创建项目后，我们需要进行许多操作，其中数据请求是不可避免的。通过封装 axios，可以显著提高我们的开发效率和代码的可维护性。以下是一个详细且简易的 axios 封装示例：
axios的简单封装
Mr_xiaoxuboke的博客
06-22 233
1.在脚手架的src下新建一个文件夹tools，里面再新建一个文件request.js，简单封装内容如下：2.在同一个文件夹中再新建一个与页面对应的文件比如在tool文件夹里新建一个aboutView.js，然后在aboutView.js中引入request.js3.最后在想拿到数据的组件里也就是AboutView.vue中引入aboutView.js...
关于axios的简易封装
m0_68492325的博客
11-03 138
axios的简单封装
实现一个简单的axios封装
李@@的博客
06-28 638
简单实现axios封装 1.创建生产环境地址 （本机地址） .env.development文件 VUE_APP_BASE_URL='/api' 创建开发环境地址（java后台地址） .env.production文件 VUE_APP_BASE_URL='http://106.14.26.32:8080/api' 2.在Axios代理处判断环境，进行相关的操作 module.exports = { publicPath: process.env.NODE_ENV === 'production
EjemplodeWebScraping:将网页抓取到普通网页的一个小示例，以便进行教育并教授如何执行此任务
05-15
3. `scraper.js` - 可能是一个单独的模块，封装了抓取逻辑。 4. `data`或`output`目录 - 保存抓取到的数据或结果文件。 在学习和实践这个示例时，学生会了解到HTTP协议的基础，理解HTML结构，以及如何使用...
前端基础知识点-每天一个基本知识点（100+个前端小知识，你是否都知道？）
m0_67394006的博客
03-02 9230
文章目录 前言 第一回合 一、知识点：cookie（21/09/06） 二、知识点：节流和防抖（21/09/07） 三、知识点：var和let以及const（21/09/08） 四：知识点：深拷贝和浅拷贝（21/09/09） 五、知识点：作用域和作用域链（21/09/10） 六、知识点：从输入URL到页面展示这中间发生了什么（21/09/11） 七、知识点：重排和重绘（21/09/12） 八、知识点：TCP和UDP（21/09/13） 九、知识点：三次握手（21/09/15） 十、知识点：绝对定位和相对定
为什么有了 XMLHttpRequest，还要设计一套 fetch API?
BruceYuj的博客
07-07 234
Why's THE Design(为什么这么设计) 是一系列关于计算机领域程序设计决策的文章(偏向于前端领域)，在该系列会从不同的角度讨论这种设计的优缺点、对具体实现造成的影响。由 Draveness 的《为什么这么设计》 启发 正文 在阅读本文之前，需要大家先忘掉类似于 $.ajax() 和 axios 这类的库方法或库，回归到最原始的 XMLHttpRequest，然后再去思考新设计的 f...
vue axios 简单封装以及思考
12-02
axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征： ——————————————————————————– •从浏览器中创建 XMLHttpRequest •从 node.js 发出 http 请求 •支持 Promise API •拦截请求和响应 •转换请求和响应数据 •取消请求 •自动转换JSON数据 •客户端支持防止 CSRF/XSRF 先安装 axios npm install axios axios的详细介绍以及用法 就不多说了请 移步 github :right_arrow_selector:  https://github.com/axios
axios简单封装
dpbs_的博客
04-21 280
axios封装，axios get请求导出文件
简单封装axios
吉屋安的博客
02-24 725
请求拦截器，用于在请求发送前进行处理，比如在请求头中添加 token ，在请求发送之前，如果有需要，可以在请求头中加入认证信息。创建一个名为 instance 的 Axios 实例，配置默认的请求地址和超时时间。封装 POST 请求方法，支持传入请求地址和数据。导出封装好的 GET、POST 和上传文件的方法。封装 GET 请求方法，支持传入请求地址和参数。响应拦截器，用于统一处理后端返回的错误信息。封装上传文件的方法，支持传入请求地址和文件。
axios 简单封装
MsAbby的博客
10-18 300
转载：https://segmentfault.com/a/1190000009275424#articleHeader9     import axios from 'axios' import utils from "@/assets/js/utils.js" // 确定域名 const host = process.env.NODE_ENV === 'development' ? '...
封装一个简单的axios帮助类
11-27
以下是一个简单的axios帮助类的封装方法，可以用于发送GET和POST请求，并对请求的各种异常情况进行处理： ```python import axios class AxiosHelper: def __init__(self, base_url): self.base_url = base_url ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值