Taro框架完美使用Axios
前言
众所周知,在H5前端开发中,axios
http库几乎是必选。大部分人都对它的使用非常熟悉。然而在小程序开发中,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 axios
npm 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
库。
Taro框架完美使用Axios的更多相关文章
- java 一款可以与ssm框架完美整合的web报表控件
硕正套件运行于客户端(浏览器),与应用服务器(Application Server)技术无关,所以能完全用于J2EE. ASP.Net.php等技术开发的Web应用产品中. 硕正套件部署于服务器,支持 ...
- Taro 框架实现原理
Taro 框架实现原理 小程序 H5 RN Web 多端框架 Taro 1.x & Taro 2.x 编译型架构, 语法编译转换 Taro 1/2 属于编译型架构,主要通过对类 React 代 ...
- 近日使用Taro框架的一点小心得
1.yarn npm安装的包,跟权限问题有关,与网络也有关 2.Vue框架首先,是解决了view-model的问题,解放开发的双手,使得显示和数据和控制分开 3.当你觉得最近没有技术文章看时,就看收藏 ...
- 微信小程序项目开发实战:用WePY、mpvue、Taro打造高效的小程序》(笔记4)支持React.js语法的Taro框架
Taro本身实现的情况类似于mpvue,mpvue的未来展望中也包含了支付宝小程序,现在的版本中,也可以使用不同的构建命令来构建出百度小程序的支持,如第10章所示,但是现在Taro先于mpvue实现了 ...
- Golang通过Thrift框架完美实现跨语言调用
每种语言都有自己最擅长的领域,Golang 最适合的领域就是服务器端程序. 做为服务器端程序,需要考虑性能同时也要考虑与各种语言之间方便的通讯.采用http协议简单,但性能不高.采用TCP通讯,则需要 ...
- Django: 之Web框架完美解析
Web框架解析 Web通过Socket来监听客户端,,一旦发现客户发送的信息立刻接受.接受之后在服务端查找客户的请求,找到请求返回给用户,断开.这是一个连接,不断的接收,不断的返回. #!/usr/b ...
- vue框架中的Axios封装
function axios(options) { let promise = new Promise((resolve, reject) => { var xhr ...
- Taro框架下qq小程序开发体验
qq小程序发布了,作为第一批体验者 .还是发现了和微信小程序很多不同的地方. 最新的小程序我这里都是用Taro开发的,体验较为不错.数据管理用的是redux.JS用的ES6加async等. 微信小程序 ...
- Taro框架---左滑动删除
index.js import Taro, { Component } from '@tarojs/taro' import { View,ScrollView } from '@tarojs/com ...
随机推荐
- .NET性能优化-使用ValueStringBuilder拼接字符串
前言 这一次要和大家分享的一个Tips是在字符串拼接场景使用的,我们经常会遇到有很多短小的字符串需要拼接的场景,在这种场景下及其的不推荐使用String.Concat也就是使用+=运算符. 目前来说官 ...
- vscode编写的程序中文乱码怎么办?
(以下教程在源码文件的编码是utf-8的基础上进行!) (dev的源码文件是GBK编码,或者是GB2312?我现在好久没用dev,关于dev的信息可能有错误. 如果拿dev编写的代码用vscode打开 ...
- 【Java8新特性】Stream(分类+案例)
一.Stream概述 什么是Stream? Stream是Java8引入的全新概念,它用来处理集合中的数据,可以让你以一种声明的方式处理数据. Stream 使用一种类似用 SQL 语句从数据库查询数 ...
- 105_Power Pivot财务科目(层级深度&筛选深度)
博客:www.jiaopengzi.com 焦棚子的文章目录 请点击下载附件 1.背景 在财务科目中,需要按照科目层级来显示:在excel中都是用公式来实现,而且对于数据的管理及更新是一件头痛的事情, ...
- 每天一个 HTTP 状态码 200
200 OK 话不多说,这个状态码应该是最最最常用的了,无人不知,无人不晓: 就是表示请求成功的意思,你若安好,便是晴天. 摘自对于 https://www.google.com/ GET 请求的响应 ...
- 每天一个 HTTP 状态码 102
102 Processing 102 Processing 是用于 WebDAV协议 请求的状态码. 这个状态码表示服务器已经收到了客户端的请求,正在处理,但暂时还没有可接触的响应.可以用于防止客户端 ...
- MySQL、SqlServer、Oracle,这三种数据库的优缺点,你知道吗?
盘点MySQL.SqlServer.Oracle 三种数据库优缺点 MySQL SqlServer Oracle 一.MySQL 优 点 体积小.速度快.总体拥有成本低,开源:支持多种操作系统:是开源 ...
- 2.Tensor Shape《Pytorch神经网络高效入门教程》Deeplizard
,之后,我们张量和基础数据的形状酱油卷积运算来改变. 卷积改变了高度和宽度维度以及颜色通道的数量.
- Arraylist集合、对象数组
Arraylist集合 ArrayList是List接口的一个实现类,它是程序中最常见的一种集合. 他的特点:在增加或删除指定位置的元素时,会创建新的数组,效率比较低,因此不适合做大量的增删操作,Ar ...
- Jmeter(五十三) - 从入门到精通高级篇 - 懒人教你在Linux系统中安装Jmeter(详解教程)
1.简介 我们绝大多数使用的都是Windows操作系统,因此在Windows系统上安装JMeter已经成了家常便饭,而且安装也相对简单,但是服务器为了安全.灵活小巧,特别是前几年的勒索病毒,现在绝大多 ...