使用 axios-miniprogram-adapter 实现 Axios 在小程序中的兼容方案

在开发node.js SDK 时 使用的是axios进行http请求，但是由于小程序环境的特殊性，直接在小程序中使用 Axios 会遇到兼容性问题。本文将介绍如何使用 axios-miniprogram-adapter 插件使 Axios 兼容小程序环境。

解决方案

1. 安装依赖

首先需要安装 axios 和 axios-miniprogram-adapter：

npm install axios axios-miniprogram-adapter

2. 环境检测

我们需要先检测当前运行环境是否为小程序：

/** 各小程序平台全局变量类型 */
declare const wx: { getSystemInfo: Function; [key: string]: any };
declare const my: { getSystemInfo: Function; [key: string]: any };
declare const dd: { httpRequest: Function; [key: string]: any };
declare const tt: { [key: string]: any };

type MiniProgramEnv = 'weixin' | 'alipay' | 'dingtalk' | 'tt' | null;

/**
 * 判断当前运行环境属于哪个小程序平台
 * @returns 'weixin' | 'alipay' | 'dingtalk' | 'tt' | null
 */
export function getMiniProgramEnv(): MiniProgramEnv {
  try {
    if (typeof wx !== 'undefined' && typeof wx.getSystemInfo === 'function') return 'weixin';
    if (typeof my !== 'undefined' && typeof my.getSystemInfo === 'function') return 'alipay';
    if (typeof dd !== 'undefined' && typeof dd.httpRequest === 'function') return 'dingtalk';
    if (typeof tt !== 'undefined') return 'tt';
  } catch (e) {
    console.warn('[getMiniProgramEnv] platform detection error:', e);
  }
  return null;
}

/**
 * 是否运行在任意小程序平台环境中
 */
export const isMiniProgram: boolean = getMiniProgramEnv() !== null;

3. 创建兼容的 Request 类

创建一个封装类，根据环境自动选择适配器：

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse, AxiosError, InternalAxiosRequestConfig, AxiosAdapter } from 'axios';
import miniprogramAdapter from 'axios-miniprogram-adapter';
import { isMiniProgram } from '../programEnv/index';
export class Request {
   private service: AxiosInstance;

   constructor(config: ClientConfigOptions) {
      this.config = {
         timeout: 10000,
         ...config
      };

      this.service = axios.create({
         baseURL: this.config.baseUrl,
         timeout: this.config.timeout,
         // 关键点：在小程序环境中使用适配器
         adapter: isMiniProgram ? miniprogramAdapter as unknown as AxiosAdapter : undefined,
         headers: {
            'Content-Type': 'application/json',
            ...(this.config.headers || {})
         }
      });

      // 添加请求拦截器
      this.service.interceptors.request.use(
         this._handleRequestIntercept.bind(this),
         (error: AxiosError) => Promise.reject(error)
      );

      // 添加响应拦截器
      this.service.interceptors.response.use(
         this._handleResponseSuccess.bind(this),
         this._handleResponseError.bind(this)
      );
   }

   // ... 其他方法实现
}

4. 使用示例

// 创建请求实例
const request = new Request({...config});

// 发起GET请求
request.get('/user', { id: 1 })
  .then(response => console.log(response))
  .catch(error => console.error(error));

// 发起POST请求
request.post('/user', { name: 'John' })
  .then(response => console.log(response))
  .catch(error => console.error(error));