axios-uniapp-adapter-zt v1.0.3

axios-uniapp-adapter

版本要求

• axios: <=1.6.8 (由于小程序环境限制，暂不支持更高版本)

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

特性

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

安装

npm install axios-uniapp-adapter

基础使用

创建实例

import axios from "axios";
import uniAppAdapter from "axios-uniapp-adapter";

const instance = axios.create({
  adapter: uniAppAdapter,
  baseURL: "https://api.example.com",
  timeout: 5000,
  headers: {
    "Content-Type": "application/json",
  },
});

常规请求

// 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");

文件上传

// 单文件上传
instance.request({
  url: "/upload",
  method: "upload",
  data: file, // File 对象或文件路径
  name: "file", // 文件字段名
  formData: {
    // 额外的表单数据
    type: "avatar",
  },
  onProgressUpdate: (progress) => {
    console.log("上传进度：", progress.progress);
    console.log("已上传：", progress.totalBytesSent);
    console.log("总大小：", progress.totalBytesExpectedToSend);
  },
});

// 使用本地文件路径上传
instance.request({
  url: "/upload",
  method: "upload",
  data: "/storage/images/photo.jpg",
  name: "photo",
});

文件下载

// 下载文件
instance.request({
  url: "/download",
  method: "download",
  filePath: "/storage/downloads/file.pdf", // 保存路径
  onProgressUpdate: (progress) => {
    console.log("下载进度：", progress.progress);
    console.log("已下载：", progress.totalBytesWritten);
    console.log("文件大小：", progress.totalBytesExpectedToWrite);
  },
});

使用工厂函数创建适配器

import { createUniAppAdapter } from "axios-uniapp-adapter";

// 创建带有默认配置的适配器
const adapter = createUniAppAdapter({
  timeout: 10000,
  validateStatus: (status) => status >= 200 && status < 500,
});

const instance = axios.create({ adapter });

配置选项

基础配置

上传配置

下载配置

错误处理

instance
  .request({
    url: "/api/data",
    method: "get",
  })
  .catch((error) => {
    if (error.code === "ECONNABORTED") {
      console.log("请求超时");
    }
    if (error.response) {
      // 服务器返回错误状态码
      console.log(error.response.status);
      console.log(error.response.data);
    }
    console.log(error.message);
  });

TypeScript 支持

import { UniAppRequestConfig } from "axios-uniapp-adapter";

const config: UniAppRequestConfig = {
  url: "/upload",
  method: "upload",
  data: file,
  onProgressUpdate: (progress) => {
    console.log(progress.progress);
  },
};

注意事项

1. 在小程序环境中，某些请求头可能会被限制
2. 跨域请求需要在小程序管理后台配置域名白名单
3. H5 环境下需要注意跨域问题
4. 文件上传时，H5 环境支持 File 对象，小程序环境使用文件路径
5. 下载文件时需要确保有写入权限

License

MIT