前言

众所周知,在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实例的地方如下:

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的更多相关文章

  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. .NET性能优化-使用ValueStringBuilder拼接字符串

    前言 这一次要和大家分享的一个Tips是在字符串拼接场景使用的,我们经常会遇到有很多短小的字符串需要拼接的场景,在这种场景下及其的不推荐使用String.Concat也就是使用+=运算符. 目前来说官 ...

  2. vscode编写的程序中文乱码怎么办?

    (以下教程在源码文件的编码是utf-8的基础上进行!) (dev的源码文件是GBK编码,或者是GB2312?我现在好久没用dev,关于dev的信息可能有错误. 如果拿dev编写的代码用vscode打开 ...

  3. 【Java8新特性】Stream(分类+案例)

    一.Stream概述 什么是Stream? Stream是Java8引入的全新概念,它用来处理集合中的数据,可以让你以一种声明的方式处理数据. Stream 使用一种类似用 SQL 语句从数据库查询数 ...

  4. 105_Power Pivot财务科目(层级深度&筛选深度)

    博客:www.jiaopengzi.com 焦棚子的文章目录 请点击下载附件 1.背景 在财务科目中,需要按照科目层级来显示:在excel中都是用公式来实现,而且对于数据的管理及更新是一件头痛的事情, ...

  5. 每天一个 HTTP 状态码 200

    200 OK 话不多说,这个状态码应该是最最最常用的了,无人不知,无人不晓: 就是表示请求成功的意思,你若安好,便是晴天. 摘自对于 https://www.google.com/ GET 请求的响应 ...

  6. 每天一个 HTTP 状态码 102

    102 Processing 102 Processing 是用于 WebDAV协议 请求的状态码. 这个状态码表示服务器已经收到了客户端的请求,正在处理,但暂时还没有可接触的响应.可以用于防止客户端 ...

  7. MySQL、SqlServer、Oracle,这三种数据库的优缺点,你知道吗?

    盘点MySQL.SqlServer.Oracle 三种数据库优缺点 MySQL SqlServer Oracle 一.MySQL 优 点 体积小.速度快.总体拥有成本低,开源:支持多种操作系统:是开源 ...

  8. 2.Tensor Shape《Pytorch神经网络高效入门教程》Deeplizard

            ,之后,我们张量和基础数据的形状酱油卷积运算来改变. 卷积改变了高度和宽度维度以及颜色通道的数量.

  9. Arraylist集合、对象数组

    Arraylist集合 ArrayList是List接口的一个实现类,它是程序中最常见的一种集合. 他的特点:在增加或删除指定位置的元素时,会创建新的数组,效率比较低,因此不适合做大量的增删操作,Ar ...

  10. Jmeter(五十三) - 从入门到精通高级篇 - 懒人教你在Linux系统中安装Jmeter(详解教程)

    1.简介 我们绝大多数使用的都是Windows操作系统,因此在Windows系统上安装JMeter已经成了家常便饭,而且安装也相对简单,但是服务器为了安全.灵活小巧,特别是前几年的勒索病毒,现在绝大多 ...