前言

家喻户晓，在H5前端开发中，axioshttp库简直是必选。大部分人都对它的应用十分相熟。然而在小程序开发中，axios怎么没法用，须要应用对应平台提供的http接口，如微信小程序的wx.request，在这时，天然不须要也无奈应用axios，这所有都看似没故障，实则有一大痛点：H5我的项目基于axios封装的一些通用类，在小程序开发中不能应用，不同的我的项目不同的框架，可能都要封装一遍，无疑增大保护老本，而且因为封装的成果不统一，团队也存在更多的学习老本。

门面模式

下面的痛点有一种设计模式能够很好的解决，就是设计模式中的门面模式或外观模式，在阿里开发手册中就曾提到：

请不要在你的Java代码中呈现任何Log4j等日志框架的API的应用，而是应该间接应用SLF4J这种日志门面。

这样做的最大益处，就是业务层的开发不须要关怀底层日志框架的实现及细节，也合乎依赖倒置准则的思维，使咱们的程序更加容易保护。

对立H5和小程序http库

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

Axios适配器

在封装过程中看了下axios源码，发现adapters这个文件夹，这命名让人一看就想到了适配器模式，事实证明，这正是应用了适配器模式。如下图，默认有两个适配器的具体实现：

适配器模式带来的益处和门面模式殊途同归，既然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

    本文为Gui.H原创，首发于公众号：dotnet之美，欢送关注~

而后创立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库。

本文由mdnice多平台公布