前言

众所周知,在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之美,欢迎关注~

原文 https://www.cnblogs.com/springhgui/p/16503861.html

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

  1. import { TaroAdapter } from "axios-taro-adapter";
  2. const API_URL = "https://api.xxxx.com/";
  3. const instance = axios.create({
  4. baseURL: API_URL,
  5. timeout: 10000,
  6. adapter: TaroAdapter, // 添加这一行替换默认的适配器
  7. });

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

总结

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

Taro框架完美使用Axios的更多相关文章

  1. java 一款可以与ssm框架完美整合的web报表控件

    硕正套件运行于客户端(浏览器),与应用服务器(Application Server)技术无关,所以能完全用于J2EE. ASP.Net.php等技术开发的Web应用产品中. 硕正套件部署于服务器,支持 ...

  2. Taro 框架实现原理

    Taro 框架实现原理 小程序 H5 RN Web 多端框架 Taro 1.x & Taro 2.x 编译型架构, 语法编译转换 Taro 1/2 属于编译型架构,主要通过对类 React 代 ...

  3. 近日使用Taro框架的一点小心得

    1.yarn npm安装的包,跟权限问题有关,与网络也有关 2.Vue框架首先,是解决了view-model的问题,解放开发的双手,使得显示和数据和控制分开 3.当你觉得最近没有技术文章看时,就看收藏 ...

  4. 微信小程序项目开发实战:用WePY、mpvue、Taro打造高效的小程序》(笔记4)支持React.js语法的Taro框架

    Taro本身实现的情况类似于mpvue,mpvue的未来展望中也包含了支付宝小程序,现在的版本中,也可以使用不同的构建命令来构建出百度小程序的支持,如第10章所示,但是现在Taro先于mpvue实现了 ...

  5. Golang通过Thrift框架完美实现跨语言调用

    每种语言都有自己最擅长的领域,Golang 最适合的领域就是服务器端程序. 做为服务器端程序,需要考虑性能同时也要考虑与各种语言之间方便的通讯.采用http协议简单,但性能不高.采用TCP通讯,则需要 ...

  6. Django: 之Web框架完美解析

    Web框架解析 Web通过Socket来监听客户端,,一旦发现客户发送的信息立刻接受.接受之后在服务端查找客户的请求,找到请求返回给用户,断开.这是一个连接,不断的接收,不断的返回. #!/usr/b ...

  7. vue框架中的Axios封装

      function axios(options) {     let promise = new Promise((resolve, reject) => {         var xhr ...

  8. Taro框架下qq小程序开发体验

    qq小程序发布了,作为第一批体验者 .还是发现了和微信小程序很多不同的地方. 最新的小程序我这里都是用Taro开发的,体验较为不错.数据管理用的是redux.JS用的ES6加async等. 微信小程序 ...

  9. Taro框架---左滑动删除

    index.js import Taro, { Component } from '@tarojs/taro' import { View,ScrollView } from '@tarojs/com ...

随机推荐

  1. 实战 target 选择器,解放生产力!

    大家好,我是半夏,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注 点赞 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师-关注公众号:搞前端的半夏,了解更多前端知 ...

  2. NS2中couldn‘t read file “../tcl/mobility/scene/cbr-3-test“: no such file or directory解决方法

    运行wireless.tcl 文件时报错:couldn't read file "../../uAMPS/ns-leach.tcl": no such file or direct ...

  3. Nginx的mirror指令能干啥?

    mirror 流量复制 Nginx的 mirror 指令来自于 ngx_http_mirror_module 模块 Nginx Version > 1.13.4 mirror 指令提供的核心功能 ...

  4. join方法原理

    join()方法--原理同wait方法 如果不知道保护性暂停是啥的可以参考一下上一篇文章 https://www.cnblogs.com/duizhangz/p/16222854.html join方 ...

  5. 论文解读(NGCF)《LightGCN: Simplifying and Powering Graph Convolution Network for Recommendation》

    论文信息 论文标题:LightGCN: Simplifying and Powering Graph Convolution Network for Recommendation论文作者:Xiangn ...

  6. k8s docker 中部署think php 并搭建php websocket

    不得不说php 对云原生有点不够友好,之前用java .net打包docker镜像 一下就ok了,php倒腾了好久才算部署成功. 场景:使用阿里云ack(k8s) 部署采用thinkPHP框架的php ...

  7. SSH 的使用和配置

    命令 ssh user@hostname -p port Windows 下首次执行这个命令会由于 Windows 默认没有运行 ssh-agent 导致无法连接,可以通过在 powershell 下 ...

  8. python变量名下划线

    xx: 公有变量 _x: 单前置下划线,保护变量,私有化属性或方法,不能用于'from module import *' 以单下划线开头的表示的是protected类型的变量.即保护类型只能允许其/类 ...

  9. 论文阅读 dyngraph2vec: Capturing Network Dynamics using Dynamic Graph Representation Learning

    6 dyngraph2vec: Capturing Network Dynamics using Dynamic Graph Representation Learning207 link:https ...

  10. Canal-监听数据库表的变化

    1. 简介 Canal是阿里巴巴旗下的一款开源项目,纯Java开发.基于数据库增量日志解析,提供增量数据订阅&消费功能. 工作原理 Mysql主备复制原理 MySQL master 将数据变更 ...