前言

众所周知,在H5前端开发中,axioshttp库几乎是必选。大部分人都对它的使用非常熟悉。然而在小程序开发中,axios怎么没法用,需要使用对应平台提供的http接口,如微信小程序的wx.request,在这时,自然不需要也无法使用axios,这一切都看似没毛病,实则有一大痛点:H5项目基于axios封装的一些通用类,在小程序开发中不能使用,不同的项目不同的框架,可能都要封装一遍,无疑增大维护成本,而且由于封装的效果不一致,团队也存在更多的学习成本。

门面模式

上面的痛点有一种设计模式可以很好的解决,就是设计模式中的门面模式外观模式,在阿里开发手册中就曾提到:

这样做的最大好处,就是业务层的开发不需要关心底层日志框架的实现及细节,也符合依赖倒置原则的思想,使我们的程序更加容易维护。

统一H5和小程序http库

门面模式简单来说就是我们进行一层封装,我们自己实现一个类似代理类,在多个不同前端框架中,我们使用不依赖axios的接口,而是依赖我们的包装类,在H5环境中我们包装类代理axios,在小程序环境中代理wx.request。这样我们业务层都可以做到统一,统一的api.js,统一的拦截逻辑等,这思路是没问题,应该不少人这么干了,然而本文并没采用这种方式封装,因为在我封装的过程中发现一个更简单的方式,看下节~

Axios适配器

在封装过程中看了下axios源码,发现adapters这个文件夹,这命名让人一看就想到了适配器模式,事实证明,这正是使用了适配器模式。如下图,默认有两个适配器的具体实现:
Taro框架完美使用Axios-LMLPHP
适配器模式带来的好处和门面模式异曲同工,既然axios支持自定义适配器,那我们干脆将axios作为门面,不同的平台实现下适配器进行替换即可,对于门面外我们提供axios的api作为标准,即可实现各个平台或框架业务层高度统一。

Taro框架下的Axios适配器

这里推荐使用npm包:axios-taro-adapter,符合设计原则中的优雅原则

开启优雅原则

就和平时使用Vue框架一样,安装axios,然后安装适配器axios-taro-adapter

  1. npm i axios
  2. npm i axios-taro-adapter

然后创建axios实例的地方如下:

import { TaroAdapter } from "axios-taro-adapter";

const API_URL = "https://api.xxxx.com/";
const instance = axios.create({
  baseURL: API_URL,
  timeout: 10000,
  adapter: TaroAdapter, // 添加这一行替换默认的适配器
});

现在你就可以完全专注于axios,完全不必知道Taro.request是怎么用的,你在Vue项目中基于axios封装的各种库都可以照搬到Taro项目中来,当然根据我们的优雅原则,你最好不要直接复制各种通用逻辑代码,而是封装成一个npm包,通过npm来依赖。

总结

通过使用适配器模式完美统一不同平台下http库,提供统一的门面(这里的门面就是axios)作为统一的标准,也可以在Taro框架中使用100%的axois库。

07-22 07:42