Taro框架完美使用Axios - gui.h
source link: https://www.cnblogs.com/springhgui/p/16503861.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Taro框架完美使用Axios - gui.h - 博客园
众所周知，在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
npm i axiosnpm i axios-taro-adapter
本文为Gui.H原创，首发于公众号：dotnet之美，欢迎关注~
原文 https://www.cnblogs.com/springhgui/p/16503861.html
然后创建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库。
__EOF__
Recommend
-
62
前言 Taro 是由凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架。 使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信小程序、H5、App 端等）运行的代码。实现 一次编写，多端运行。
-
157
小程序中无法使用 npm 来进行第三方库的管理，无法使用一些比较新的 ES 规范等等，针对小程序端的开发弊端， Taro 具有以下的优秀特性 支持使用 npm/yarn
-
1087
Vue-like、React-like 代码，如何在小程序中运行?
-
21
作者：凹凸曼 - JJ Taro 是一款多端开发框架。开发者只需编写一份代码，即可生成各小程序端、H5 以及 React Native 的应用。
-
9
使用Taro开发各端的顺序建议以最小成本开发Taro各端现在公司里面的所有小程序,快应用,rn等等都在使用Taro在开发.如果只兼容一端的话,使用Taro开发,没有任何问题.但是又想一次开发,各端正常运行的话,在很多的细节上是要花一点心...
-
10
使用Taro开发的快应用如何优化体积2020-12-15快应用重复打包问题使用Taro开发快应用,有一个问题绝对不能忽视,那就是体积问题.因为快应用打包的特性(1080以下)多个页面里,如果重复应用了一个第三方库,那么这个库...
-
6
解决taro小程序中引入axios包过大的问题我们在使用taro 和 @freud/http（公司内部项目，基于axios做的二次开发） 的时候，发现构建产物中多了很多没有用的包，导致产物变大了...
-
7
Curses 首先出场的是 Curses[1]。 Curse Curses 是一个能提供基于文本终端窗...
-
7
OpenGL研究 我手上其实有几本关于OpenGL的实体书，但是比较了一下之后，发现还是电子版的《OpenGL编程指南》（俗称OpenGL红宝书）写的更好一些。该书目前已经出到第8版，我看的是第7版中文版的电子版。该书的官网是: http://www.opengl-red...
-
2
element ui框架（axios使用和跨域调试） ...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK