更新记录

1.0.1（2024-12-06） 下载此版本

2024-12-06

Bug 修复 ⚙️

• fix(toast)：⚙️ 修复 支付宝小程序因参数问题导致的报错 by @ztc。

文档更新 ✅

• docs: ✅ 完善进阶用法，常见问题等相关文档 by @ztc。

1.0.0（2024-12-06） 下载此版本

2024-12-06

新功能 ✨

• feat：✨ ZebraAxiosAdapter 一个用于 UniApp 的 Axios 适配器，支持小程序、H5 和 App 平台。快速实现接口拦截，接口统一管理 by @ztc。

文档更新 ✅

• docs: ✅ 新增使用文档 by @ztc 。

其他更改

• ci: ⚡ 修改CI相关配置。

平台兼容性

zebra-axios-adapter

一个用于 UniApp 的 Axios 适配器，支持小程序、H5 和 App 平台。

🔥 文档网站     🚀 zebraUI

介绍

zebra-axios-adapter 是一个用于 UniApp 的 Axios 适配器，支持小程序、H5 和 App 平台。

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。由于小程序的请求机制不同，所以在小程序中并不能直接使用Axios。该适配器就是为了解决这个问题。

特性

• 💪 完整的 TypeScript 支持。
• 🔨 支持所有 UniApp 平台（小程序、H5、App）。
• 🎨 支持文件上传和下载。
• 🚀 支持上传/下载进度监听。
• 🍭 支持请求和响应拦截器。
• ⚡️ 支持请求超时配置。
• 🍭 支持 baseURL。
• ⚡️ 支持 validateStatus 自定义验证。
• ⚡️ 支持 responseType 配置。
• 📖 完善的错误处理。

安装

通过 npm 安装

注意: axios版本最高支持1.6.8，高于此版本在支付宝小程序中会出现异常。zebra-axios-adapter已经通过peerDependencies做了限制。 如果已经安装了axios，请先卸载后重新安装。

在现有项目中使用 ZebraAxios 时，可以通过 npm 进行安装（同时安装axios）：

npm i @zebra-ui/axios-adapter axios

也可以通过 pnpm 进行安装：

# 通过 pnpm 安装
pnpm add @zebra-ui/axios-adapter axios

之后引入适配器

import { uniappAdapter, createRequest } from '@zebra-ui/axios-adapter'

使用适配器

// 创建 axios 实例
const axiosInstance = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  timeout: 10000,
  adapter: uniappAdapter
})

通过 uni_modules 安装

zebra-axios已经在uniapp的插件市场发布。

如果使用的IDE为HbuilderX，则可以通过uniapp的插件市场进行sdk导入。

import { uniappAdapter, createRequest } from '@/uni_modules/zebra-axios-adapter'

基本使用

创建实例

import axios from 'axios'
import uniAppAdapter from '@zebra-ui/axios-adapter'

const instance = axios.create({
  adapter: uniAppAdapter,
  baseURL: 'https://api.example.com',
  timeout: 5000
})

常规请求

// GET 请求
instance
  .get('/users')
  .then((response) => {
    console.log(response.data)
  })
  .catch((error) => {
    console.error(error)
  })

// POST 请求
instance.post('/users', {
  name: 'John',
  age: 30
})

// PUT 请求
instance.put('/users/1', {
  name: 'John Doe'
})

// DELETE 请求
instance.delete('/users/1')

示例项目

以下是 zebra-axios-adapter 官方提供的一些示例项目，你可以克隆该项目，并直接拷贝代码来使用。

示例项目中演示了如何使用请求拦截及通过api方式使用。

• demo-normal：此示例项目使用 HbuilderX 创建应用，通过 uni_modules 引入zebra-axios-adapter。
• demo-cli：此示例项目使用 VSCode 创建应用，通过 pnpm 引入zebra-axios-adapter。

Zebra 生态

由 Zebra 官方维护的项目

• zebra-ui 基于uniapp，使用vue3 + ts + setup 的多端兼容组件库。
• zebra-swiper 基于uniapp，适配多端的高度自定义轮播组件
• zebra-color 全端兼容的轻量级颜色选择器。

交流群

QQ群：947159437 点击加入